# Add New Navigation

### Overview

Admins have the capability to generate limitless personalized navigation styles tailored to both network and guest user segments. This customization can be achieved through individual user preferences or rule-based user segments.&#x20;

![](https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FEKzdtRWZ1VFqaWlpvIFg%2F02-09-2025-11-20-45.png?alt=media\&token=f24d80b9-c9ce-461e-bc9b-e30e7ae79dc7)

***

### Create a New Navigation Style

From the **Navigation** module within the **Admin Portal**, click the **Add Navigation** button. Assign a unique name to the new style navigation's name and select the relevant user segment. Only **one** user segment can be assigned per navigation style.&#x20;

#### Default Landing Page

From the **Add Navigation** pop-up menu within the Admin Portal **Navigation** module, admins can specify which module users will see upon login to the user portal.&#x20;

{% hint style="info" %}
If a user belongs to multiple user segments, the **first** matching **enabled** navigation for the user segment in the list will be shown.
{% endhint %}

{% hint style="success" %}
By default, end users are **unable** to edit or rearrange **custom navigation menu styles** assigned to their segment.

However, admins can grant them the ability to personalize their own navigation menus for their individual profiles via the **Default Network Users Navigation** style **ONLY**.&#x20;

If, after making this change, a user is still unable to make changes themselves, make sure **all** user segments the end user is part of are utilizing the Default Network Users Navigation style.

<img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FZxBT10D26w97mI2nlZj9%2F04-04-2024-10-50-17.png?alt=media&#x26;token=1a789b00-c918-4596-a378-f919544dbf4c" alt="" data-size="original">

From the default **Network User Navigation** 3-Dot action menu, click **Edit.**

Select **Yes** or **No** to allow end users to manage their individual navigation and landing page.
{% endhint %}

***

### Style and Layout

Administrators can select the style for the new custom navigation menu from three options: [Vertical, Horizontal, and Horizontal with Mega Menu layouts](https://guides.mangoapps.com/admin-guide/navigation/vertical-vs-horizontal-vs-megamenu). Depending on the chosen layout, additional menu options will become available.&#x20;

Following this selection, administrators can set the Top Bar and Side width from the dropdown menus. These options range from the full width of the website to a maximum of 1200 pixels. If the top bar is set to 1200 pixels, the site width is automatically limited to the same value. The sitde width represents the amount of width will be taken by site content.

#### Team Navigation Style

The team navigation style option lets you choose how team modules are displayed in projects, groups, and departments. Admins can configure the layout style in the **Admin Portal → Navigation → Edit (… menu) → Team Navigation Style**. This style applies to all teams and templates in the domain.

{% hint style="info" %}
Long team names will be truncated to fit within the selected menu style.
{% endhint %}

#### Layout Options

* **Vertical (default):** Modules appear in a list under the team name and image on the left.
* **Horizontal:** Modules appear as tabs next to the team name and image at the top. Extra modules are grouped under a **More** dropdown.
  * The first module opens by default.
  * A search icon expands to a full search box.
  * Project Tools and Pin Workspace options are available in the top navigation.

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FGBISPq7zmuN5XipsmNAN%2F03-09-2025-09-41-47.png?alt=media&#x26;token=8f945c45-9050-4aeb-877f-831308a0a6e1" alt="" width="563"><figcaption></figcaption></figure>

***

### Mobile Bottom Navigation Bar

In this section, admins can customize the order of modules and navigation style for mobile users. Modules that overflow on the screen will appear in the **More** menu on mobile.&#x20;

#### Main Screen Only

In this mode, pages that are directly accessible from the Navigation will have the bottom navigation bar available.

#### Most Screens

In this mode, most of the pages in the app, except a few like **Compose**, **Taking a Course**, etc., will always have the bottom navigation bar available.

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FoQgusulyScIrIMG4sOOk%2Fmobile%202.png?alt=media&#x26;token=727c13af-fb0d-4f22-83b7-98318b611db1" alt="" width="188"><figcaption></figcaption></figure>

***

### Manage Modules and Sub-Menus

Once the **Add Navigation** settings have been configured and saved, the new navigation style will become available in the left hand navigation style list. Click on it to begin customizing the layout of the modules within.

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FkRnHfaK77ZcdjROqFQVE%2Fezgif-1-2587e1a180.gif?alt=media&#x26;token=c5f2bb5b-c953-420d-a4a6-9be11e649ec4" alt="" width="563"><figcaption></figcaption></figure>

The option also exists to create **Sub-Menus** in the event you choose to keep modules active but don't necessarily want them as part of the at-a-glance navigational menu. To create a sub-menu, click the **Manage Sub-Menus** button next to the module you wish to serve as the parent.&#x20;

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2F7pV8eWIYHpcI3mV7PLn5%2F04-04-2024-03-35-01.png?alt=media&#x26;token=b6b58078-5fde-4159-8879-b2d3ab622a82" alt="" width="385"><figcaption></figcaption></figure>

From the pop-up menu, mark the checkbox for the preferred modules to add them within the new section as sub-menu items, and then click **Done.**

Modules within the resulting sub-menu can be re-arranged via drag and drop. Drag and drop additional modules into the new sub-menu or drag modules in the sub-menu out to re-add them to the at-a-glance menu.

***

### Top-Bar Navigation

Customize the top-bar navigation by enabling the modules that users can access. These modules include the Chat, Messages, [Stock Ticker](https://guides.mangoapps.com/admin-guide/navigation/add-new-navigation#stock-ticker), [My Priority Items](https://guides.mangoapps.com/user-guide/widget-gallery/my-priority-items-widget), and AI Assistant. &#x20;

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FSkHHmy8ETYGm5xTYi3ql%2F03-06-2024-02-55-57.png?alt=media&#x26;token=da45622b-065f-4614-bb2a-b9967a851485" alt=""><figcaption></figcaption></figure>

Adjust the visibility settings to display this item on web, mobile, or both platforms.

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FBEuTf8orLAO7LPHagHi0%2F03-06-2024-03-09-26.png?alt=media&#x26;token=9cc3b0e7-440f-405e-a37e-b585e6d1471f" alt="" width="563"><figcaption></figcaption></figure>

These module can also appear along the left-hand navigation menu by enabling them from the modules list in the **Main Navigation** section.

{% hint style="warning" %}
If the module has been toggled **OFF** for the domain, the option will **NOT** appear as a navigation item.

The **Messages cannot be toggled OFF**, but you can dictate if it appears on the top navigation menu.
{% endhint %}

***

#### Stock Ticker

The **Stock Ticker** is fully configurable, allowing admins to display real-time stock data and customize specific properties. Key features include:

* The ticker inherits icon colors from the top navigation.
* Gain and loss values appear on hover.
* The section is collapsible, providing a clean and streamlined navigation experience.

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FxJYjcCmLUOxSRvfp5Dke%2Fdtmnydfgbv.png?alt=media&#x26;token=93e2bb31-5da1-4af9-a5f0-3d660a6d69ab" alt="" width="538"><figcaption></figcaption></figure>

***

#### My Enterprise Apps

Once 3rd-Party Provisioned Apps are set up and enabled, MangoApps users can access these apps via the **My Enterprise Apps widget** or via the **My Enterprise Apps** item in the **Top Navigation Bar**.<br>

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FmvsQlbJA4bjWFaEfxVY8%2F08-04-2025-02-54-16.png?alt=media&#x26;token=cec31efc-a574-4880-bc0a-7b37f79b10bf" alt="" width="563"><figcaption></figcaption></figure>

This option appears in the top-right navigation section and can be enabled for both web and mobile platforms. Admins can choose which third-party apps to display through the “Show provisioned apps” setting. By default, the dropdown will show the apps provisioned in MangoApps.

<figure><img src="https://1733114811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lclpq021Ai9jH1_X4gO%2Fuploads%2FCZTWebuRoIsJgDGVT8ev%2F08-04-2025-03-13-27.png?alt=media&#x26;token=2f17b116-e28c-464d-9745-d8b09dae5bb4" alt="" width="518"><figcaption></figcaption></figure>

End users will see a dropdown menu in the top navigation, where they can access their apps with a single click.

***

#### Notification Bell

Admins can hide bell notifications from the web, mobile app, or both when customizing the top-right navigation. This option is available for both system and custom user-segment–based navigation, helping reduce information overload by preventing users to check both notifications and the news feed.

***

When satisfied, click the **Apply Navigation** button to save and apply the changes to the navigation style for **all network users** of the selected user segment.
