2. Navigation
Last updated
Last updated
The app's navigation consists of 8 reusable elements, which have been chosen for each page based on the page's width and design. Customize these reusable elements by adding, removing or modifying your app's page links so that your Users can easily navigate your application.
Do not change the size of reusable elements themselves. Doing so may interfere with the element's responsive settings, and will require you to re-size each reusable element, on each page that it is placed upon.
Modifying the size and/or position of elements within the footer and header_navigation reusable elements may require you to change the responsive settings of the elements you modified.
The desktop navigation, mobile_header, mobile menu (list), and mobile submenu reusable elements are all fixed-width; the responsive settings won't need to be changed.
The Group Admin Container element is only displayed to logged-in, Admin Users.
The header_logo_only reusable element is only used on pages where we don't want Users to navigate away from (the reset_pw, change_pass, and onboard pages).
The header_navigation reusable element contains two groups, Group Logged In and Group Logged Out:
Group Logged Out (shown when the Current User isn't logged in):Group Logged In (shown when the Current User is logged in):TheIcon Show Mobile Menu (Logged In) element within the Group Logged In element is hidden on page load, and becomes visible when the current page width is less than or equal to 800 pixels. You can view this in the conditional formatting of that element.
Delete this element; it was only used for the template's index page (that described the features of the template).
The mobile header reusable element element contains your app's logo and the user picture/dropdown reusable element.
When the Current User's profile picture is clicked, within the user picture/dropdown reusable element, the GroupFocus element is shown (below), allowing the Current User to navigate to their profile page, account page, or logout of the application.
The mobile menu (list) reusable element contains two groups, Group Logged In and Group Logged Out:
Group Logged In (shown when the Current User is logged in):In the screenshot below, the Group Button Admin (Logged In)is shown, but this element is hidden on page load, and only visible to logged-in Admin Users.
Group Logged Out (shown when the Current User isn't logged in):The 'icons' mobile menu of the application. This reusable element is shown beneath the mobile header reusable element, on most of the "logged-in" pages, when the current page width is less than 887 pixels. Customize these icons to navigate to other pages.
There are transparent link elements on top of the Ionic icons. To select the icons underneath the transparent link elements, click on a transparent link element and use the keyboard shortcut Command + Click to select the underneath icon. This saves a ton of time so you won't need to manually move or show/hide elements in order to select the elements underneath.
