Skip to main content

NavItem

A single nav item, which can also include a dropdown list of NavItem.

Figma component Storybook documentation

React
CSS

<NavItem label='Nav item' component={Link} to='' />

<div class="nav_item">
  <a class="nav_trigger">Nav item</a>
</div>

Props

Active

React
CSS

<NavItem abel='Active' component={Link} to='' active />

<div class="nav_item nav_trigger-active">
  <a class="nav_trigger">Nav item</a>
</div>

React
CSS

<NavItem
  label='With dropdown'
  dropdown={
    <>
      <NavItem label='Nav item' component={Link} to='' />
      <NavItem label='Nav item' component={Link} to='' />
      <NavItem label='Nav item' component={Link} to='' />
    </>
  }
/>

<div class="nav_item nav_item-dropdown">
  <button class="nav_trigger">With dropdown</button>
  <div class="nav_target">
    <div class="nav_item">
      <a class="nav_trigger">Nav item</a>
    </div>
    <div class="nav_item">
      <a class="nav_trigger">Nav item</a>
    </div>
    <div class="nav_item">
      <a class="nav_trigger">Nav item</a>
    </div>
  </div>
</div>

Icon

React
CSS

<NavItem label='Icon' component={Link} to='' icon={{/* icon */}} />

<div class="nav_item">
  <a class="nav_trigger">
    <span class="nav_icon"><!-- icon --></span>
    Icon
  </a>
</div>

Props