Feedback

Nav

A collection of collapsible elements.

Elements

The component is composed of multiple elements:

nav the wrapper
- nav__group wrappers to group lists of similar nav items
  - nav__item wrapper for a clickable link. This is necessary for styling and responsiveness. You can add the nav__item--dropdown class to make it a submenu dropdown
    - nav__trigger a clickable link or trigger element in the case of a dropdown
    - nav__target the target element in the case of a dropdown, usually composed of a list of nav__item elements

<nav class="nav">
  <div class="nav__container">
    <ul class="nav__group">
      <li class="nav__item"><a href="" class="nav__trigger">Item 1</a></li>
      <li class="nav__item"><a href="" class="nav__trigger">Item 2</a></li>
      <li class="nav__item nav__item--dropdown">
        <button class="nav__trigger">Dropdown 1</button>
        <ul class="nav__target">
          <li class="nav__item"><a href="" class="nav__trigger">Item 1</a></li>
          <li class="nav__item"><a href="" class="nav__trigger">Item 2</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Direction

Changes the direction of the nav.


  class="nav"
  Default


  class="nav nav--portrait"

Dense

Make the nav__item elements smaller.


  class="nav nav--dense"

Pallote CSS

Nav

Elements

Properties

Direction

Dense