Default


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


Block


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