# 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.&#x20;

## Responsive Tips

{% hint style="danger" %}
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.
{% endhint %}

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. &#x20;

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.&#x20;

## The Navigation Reusable Elements

### 1. Footer

![](/files/-LWyZPHgoG_mFf3cXH_U)

### 2. Desktop Navigation

{% hint style="info" %}
The `Group Expanded Messages Container` is only displayed when the Current User has clicked the caret icon to expand the Messages view.  Otherwise it's hidden and collapses in height.

The `Group Admin Container` element is only displayed to logged-in, Admin Users.
{% endhint %}

![](/files/-LWyZRKPlHDqXpqnNLHQ)

### 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).&#x20;

![](/files/-LWyZYKWSiKIDFnTFabP)

### 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.](/files/-LY5nx-XScKSywHnq7_G)

#### `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.](/files/-LY5npePz0PwkIIoY_Vw)

{% hint style="info" %}
The`Icon 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.&#x20;

<img src="/files/-LY5mSTw5WXJ2C1BF1T3" alt="" data-size="original">&#x20;
{% endhint %}

![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.](/files/-LXbynYd6os9RzOJf-Nb)

### 5. Header\_Navigation\_Demo

{% hint style="danger" %}
Delete this element; it was only used for the template's index page (that described the features of the template).
{% endhint %}

![](/files/-LWyZf5zHd6dqgSqxWGn)

### 6. Mobile Header

The `mobile header` reusable element element contains your app's logo and the `user picture/dropdown` reusable element.

![](/files/-LWyauL4UryysIhQm-H3)

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.&#x20;

![](/files/-LWylZzru3G4UUeQmpza)

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

{% hint style="info" %}
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.&#x20;
{% endhint %}

![](/files/-LWyaxseqVN7aFcvCShi)

#### `Group Logged Out` (shown when the Current User isn't logged in):

![](/files/-LWyb0bygT_0RLf_O9QX)

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

![](/files/-LY6TJLe93So45Qf-c0v)

{% hint style="info" %}
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.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/2.-navigation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.