Side Navigation

Side navigations let users navigate the entire content of a product or a section. It can be used for a single level or a multi-level navigation.

Usage

<ul className="c-side-nav w-64">
  <li className="c-side-nav__section c-side-nav__section--purple c-side-nav__section--active">
    <a className="c-side-nav__item" href="#">
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
      <span className="c-side-nav__item-title">Item</span>
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faAngleUp} fixedWidth />
    </a>
    <ul className="c-side-nav__subitems">
      <li>
        <a className="c-side-nav__subitem c-side-nav__subitem--active" href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
      <li>
        <a className="c-side-nav__subitem " href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
    </ul>
  </li>
  <li className="c-side-nav__section c-side-nav__section--purple c-side-nav__section--open">
    <a className="c-side-nav__item" href="#">
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
      <span className="c-side-nav__item-title">Item</span>
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faAngleUp} fixedWidth />
    </a>
    <ul className="c-side-nav__subitems">
      <li>
        <a className="c-side-nav__subitem" href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
      <li>
        <a className="c-side-nav__subitem " href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a className="c-side-nav__item" href="#">
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
      <span className="c-side-nav__item-title">Item</span>
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faAngleDown} fixedWidth />
    </a>
    <ul className="c-side-nav__subitems">
      <li>
        <a className="c-side-nav__subitem" href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
      <li>
        <a className="c-side-nav__subitem " href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

Implementation

Name	Type	Tag
Elements
Element	`.c-side-nav`	`ul`
Section	`.c-side-nav__section`	`li`
Item	`.c-side-nav__item`	`a`
Item Icon	`.c-side-nav__item-icon`
Item Title	`.c-side-nav__item-title`	`span`
Subitems	`.c-side-nav__subitems`	`ul`
Subitem	`.c-side-nav__subitem`	`a`
Subitem Title	`c-side-nav__subitem-title`	`span`
Modifiers
Section color	`.c-side-nav__section--blue` `--green` `--orange` `--purple` `--red` `--teal` `--yellow`	`li`
States
Section	`.c-side-nav__section--open` `.c-side-nav__section--active`	`li`
Subitem	`.c-side-nav__subitem--active`	`a`

Modifiers

Section color

Use c-side-nav__section--{color} to set the color of the whole section. The color will only be visible if the section is set to c-side-nav__section--active.

<ul className="c-side-nav space-y-0 grid grid-cols-3 gap-4">
  <li className="c-side-nav__section c-side-nav__section--blue c-side-nav__section--active">
    <a className="c-side-nav__item" href="#">
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
      <span className="c-side-nav__item-title">Item</span>
    </a>
    <ul className="c-side-nav__subitems">
      <li>
        <a className="c-side-nav__subitem c-side-nav__subitem--active" href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
      <li>
        <a className="c-side-nav__subitem " href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
    </ul>
  </li>
  <li className="c-side-nav__section c-side-nav__section--green c-side-nav__section--active">
    <a className="c-side-nav__item" href="#">
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
      <span className="c-side-nav__item-title">Item</span>
    </a>
    <ul className="c-side-nav__subitems">
      <li>
        <a className="c-side-nav__subitem c-side-nav__subitem--active" href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
      <li>
        <a className="c-side-nav__subitem " href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
    </ul>
  </li>
  <li className="c-side-nav__section c-side-nav__section--orange c-side-nav__section--active">
    <a className="c-side-nav__item" href="#">
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
      <span className="c-side-nav__item-title">Item</span>
    </a>
    <ul className="c-side-nav__subitems">
      <li>
        <a className="c-side-nav__subitem c-side-nav__subitem--active" href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
      <li>
        <a className="c-side-nav__subitem " href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
    </ul>
  </li>
  <li className="c-side-nav__section c-side-nav__section--purple c-side-nav__section--active">
    <a className="c-side-nav__item" href="#">
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
      <span className="c-side-nav__item-title">Item</span>
    </a>
    <ul className="c-side-nav__subitems">
      <li>
        <a className="c-side-nav__subitem c-side-nav__subitem--active" href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
      <li>
        <a className="c-side-nav__subitem " href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
    </ul>
  </li>
  <li className="c-side-nav__section c-side-nav__section--red c-side-nav__section--active">
    <a className="c-side-nav__item" href="#">
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
      <span className="c-side-nav__item-title">Item</span>
    </a>
    <ul className="c-side-nav__subitems">
      <li>
        <a className="c-side-nav__subitem c-side-nav__subitem--active" href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
      <li>
        <a className="c-side-nav__subitem " href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
    </ul>
  </li>
  <li className="c-side-nav__section c-side-nav__section--teal c-side-nav__section--active">
    <a className="c-side-nav__item" href="#">
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
      <span className="c-side-nav__item-title">Item</span>
    </a>
    <ul className="c-side-nav__subitems">
      <li>
        <a className="c-side-nav__subitem c-side-nav__subitem--active" href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
      <li>
        <a className="c-side-nav__subitem " href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
    </ul>
  </li>
  <li className="c-side-nav__section c-side-nav__section--yellow c-side-nav__section--active">
    <a className="c-side-nav__item" href="#">
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
      <span className="c-side-nav__item-title">Item</span>
    </a>
    <ul className="c-side-nav__subitems">
      <li>
        <a className="c-side-nav__subitem c-side-nav__subitem--active" href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
      <li>
        <a className="c-side-nav__subitem " href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

States

Section

Open

Use c-side-nav__section--open if the section is expanded, but no item is active. Only use this state if the section has subitems.

Item
- Subitem
- Subitem

<ul className="c-side-nav w-64">
  <li className="c-side-nav__section c-side-nav__section--purple c-side-nav__section--open">
    <a className="c-side-nav__item" href="#">
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
      <span className="c-side-nav__item-title">Item</span>
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faAngleUp} fixedWidth />
    </a>
    <ul className="c-side-nav__subitems">
      <li>
        <a className="c-side-nav__subitem" href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
      <li>
        <a className="c-side-nav__subitem " href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

Active

Use c-side-nav__section--active if the section has an active item or subitem.

Item

<ul className="c-side-nav w-64">
  <li className="c-side-nav__section c-side-nav__section--purple c-side-nav__section--active">
    <a className="c-side-nav__item" href="#">
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
      <span className="c-side-nav__item-title">Item</span>
    </a>
  </li>
</ul>

Subitem active

Use c-side-nav__subitem--active if a subitem is active. The parent c-side-nav__section must be set to active.

Item
- Subitem
- Subitem

<ul className="c-side-nav w-64">
  <li className="c-side-nav__section c-side-nav__section--purple c-side-nav__section--active">
    <a className="c-side-nav__item" href="#">
      <FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
      <span className="c-side-nav__item-title">Item</span>
    </a>
    <ul className="c-side-nav__subitems">
      <li>
        <a className="c-side-nav__subitem c-side-nav__subitem--active" href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
      <li>
        <a className="c-side-nav__subitem " href="#">
          <span className="c-side-nav__subitem-title">Subitem</span>
        </a>
      </li>
    </ul>
  </li>
</ul>