Nav

Wrapper for a group of navigation items.

Figma component

React

<Nav aria-label='nav'>
  <NavItem label='Nav item' component='a' />
  <NavItem label='Nav item' component='a' />
  <NavItem label='Nav item' component='a' />
</Nav>

CSS

<nav class="nav" aria-label="nav">
  <div class="nav_container">
    <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>
</nav>

Props

Direction

React

<Nav aria-label='landscape-nav'>
  <NavItem label='Nav item' component='a' />
  <NavItem label='Nav item' component='a' />
</Nav>

<Nav aria-label='portrait-nav' direction='portrait'>
  <NavItem label='Nav item' component='a' />
  <NavItem label='Nav item' component='a' />
</Nav>

CSS

<nav class="nav" aria-label="landscape-nav">
  <div class="nav_container">
    <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>
</nav>

<nav class="nav nav-portrait" aria-label="portrait-nav">
  <div class="nav_container">
    <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>
</nav>

Dense

React

<Nav aria-label='dense-nav' dense>
  <NavItem label='Nav item' component='a' />
  <NavItem label='Nav item' component='a' />
</Nav>

CSS

<nav class="nav nav-dense" aria-label="dense-nav">
  <div class="nav_container">
    <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>
</nav>