NavGroup
NavGroup
creates collapsible containers for organizing related navigation items into hierarchical menu structures. It groups NavLink
components and other NavGroup
components, providing expandable submenus with customizable icons and states.Key features:
- Hierarchical organization: Creates nested menu structures by containing NavLinks and other NavGroups
- Expand/collapse behavior: Users can toggle visibility of grouped navigation items
- Customizable icons: Different icons for expanded/collapsed states and layout orientations
- Flexible placement: Works within NavPanel for app navigation or standalone for custom menus
- Initial state control: Configure whether groups start expanded or collapsed
Using NavGroup
The primary use of a
NavGroup
is to create an application menu with submenus, as the following example shows:Here, the highlighted
NavGroup
element nests other NavLink
and NavGroup
elements to create a hierarchical menu:Example: NavGroup in App
Here, the highlighted
NavGroup
element nests other NavLink
and NavGroup
elements to create a hierarchical menu:You do not have to use
NavGroup
within NavPanel
; you can nest it into other components to represent a menu, like in the following example:<App>
<HStack verticalAlignment="center">
<Text>Use this menu:</Text>
<NavGroup label="Pages">
<NavLink label="Page 1" />
<NavGroup label="Page 2-4">
<NavLink label="Page 2" />
<NavLink label="Page 3" />
<NavLink label="Page 4" />
</NavGroup>
<NavLink label="Page 5" />
<NavLink label="Page Other" />
</NavGroup>
</HStack>
</App>
Example: NavGroup in a Stack
<App>
<HStack verticalAlignment="center">
<Text>Use this menu:</Text>
<NavGroup label="Pages">
<NavLink label="Page 1" />
<NavGroup label="Page 2-4">
<NavLink label="Page 2" />
<NavLink label="Page 3" />
<NavLink label="Page 4" />
</NavGroup>
<NavLink label="Page 5" />
<NavLink label="Page Other" />
</NavGroup>
</HStack>
</App>
Custom Icons
You can also provide custom icons for a specific NavGroup component via it's respective property:
See the following for an example of all variants:
<App layout="horizontal">
<NavGroup icon="email" label="Send To"
iconVerticalExpanded="arrowup" iconVerticalCollapsed="arrowbottom">
<NavLink icon="arrowup" label="Boss" />
<NavGroup icon="users" label="Team"
iconHorizontalExpanded="arrowleft" iconHorizontalCollapsed="arrowright">
<NavLink label="Jane" />
<NavLink label="Will" />
</NavGroup>
<NavLink icon="cube" label="Support" />
</NavGroup>
</App>
Example: custom icons in horizontal layout
<App layout="horizontal">
<NavGroup icon="email" label="Send To"
iconVerticalExpanded="arrowup" iconVerticalCollapsed="arrowbottom">
<NavLink icon="arrowup" label="Boss" />
<NavGroup icon="users" label="Team"
iconHorizontalExpanded="arrowleft" iconHorizontalCollapsed="arrowright">
<NavLink label="Jane" />
<NavLink label="Will" />
</NavGroup>
<NavLink icon="cube" label="Support" />
</NavGroup>
</App>
Properties
enabled
(default: true)
This boolean property value indicates whether the component responds to user events (
true
) or not (false
).icon
This property defines an optional icon to display along with the
NavGroup
label.This property defines an optional icon to display along with the
NavGroup
label.Look at this example:
<App>
<HStack verticalAlignment="center">
<NavGroup icon="email" label="Send To" >
<NavLink icon="arrowup" label="Boss" />
<NavGroup icon="users" label="Team">
<NavLink label="Jane" />
<NavLink label="Will" />
<NavLink label="Sandra" />
</NavGroup>
<NavLink icon="cube" label="Support" />
</NavGroup>
</HStack>
</App>
Example: label and icon
<App>
<HStack verticalAlignment="center">
<NavGroup icon="email" label="Send To" >
<NavLink icon="arrowup" label="Boss" />
<NavGroup icon="users" label="Team">
<NavLink label="Jane" />
<NavLink label="Will" />
<NavLink label="Sandra" />
</NavGroup>
<NavLink icon="cube" label="Support" />
</NavGroup>
</HStack>
</App>
iconHorizontalCollapsed
(default: "chevronright")
Set a custom icon to display when the navigation menu is collapsed, is in a horizontal app layout, and is in a navigation submenu.
For an example, see the Custom Icons section.
iconHorizontalExpanded
(default: "chevronright")
Set a custom icon to display when the navigation menu is expanded, is in a horizontal app layout, and is in a navigation submenu.
For an example, see the Custom Icons section.
iconVerticalCollapsed
(default: "chevronright")
Set a custom icon to display when the navigation menu is collapsed, is in a vertical app layout, or is in a horizontal layout and is the top-level navigation item in the menu.
For an example, see the Custom Icons section.
iconVerticalExpanded
(default: "chevrondown")
Set a custom icon to display when the navigation menu is expanded, is in a vertical app layout, or is in a horizontal layout and is the top-level navigation item in the menu.
For an example, see the Custom Icons section.
initiallyExpanded
This property defines whether the group is initially expanded or collapsed. If not defined, the group is collapsed by default.
label
This property sets the label of the component. If not set, the component will not display a label.
This property sets the text displayed as the name of the
NavGroup
.For an example, see the section on the icon property.
to
This property defines an optional navigation link.
Events
This component does not have any events.
Exposed Methods
This component does not expose any methods.
Styling
Theme Variables
Variable | Default Value (Light) | Default Value (Dark) |
---|---|---|
backgroundColor-dropdown-NavGroup | $backgroundColor-primary | $backgroundColor-primary |
borderRadius-dropdown-NavGroup | $borderRadius | $borderRadius |
boxShadow-dropdown-NavGroup | $boxShadow-spread | $boxShadow-spread |