Menus

Menus inherit a lot of styles from Cards but are primarily designed as dropdown replacements rather than page segments.

Single Selection

<ul class="c-menu c-menu--high">
  <li class="c-menu__item">Menu 1</li>
  <li class="c-menu__item">Menu 2</li>
  <li class="c-menu__item c-menu__item--divider">Divider</li>
  <li class="c-menu__item">Menu 3</li>
  <li class="c-menu__item">Menu 4</li>
  <li class="c-menu__item c-menu__item--disabled">Menu item disabled</li>
  <li class="c-menu__item c-menu__item--active">Menu item active</li>
  <li class="c-menu__item">Menu 5</li>
  <li class="c-menu__item">Menu 6</li>
  <li class="c-menu__item">Menu 7</li>
  <li class="c-menu__item">Menu 8</li>
  <li class="c-menu__item">Menu 9</li>
  <li class="c-menu__item">Menu 10</li>
</ul>

Combo Selection

Combine the c-choice checkboxes with menus to easily produce combo dropdowns.

<div class="c-menu c-menu--high">
  <label class="c-menu__item c-choice">
    <input type="checkbox"> Item 1
  </label>
  <label class="c-menu__item c-choice">
    <input type="checkbox"> Item 2
  </label>
  <div class="c-menu__item c-menu__item--divider">Divider</div>
  <label class="c-menu__item c-choice c-choice--disabled">
    <input type="checkbox" disabled> Disabled item
  </label>
  <label class="c-menu__item c-choice">
    <input type="checkbox"> Item 4
  </label>
</div>

Animation

.a-menu

Apply the .a-menu class to enable animation on a menu.

--slow, --fast

Every animation comes with slow and fast modifiers.

--top, --bottom, --left, --right

Add one of these modifiers to change the origin of the animation. Top will make the animations appear to start from the top of the menu and so on. Default is from the center of the element.