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:

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>

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

• iconHorizontalCollapsed
• iconHorizontalExpanded
• iconVerticalCollapsed
• iconVerticalExpanded

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>

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

Behaviors

This component supports the following behaviors:

Properties

enabled

default: true

This boolean property value indicates whether the component responds to user events (true) or not (false).

expandIconAlignment

default: "start"

This property controls the horizontal alignment of the expand/collapse arrow icon. Set to start to display the arrow immediately after the label, or end to push it to the right edge of the NavGroup (only applies when the NavGroup has a defined width).

Available values:

icon

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>

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

iconAlignment

default: "center"

This property controls the vertical alignment of the icon when the label text wraps to multiple lines. Set to baseline to align with the first line of text, start to align to the top, center for middle alignment (default), or end for bottom alignment.

Available values:

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.

noIndicator

default: false

This Boolean property controls whether to hide the visual indicator for active and hovered states. When set to true, the indicator line will not be displayed on the NavGroup toggle button.

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 Explanations