Menu

Provide vertical navigation for content.

Basic 

<aside class="menu">
  <p class="menu__heading">OVERVIEW</p>
  <ul class="menu__list">
    <li class="menu__item">
      <a class="menu__link">
        <span class="menu__icon">🇺🇳</span>
        <span class="menu__label">Dashboard</span>
        <span class="menu__after">
          <span class="badge badge--danger badge--pill badge--sm">6</span>
        </span>
      </a>
    </li>
  </ul>
  <p class="menu__heading">UI ELEMENTS</p>
  <ul class="menu__list">
    <li class="menu__item">
      <a class="menu__link">
        <span class="menu__icon">🇦🇱</span>
        <span class="menu__label">Content</span>
        <span class="menu__after"></span>
      </a>
      <ul class="menu__list">
        <li class="menu__item">
          <a class="menu__link">Typography</a>
        </li>
        <li class="menu__item">
          <a class="menu__link">Table</a>
        </li>
        <li class="menu__item">
          <a class="menu__link">Media</a>
        </li>
      </ul>
    </li>
    ...
  </ul>
  ...
</aside>

Variant

Dark

Create a dark background menu by adding .menu--dark modifier class on .menu container.

<aside class="menu menu--dark bg-dark p-5">
  <p class="menu__heading">OVERVIEW</p>
  <ul class="menu__list">
    <li class="menu__item">
      <a class="menu__link">
        <span class="menu__icon">🇺🇳</span>
        <span class="menu__label">Dashboard</span>
        <span class="menu__after">
          <span class="badge badge--danger badge--pill badge--sm">6</span>
        </span>
      </a>
    </li>
  </ul>
  ...
</aside>
Light

Create a light background menu by adding .menu--light modifier class on .menu container.

<aside class="menu menu--light bg-light p-5">
  <p class="menu__heading">OVERVIEW</p>
  <ul class="menu__list">
    <li class="menu__item">
      <a class="menu__link">
        <span class="menu__icon">🇺🇳</span>
        <span class="menu__label">Dashboard</span>
        <span class="menu__after">
          <span class="badge badge--danger badge--pill badge--sm">6</span>
        </span>
      </a>
    </li>
  </ul>
  ...
</aside>

Sizing

You can create s small size of menu by adding .menu--sm on .menu container.

<aside class="menu menu--sm border rounded shadow-sm p-5">
  <p class="menu__heading">OVERVIEW</p>
  <ul class="menu__list">
    <li class="menu__item">
      <a class="menu__link">
        <span class="menu__icon">🇺🇳</span>
        <span class="menu__label">Dashboard</span>
        <span class="menu__after">
          <span class="badge badge--danger badge--pill badge--sm">6</span>
        </span>
      </a>
    </li>
  </ul>
  ...
</aside>