Menu#

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. ridestyler.ui 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.

<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>
  

Dropdown menu#

The dropdown is a combination of buttons and menus.

Dropdown menus component is built entirely in CSS. It is triggered by :focus event.

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.

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

Also, you can implement your JS to interact with the dropdown menus by adding the active class to the dropdown container.

<!-- basic dropdown button -->
<div class="dropdown">
  <a href="#" class="link link-primary dropdown-toggle" tabindex="0">
    dropdown menu <i class="icon icon-caret-down"></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-down"></i>
    </a>

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

Sidebars#

Sidebars are a menu attached to the side of the screen