Spectre CSS

Menu ​

JS Optional

Menus are vertical list of links or buttons for actions and navigation.

Add a container element with the menu class. And add child elements with the menu-item class. You can separate menu items with a divider. Spectre CSS does not include JavaScript code, you will need to implement your JS to interact with the menus.

Menus also have Form controls (checkbox, radio and checkbox) support.

html
<ul class="menu">
  <!-- menu header text -->
  <li class="divider" data-content="LINKS">
  </li>
  <!-- menu item standard -->
  <li class="menu-item">
    <a href="#">
      <i class="icon icon-link"></i> Slack
    </a>
  </li>
  <!-- menu item with form control -->
  <li class="menu-item">
    <label class="form-checkbox">
      <input type="checkbox">
      <i class="form-icon"></i> form-checkbox
    </label>
  </li>
  <!-- menu divider -->
  <li class="divider"></li>
  <!-- menu item with badge -->
  <li class="menu-item">
    <a href="#">
      <i class="icon icon-link"></i> Settings
    </a>
    <div class="menu-badge">
      <label class="label label-primary">2</label>
    </div>
  </li>

  <li class="menu-item">
    <a href="#">My profile</a>
    <div class="menu-badge">
      <label class="form-checkbox">
        <input type="checkbox">
        <i class="form-icon"></i> Public
      </label>
    </div>
  </li>
</ul>

The dropdown is a combination of buttons and menus.

dropdown button
dropdown button

Add a container element with the dropdown class. And add a focusable element with the dropdown-toggle class for the button and a menu component right next to it. You also need to add tabindex to make the buttons focusable.

It works by leveraging the :focus pseudo-class and the next-sibling selector + to toggle the .menu container.

If the dropdown is close to the right edge of the browser, you can add the dropdown-right class to the container to prevent it appearing off screen.

dropdown button

In JavaScript, you can toggle dropdown container visibility by adding the active class.

html
<!-- basic dropdown button -->
<div class="dropdown">
  <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
    dropdown menu <i class="icon icon-caret"></i>
  </a>
  <!-- menu component -->
  <ul class="menu">
    ...
  </ul>
</div>

<!-- dropdown button group -->
<div class="dropdown">
  <div class="btn-group">
    <a href="#" class="btn">
      dropdown button
    </a>
    <a href="#" class="btn dropdown-toggle" tabindex="0">
      <i class="icon icon-caret"></i>
    </a>

    <!-- menu component -->
    <ul class="menu">
      ...
    </ul>
  </div>
</div>