Link to other pages

Finding the Page Slug

Linking to another page primarily revolves around using the page slugs to set up your link. To find the page slug of your custom pages, open the custom page editor and click the "CSS & Code Help" box.

Page Builder Button Block

The easiest way to link to another page is to add a new block in the Page Builder, and choose the Button block. Add the slug to your page.

Note: To link to a page in your app, the target page must be in the menu. You cannot link to a page that is not in the menu. If you don't want the page visible you can either set the 'hide' class or assign it to the Auxillary menu if you're not making use of that in your app

Page Builder Custom HTML Block

For more custom designs you may need to handle your links from a Custom HTML Block within the Page Builder. To link to another page from the custom HTML block, use the data-apppage attribute along with the page slug in a link tag.

<a href="#" data-apppage="language-settings">Language Settings</a>

Note: To link to a page in your app, the target page must be in the menu. You cannot link to a page that is not in the menu. If you don't want the page visible you can either set the 'hide' class or assign it to the Auxillary menu if you're not making use of that in your app

You can also link through to iFrame pages from the HTML Block using a standard link with a _blank target attribute. These will open in a pushPage window.

<a href="https://mysite.com" target="_blank">In App Browser Link</a>

Custom HTML Pages & Advanced Page Linking

If using a custom HTML page (only recommended for advanced users where the Page Builder is unsuitable), you can use the code below.

<ion-button (click)="pushPage('visit-page')">Visit Page</ion-button>

For menu items that are external links, no page slug is associated with this, so you need to use the method described below that uses the menu index and refer to the item using an index number.

A note on indexing: when you see something like pages.all.items[0] below, that means it's the first item of all your menu items. Indexing starts at 0, so the second menu item is pages.all.items[1], etc. If you have both a tab menu and a side menu, tabs go first in the pages.all.items array.

<!-- Link to another app page with a back button -->
<ion-button (click)="pushPage(pages.all.items[0])">  Visit Page</ion-button>

<!-- Link to a WordPress page with a back button -->
<ion-button (click)="pushPage( { url:'https://mysite.com/page/', type:'custom'} )">  Visit Page</ion-button>


<!-- Link to another app page without a back button -->
<ion-button (click)="openPage(pages.all.items[0])">  Visit Page</ion-button> 

<!-- Link to another page if using a tab menu -->
<ion-button (click)="pushPage(pages.tab_menu.items[0])">  Visit Page</ion-button>

<!-- Link to an external page that is in the menu -->
<ion-button (click)="pushPage('https://apppresser.com')">  Visit Page</ion-button>

<!-- Link to an external page that is not in the menu -->
<a href="https://mysite.com" target="_blank">In App Browser Link</a>

<!-- Link to the system browser, such as Chrome or Safari -->
<ion-button (click)="openPage( { url:'http://mysite.com', target:'_blank', extra_classes:'system'} )">Click</ion-button>

<!-- Link to the system browser, as Chrome or Safari, using external class -->
<a href="https://mysite.com" target="_system" class="external system">Open Default Browser</a>

<!-- Link to the In-App browser (IAB) -->
<ion-button (click)="openPage( { url:'http://mysite.com', target:'_blank' } )">Click</ion-button>