PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Menu#

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

- Steve Rogers
- My profile
  Public
- Settings
  2
- Logout

- Slack
- Hipchat
- Skype

- form-checkbox
- form-radio
- form-switch

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.

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

- Slack
- Hipchat
- Skype

dropdown button

- Slack
- Hipchat
- Skype

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 container to prevent it appearing off screen.

dropdown button

- Slack
- Hipchat
- Skype

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

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.