2. Navigation

Overview

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.

Responsive Tips

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 Navigation Reusable Elements

1. Footer

2. Desktop Navigation

The Group Admin Container element is only displayed to logged-in, Admin Users.

3. Header_Logo_Only

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).

4. Header_Navigation

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):

This Group Logged Out element is within the header_navigation reusable element. It is shown when the Current User isn't logged in. You can view this in the conditional formatting of the Group Logged Out element.

Group Logged In (shown when the Current User is logged in):

This Group Logged In element is within the header_navigation reusable element. It is shown when the Current User is logged in. You can view this in the conditional formatting of the Group Logged In element.

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.

The "login / signup popup" reusable element is within this header_navigation reusable element. The header_navigation's "Button Sign Up" and "Group Login Button" elements have workflows, which when clicked-- will change the "mode" custom state of this login / signup popup, and show the popup to the User with the appropriate form.

5. Header_Navigation_Demo

Delete this element; it was only used for the template's index page (that described the features of the template).

6. Mobile Header

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.

7. Mobile Menu (List)

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):

8. Mobile Submenu

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.

Editor:

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.