With Icons

With Custom Icon

Icon used needs to be square. Icon size is 24px by 24px.

No Highlight

No Borders

Subtle Variant

Subtle With Icons

Subtle No Highlight

Bold Variant

Nav with Spacing Control

All Nav variants' navItems accept our global Spacing (padding, margin) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!

Nav With Font Control

All Nav variants' navItems accept the following props for customizing font:

  • fontSize / font_size defaults to normal, also accepts small
  • fontWeight / font_weight defaults to regular, also accepts bold and bolder
Collapsible Nav

The collapsible prop allows users to create a nested, collapsible nav. Pass collapsible to any NavItem and pass that navItem any number of NavItems as children to create a collapsible nav.

Collapsible Nav With Options

Collapsible Navs optionally accept the following props:

  • collapsibleTrail / collapsible_trail, enables a vertical guideline to the left of the collapsible nav's children
  • iconRight optionally accepts an array of 2 icon values; the first is used as the default icon when the node is collapsed, the second is toggled when the node is expanded. If only 1 icon value is passed, the icon will not toggle between collapsible states.
Collapsible Nav With ItemSpacing

The itemSpacing prop can optionally be applied to the Nav parent element and accepts an object through which any of our Spacing (padding, margin) global prop values can be passed as an object. All spacing values passed to itemSpacing will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with itenSpacing on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing itemSpacing value.

Collapsible Nav With Custom Toggling

The collapsible nav kit uses our Collapsible kit under the hood and as such the useCollapsible hook can be used to achieve custom toggling of the collapsible nav. To do this, you must import and declare the useCollapsible hook and pass it's state to the collapsed prop. See our code example below to see how this can be done.

Horizontal Nav

Subtle Horizontal Nav

Bold Horizontal Nav


Without Title

Open in a New Tab

UI Samples using Nav Kit

Get the full picture. See how this kit is used in our samples.

Available Props