extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'menu'
  - var parent = 'components'
  - var title = 'Menu - Components - Spectre.css CSS Framework'
  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'

block docs-content
  +docs-heading('menu', 'Menu')
    include ../_layout/_ad-g.pug

    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")
          <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">
              <div class="menu-badge">
                <label class="label label-primary">2</label>
              </div>
              <a href="#">
                <i class="icon icon-link"></i> Settings
              </a>
            </li>
          </ul>
            
    +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")
          <!-- 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>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug