Menu

Menus represent groups of links, actions or navigation that a user can interact with. They come with a variety of elements and modifiers to facilitate many contexts and roles.

<ul class="menu">
  <li class="menu__item">
    <a class="menu__link" href="#">Menu Item</a>
  </li>
  <li class="menu__sep"></li>
</ul>

Used for displaying icon-only links.

<ul class="menu">
  <li class="menu__item">
    <a class="menu__link menu__link_icon" href="#">
      <svg role="img" class="icon">
        <use xlink:href="#arrow-left"></use>
      </svg>
    </a>
  </li>
</ul>

For creating non-link menu item content.

<ul class="menu">
  <li class="menu__item">
    <strong class="menu__text">Actions:</strong>
  </li>
</ul>

Elements inside the menu__link and menu__text elements receive appropriate spacing.

<ul class="menu">
  <li class="menu__item">
    <a class="menu__link" href="#">
      <svg role="img" class="icon">
        <use xlink:href="#thumbs-up"></use>
      </svg>
      <span>30k</span>
    </a>
  </li>
</ul>

is-active is-disabled

<ul class="menu">
  <li class="menu__item">
    <a class="menu__link is-active" href="#">
      Create
    </a>
  </li>
  <li class="menu__item">
    <a class="menu__link is-disabled" href="#">
      Edit
    </a>
  </li>
</ul>

Allows a horizontal menu to span the full width of it’s container.

<ul class="menu menu_full">
  ...
</ul>

Allows a horizontal menu to scroll if it exceeds the full width of it’s container.

<ul class="menu menu_scroll">
  ...
</ul>

Allows a horizontal menus to wrap if it exceeds the full width of it’s container.

<div>
  <ul class="menu menu_wrap">
    ...
  </ul>
</div>
<ul class="menu menu_stack">
  ...
</ul>

This theme is perfect for using menus on a dark background.

<ul class="menu menu_invert">
  <li class="menu__item">
    <a class="menu__link is-active" href="#">Create</a>
  </li>
  <li class="menu__item">
    <a class="menu__link" href="#">Read</a>
  </li>
  <li class="menu__item">
    <a class="menu__link is-disabled" href="#">Edit</a>
  </li>
  <li class="menu__item">
    <a class="menu__link" href="#">Delete</a>
  </li>
  <li class="menu__sep"></li>
  <li class="menu__item">
    <a class="menu__link" href="#">Logout</a>
  </li>
</ul>