Menus

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

Simple Menu

<div role="menu" class="c-card c-card--menu">
  <button role="menuitem" class="c-card__control">Menu 1</button>
  <button role="menuitem" class="c-card__control">Menu 2</button>
  <div role="separator" class="c-card__item c-card__item--divider">Divider</div>
  <button role="menuitem" class="c-card__control">Menu 3</button>
  <button role="menuitem" class="c-card__control">Menu 4</button>
  <button role="menuitem" class="c-card__control" disabled>Menu item disabled</button>
  <button role="menuitem" class="c-card__control c-card__control--active">Menu item active</button>
  <button role="menuitem" class="c-card__control">Menu 5</button>
  <button role="menuitem" class="c-card__control">Menu 6</button>
  <button role="menuitem" class="c-card__control">Menu 7</button>
  <button role="menuitem" class="c-card__control">Menu 8</button>
  <button role="menuitem" class="c-card__control">Menu 9</button>
  <button role="menuitem" class="c-card__control">Menu 10</button>
</div>

Grouped Items

<div role="menu" class="c-card c-card--menu u-high c-card--grouped">
  <button role="menuitem" class="c-card__control">Menu 1</button>
  <button role="menuitem" class="c-card__control">Menu 2</button>
  <button role="menuitem" class="c-card__control">Menu 3</button>
  <button role="menuitem" class="c-card__control">Menu 4</button>
  <div role="separator" class="c-card__divider"></div>
  <button role="menuitem" class="c-card__control" disabled>Menu control disabled</button>
  <button role="menuitem" class="c-card__control c-card__control--active">Menu control active</button>
  <div role="separator" class="c-card__divider"></div>
  <button role="menuitem" class="c-card__control">Menu 5</button>
  <button role="menuitem" class="c-card__control">Menu 6</button>
  <button role="menuitem" class="c-card__control">Menu 7</button>
  <div role="separator" class="c-card__divider"></div>
  <button role="menuitem" class="c-card__control">Menu 8</button>
  <div role="separator" class="c-card__divider"></div>
  <button role="menuitem" class="c-card__control">Menu 9</button>
  <button role="menuitem" class="c-card__control">Menu 10</button>
</div>

Colored Items

<div role="menu" class="c-card c-card--menu">
  <button role="menuitem" class="c-card__control c-card__control--brand">Menu 1</button>
  <button role="menuitem" class="c-card__control c-card__control--brand">Menu 2</button>
  <div role="separator" class="c-card__item c-card__item--divider">Divider</div>
  <button role="menuitem" class="c-card__control c-card__control--brand">Menu 3</button>
  <button role="menuitem" class="c-card__control c-card__control--brand">Menu 4</button>
  <button role="menuitem" class="c-card__control c-card__control--brand" disabled>Menu item disabled</button>
  <button role="menuitem" class="c-card__control c-card__control--brand c-card__control--active">Menu item active</button>
  <button role="menuitem" class="c-card__control c-card__control--brand">Menu 5</button>
  <button role="menuitem" class="c-card__control c-card__control--brand">Menu 6</button>
  <button role="menuitem" class="c-card__control c-card__control--brand">Menu 7</button>
  <button role="menuitem" class="c-card__control c-card__control--brand">Menu 8</button>
  <button role="menuitem" class="c-card__control c-card__control--brand">Menu 9</button>
  <button role="menuitem" class="c-card__control c-card__control--brand">Menu 10</button>
</div>

Combo

<div role="menu" class="c-card c-card--menu u-high">
  <label role="menuitem" class="c-card__control c-field c-field--choice">
    <input type="checkbox"> Control 1
  </label>
  <label role="menuitem" class="c-card__control c-field c-field--choice">
    <input type="checkbox"> Control 2
  </label>
  <div role="separator" class="c-card__item c-card__item--divider">Divider</div>
  <label role="menuitem" class="c-card__control c-field c-field--choice">
    <input type="checkbox"> Control 3
  </label>
  <label role="menuitem" class="c-card__control c-field c-field--choice">
    <input type="checkbox"> Control 4
  </label>
</div>