components / Navigation

Side Nav

Side Nav components are used traditionally as a secondary form of navigation where the primary navigation is located hierarchically above the page frame.

Side Nav is mostly intended to use within the Sidebar component.

Collapsible

Side Nav item can be rendered as collapsible menu, also known as Accordion.

Best practices:

  • no icon allowed on left side of nested item
  • no collapsible allowed inside nested collapsibe (only one level of nesting is allowed)

Decorations and Secondary Action

Side Nav item can be decorated with:

  • icon on the left (allowed only for first level items)
  • custom content on the right, like Icon or Status Light
  • custom inline content, like Tag or Badge
  • disabled state

Item can have Secondary Action on the right side, like Button or Action Menu. Besides that search may be injected into the top of Side Nav. Individual items can be rendered as regular links.

Groups

Use SideNav.Group to group navigation items based on related categories.

Keyboard Support

  • When focus is inside Side Nav, press up or down to move focus up and down.
  • Use space or enter to collapse, expand or navigate the item.

Best Practices

The Side Nav component should:

  • Group navigation items based on related categories.
  • Only one item should be active at all time.
  • Direct the user to a page that has a unique URL

  • Common container is Sidebar
  • For a third level of navigation, use a Tab.

Importing

import { SideNav } from '@servicetitan/design-system';