- Brand
- Forms
- Buttons
- Utilities
- Components
  - Menu
  - Menu for Apps
  - List group
  - List group with icons
  - Nested list group
  - Nested list group with icons
  - Dropdown
  - Alerts
  - Dismissible alerts
  - Links in alerts
  - Sheet
  - Sheet with header
  - Sheet with tabs
  - Sheet with stacked tabs
  - Sheet with auto-stackable tabs
  - Sheet with alerts
  - Chosen select
  - Chosen multiple select
  - Switch
  - Disabled switch
  - Modal
- Compositions
- Ember Addon

### Menu

#### Plugin dependency

This component requires BookingSync `menu` and Bootstrap `collapse` JS plugins.

    <nav id="sidebar" class="menu menu-fixed flex-col">
      <header class="menu-header">
        <div class="menu-icon menu-header-icon">
          <i class="bs-icon-bookingsync"></i>
        </div>
        <div class="menu-body menu-header-body">
          <h4 class="menu-header-heading">Vacation Rentals</h4>
          <small>
            <a href="#menu-header-submenu"
               data-toggle="collapse"
               role="button"
               aria-expanded="false"
               aria-controls="menu-header-submenu"
               class="collapsed">
              Switch account
              <span class="caret"></span>
            </a>
          </small>
        </div>
        <nav id="menu-header-submenu" class="collapse menu-header-submenu">
          <ol>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-body menu-link-body">
                  Bed and Breakfast
                </div>
              </a>
            </li>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-body menu-link-body">
                  City Apartments
                </div>
              </a>
            </li>
          </ol>
        </nav>
      </header>
      <div class="menu-body flex-1">
        <ol>
          <li role="presentation" class="active">
            <a href="#" class="menu-link">
              <div class="menu-icon menu-link-icon">
                <i class="icon-calendar"></i>
              </div>
              <div class="menu-body menu-link-body">
                Bookings
              </div>
            </a>
          </li>
          <li role="presentation">
            <a href="#" class="menu-link">
              <div class="menu-icon menu-link-icon">
                <i class="icon-clients"></i>
              </div>
              <div class="menu-body menu-link-body">
                Clients
              </div>
            </a>
          </li>
          <li role="presentation">
            <a href="#" class="menu-link">
              <div class="menu-icon menu-link-icon">
                <i class="icon-rental"></i>
              </div>
              <div class="menu-body menu-link-body">
                Rentals
              </div>
            </a>
          </li>
        </ol>
      </div>
      <footer class="menu-footer">
        <ol>
          <li role="separator" class="divider"></li>
          <li role="presentation">
            <a href="#" class="menu-link">
              <div class="menu-icon menu-link-icon">
                <i class="icon-applications"></i>
              </div>
              <div class="menu-body menu-link-body">
                Apps
              </div>
            </a>
          </li>
          <li role="presentation">
            <a href="#" class="menu-link" data-toggle="menu-expand"
               data-menu="#sidebar" data-submenu="#sidebar-settings">
              <div class="menu-icon menu-link-icon">
                <i class="icon-settings"></i>
              </div>
              <div class="menu-body menu-link-body">
                Settings
              </div>
              <div class="menu-caret">
                <span class="caret-right"></span>
              </div>
            </a>
          </li>
          <li role="separator" class="divider"></li>
          <li role="presentation">
            <a href="#menu-footer-submenu"
               data-toggle="collapse"
               role="button"
               aria-expanded="false"
               aria-controls="menu-footer-submenu"
               class="collapsed menu-link">
              <div class="menu-icon menu-footer-icon">
                <img src="http://lorempixel.com/100/100/people/9" alt="Jane Doe"
                     class="img-rounded">
              </div>
              <div class="menu-body menu-link-body">
                Jane Doe
              </div>
              <div class="menu-caret">
                <span class="caret"></span>
              </div>
            </a>
          </li>
        </ol>
        <nav id="menu-footer-submenu" class="collapse menu-footer-submenu">
          <ol>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-icon menu-link-icon">
                </div>
                <div class="menu-body menu-link-body">
                  Help Center
                </div>
              </a>
            </li>
            <li role="separator" class="divider"></li>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-icon menu-link-icon">
                </div>
                <div class="menu-body menu-link-body">
                  Profile
                </div>
              </a>
            </li>
            <li role="presentation" class="active">
              <a href="#" class="menu-link">
                <div class="menu-icon menu-link-icon">
                </div>
                <div class="menu-body menu-link-body">
                  Logout
                </div>
              </a>
            </li>
          </ol>
        </nav>
      </footer>
    </nav>
    <nav id="sidebar-settings" class="menu menu-fixed flex-col menu-submenu menu-submenu-collapsed">
      <header class="menu-header">
        <div class="menu-body menu-header-body">
          <h4 class="menu-header-heading">Settings</h4>
        </div>
      </header>
      <div class="menu-body flex-1">
        <ol>
          <li role="presentation" class="active">
            <a href="#" class="menu-link">
              <div class="menu-body menu-link-body">
                General
              </div>
            </a>
          </li>
          <li role="presentation">
            <a href="#" class="menu-link">
              <div class="menu-body menu-link-body">
                Payments
              </div>
            </a>
          </li>
          <li role="presentation">
            <a href="#" class="menu-link">
              <div class="menu-body menu-link-body">
                Apps
              </div>
            </a>
          </li>
        </ol>
      </div>
    </nav>

### Menu for Apps

#### Plugin dependency

This component requires BookingSync `menu` and Bootstrap `collapse` JS plugins.

    <nav class="menu menu-fixed flex-col menu-submenu menu-app">
      <header class="menu-header">
        <div class="menu-body menu-header-body">
          <h4 class="menu-header-heading">Awesome App</h4>
          <small>
            <a href="#menu-header-submenu"
               data-toggle="collapse"
               role="button"
               aria-expanded="false"
               aria-controls="menu-header-submenu"
               class="collapsed">
              San Francisco
              <span class="caret"></span>
            </a>
          </small>
        </div>
        <nav id="menu-header-submenu" class="collapse menu-header-submenu">
          <ol>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-body menu-link-body">
                  French riviera
                </div>
              </a>
            </li>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-body menu-link-body">
                  New York
                </div>
              </a>
            </li>
          </ol>
        </nav>
      </header>
      <div class="menu-body flex-1">
        <ol>
          <li role="presentation" class="active">
            <a href="#" class="menu-link">
              <div class="menu-body menu-link-body">
                General
              </div>
            </a>
          </li>
          <li role="presentation">
            <a href="#" class="menu-link">
              <div class="menu-body menu-link-body">
                Payments
              </div>
            </a>
          </li>
          <li role="presentation">
            <a href="#" class="menu-link">
              <div class="menu-body menu-link-body">
                Apps
              </div>
            </a>
          </li>
        </ol>
      </div>
      <footer class="menu-footer">
        <ol>
          <li role="separator" class="divider"></li>
          <li role="presentation">
            <a href="#menu-footer-submenu"
               data-toggle="collapse"
               role="button"
               aria-expanded="false"
               aria-controls="menu-footer-submenu"
               class="collapsed menu-link">
              <div class="menu-body menu-link-body">
                Settings
              </div>
              <div class="menu-caret">
                <span class="caret"></span>
              </div>
            </a>
          </li>
        </ol>
        <nav id="menu-footer-submenu" class="collapse menu-footer-submenu">
          <ol>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-body menu-link-body">
                  Help Center
                </div>
              </a>
            </li>
            <li role="presentation">
              <a href="#" class="menu-link">
                <div class="menu-body menu-link-body">
                  Videos
                </div>
              </a>
            </li>
          </ol>
        </nav>
      </footer>
    </nav>