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

.docs-demo.columns
  .column.col-4.col-xs-12
    ul.menu
      li.menu-item
        .tile.tile-centered
          .tile-icon
            img.avatar(src="img/avatar-4.png" alt="Avatar")
          .tile-content
            | Steve Rogers
      li.divider
      li.menu-item
        .menu-badge
          label.label.label-primary 2
        a.active(href="#menus")
          | My profile
      li.menu-item
        a(href="#menus")
          | Settings
      li.menu-item
        a(href="#menus")
          | Logout
  .column.col-4.col-xs-12
    ul.menu
      li.divider(data-content="LINKS")
      li.menu-item
        a(href="#menus") Slack
      li.menu-item
        a(href="#menus") Hipchat
      li.menu-item
        a(href="#menus") Skype
  .column.col-4.col-xs-12
    ul.menu
      li.menu-item
        label.form-checkbox
          input(type="checkbox" checked="")
          i.form-icon
          |  form-checkbox
      li.menu-item
        label.form-radio
          input(type="radio" checked="")
          i.form-icon
          |  form-radio
      li.menu-item
        label.form-switch
          input(type="checkbox" checked="")
          i.form-icon
          |  form-switch

p
  | Add a container element with the #[code menu] class.
  | And add child elements with the #[code menu-item] class.
  | You can separate menu items with a #[code divider].
  | Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.
p
  | Menus also have #[a(href="elements.html#forms" target="_blank") Form controls] (checkbox, radio and checkbox) support.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

-         

-           
             Slack

-           
            
             form-checkbox

- 

-           
            2

             Settings

+docs-subheading('menu-dropdown', 'Dropdown menu')

p The dropdown is a combination of buttons and menus.

.docs-demo.columns
  .column.col-xs-12
    .dropdown
      .btn-group
        a.btn.btn-primary dropdown button
        a.btn.btn-primary.dropdown-toggle(tabindex="0")
          i.icon.icon-caret
        ul.menu
          li.menu-item
            a(href="#dropdowns")
              | Slack
          li.menu-item
            a(href="#dropdowns")
              | Hipchat
          li.menu-item
            a(href="#dropdowns")
              | Skype
  .column.col-xs-12
    .dropdown
      a.btn.btn-link.dropdown-toggle(tabindex="0")
        | dropdown button 
        i.icon.icon-caret
      ul.menu
        li.menu-item
          a(href="#dropdowns")
            | Slack
        li.menu-item
          a(href="#dropdowns")
            | Hipchat
        li.menu-item
          a(href="#dropdowns")
            | Skype

p
  | Dropdown menus component is built entirely in CSS. It is triggered by #[code :focus] event.
p
  | Add a container element with the #[code dropdown] class.
  | And add a focusable element with the #[code dropdown-toggle] class for the button and a #[code menu] component right next to it.
  | You also need to add #[code tabindex] to make the buttons focusable.
p
  | If the dropdown is close to the right edge of the browser, you can add the #[code dropdown-right] class to the container to prevent it appearing off screen.

.docs-demo.columns
  .column.col-xs-12.text-right
    .dropdown.dropdown-right
      a.btn.btn-primary.dropdown-toggle(tabindex="0")
        | dropdown button 
        i.icon.icon-caret
      ul.menu.text-left
        li.menu-item
          a(href="#dropdowns") Slack
        li.menu-item
          a(href="#dropdowns") Hipchat
        li.menu-item
          a(href="#dropdowns") Skype

p
  | Also, you can implement your JS to interact with the dropdown menus by adding the #[code active] class to the #[code dropdown] container.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

          dropdown menu 

          ...

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