Navigations - Group

A Group Navigation component is an essential UX element used to organize multiple navigation items under a single parent heading. It functions as a drop-down menu, allowing developers to cluster related views or pages together to prevent sidebar clutter and ensure an intuitive user experience.

Table of Contents

• Types of Navigation Components
• Create and Configure a Group Navigation Component
• Common Configurations

Types of Navigation Components

While SnapApp supports various navigation elements like Custom Views, Dashboards, and Pages, the Group component acts as a container for these items. By grouping alike components, you provide a more structured and professional interface for your end-users.

Create and Configure a Group Navigation Component

To set up a Group, you must first define the group container and then assign child navigation items to it.

1. Access the Navigation Builder

1. Open Application Settings.
2. In the left navigation panel, expand the UX menu.
3. Click on Navigation.
4. Click the Add New button from the top right of the list view.

2. Configure the Group View

Select the Group navigation type to open the configuration panel:

1. Name: Provide a clear name for the group (e.g., “Sales Management” or “System Settings”).
2. Description: Add a brief explanation of what users will find within this group.
3. Icon: Choose a representative icon that will appear next to the group name in the menu.
4. Status: Set to Active to ensure the group is visible in the application.

3. Adding Items to the Group

Once the Group is created, you can assign other navigation components (like a Custom View or Page) to it:

• Create or edit the child navigation item.
• In the Group dropdown field of that child item, select the name of the Group you just created.

Common Configurations

Regardless of the navigation type, you can control where and when the Group appears.

1. Navigation Position

Choose where the Group should be displayed within your app:

• Left Nav: The standard vertical sidebar.
• Top Nav: The horizontal header navigation.
• User Dropdown: The profile menu on the top right.

2. Visibility Logic (Show If)

To make your navigation dynamic, you can use the Show If field. By inserting a SnapApp expression, you can hide or show the entire Group based on user roles, permissions, or specific data conditions.

Note: You must create the Group component first before you can assign other navigation items to it from their respective dropdown menus.