Bootstrap Dropmenu, dropdown menu on steroids

Dropmenu is a set of extensions, which enhances Bootstrap dropdown component, your fellow companion when creating a web application. These extensions add more structure and usability features.

Dropmenu Structure

Basic Bootstrap dropdown allows you tu use only one .dropdown-menu class applied to an unordered list. Dropmenu adds .dropdown-container, which serves as a wrapper for more elements. You can use toolbar (.dropdown-toolbar),footer (.dropdown-footer) and even more ul.dropdown-menu elements. Basically, all you’ve ever needed.

<div class="btn-group dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <i class="glyphicon glyphicon-user"></i>
    <span class="caret"></span>
  </button>

  <div class="dropdown-container">

    <div class="dropdown-toolbar">
      Signed in as<br>
      <strong>Martin Staněk</strong>
    </div><!-- /dropdown-toolbar -->

    <ul class="dropdown-menu">
      <li><a href="#">Your profile</a></li>
      <li><a href="#">Your stars</a></li>
      <li><a href="#">Explore</a></li>
      <li><a href="#">Integrations</a></li>
      <li><a href="#">Help</a></li>
      <li><a href="#">Log out</a></li>
    </ul>

    <div class="dropdown-footer">
      <i class="glyphicon glyphicon-cog"></i> Settings
    </div><!-- /dropdown-footer -->

  </div><!-- /dropdown-container -->
</div><!-- /dropdown -->

Scrolling

Customize height of the menu by setting @dropmenu-max-height variable. If maximum height is set, dropdown menu becomes scrollable. Change the variable to fit your application.

List of states (47)

Truncated Items

Not only height, but also width of the menu can be limited. Set @dropmenu-max-width to desired value and overflowing menu items will be truncated. You can also set @dropmenu-min-width to get rid of very narrow menus.

Keyboard Shortcuts

Keyboard shortcuts can really speed up your daily work with any web application. Libraries like Mousetrap simplify implementation of event handling. Use dropmenu to expose shortcuts in dropdown menus to make them easily remembered.

<div class="btn-group dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    File
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu">
    <li><a href="#" class="dropmenu-item">
      <span class="dropmenu-item-label">New</span>
      <span class="dropmenu-item-content">Ctrl+N</span>
    </a></li>
    <li><a href="#" class="dropmenu-item">
      <span class="dropmenu-item-label">Edit</span>
      <span class="dropmenu-item-content">Ctrl+E</span>
    </a></li>
    <li><a href="#" class="dropmenu-item">
      <span class="dropmenu-item-label">Delete</span>
      <span class="dropmenu-item-content">Ctrl+D</span>
    </a></li>
  </ul>

</div><!-- /dropdown -->

Twitter Bootstrap allows you to change position of the dropdown menu, however,for top left or top right position, you need to add .dropup class, which is not very convenient. Dropmenu provides all uitility classes to force position of your dropdown menu. Just add appropriate class to the dropdown container:

<!-- Top right: Aligns with the top right corner of the button. -->
<div class="dropdown-container dropdown-position-topright"></div>

<!-- Top left: Aligns with the top left corner of the button. -->
<div class="dropdown-container dropdown-position-topleft"></div>

<!-- Bottom left: Aligns with the bottom left corner of the button. -->
<div class="dropdown-container dropdown-position-bottomleft"></div>

<!-- Bottom right: Aligns with the bottom right corner of the button. -->
<div class="dropdown-container dropdown-position-bottomright"></div>

Inversed Theme

In some cases, you may want to use inversed color version of the menu. Dropmenu extends basic Twitter Bootstrap dropdown component with .dropdown-inverse, which changes its appereance. It works exactly the same like inversed navbar. Use it with or without the container element.

Signed in as
Martin Staněk 
<div class="btn-group dropdown dropdown-inverse">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Button title
    <span class="caret"></span>
  </button>

  <div class="dropdown-container">

    <div class="dropdown-toolbar">
      <!-- Put desired header information here -->
    </div><!-- /dropdown-toolbar -->

    <ul class="dropdown-menu">
      <li><a href="#">List item 1</a></li>
      <li><a href="#">List item 2</a></li>
      <li><a href="#">List Item 2</a></li>
    </ul>

    <div class="dropdown-footer">
      <!-- Put links or just simple text information here -->
    </div><!-- /dropdown-footer -->

  </div><!-- /dropdown-container -->
</div><!-- /dropdown -->

Dropmenu Overview

Module: Dropmenu Structure

This table gives you a quick overview of elements and variables.

Name Class Usage
Container .dropdown-container Abstracted wrapper for dropdown menu.
Toolbar .dropdown-toolbar Fixed header can hold text, specific actions, filters and even a search field.
Menu .dropdown-menu

Dropmenu adds more variables to play with. You can limit dimensions, make it scrollable or truncate text in list items.

Variables:
  • @dropdown-menu-max-height: 330px;
    Limits height of the menu, so it can be scrollable
  • @dropdown-menu-min-width: 150px;
    Minimal width prevents very narrow dropdowns
  • @dropdown-menu-max-width: 330px;
    Maximal width prevents very wide dropdowns
  • @dropdown-menu-truncate: true
    If true, menu items are truncated when wider than '@dropdown-menu-max-width'
Footer .dropdown-footer Stays fixed to the bottom of the Dropmenu, useful for context information or links.

Module: Dropmenu Item

This table gives you a quick overview of elements and variables.

Name Class Usage
Item .dropdown-item Apply this class to <li> element of the dropdown menu.
Item label .dropdown-item-label Wraps text of the item.
Item content .dropdown-item-content Additional content of the list item, f.e. keyboard shortcuts.

Module: Dropmenu Inverse

This table gives you a quick overview of elements and variables.

Name Class Usage
Inverse modifier (applies to .dropdown) .dropdown-inverse

Inverse color variant of the dropdown menu.

Variables:
  • Dropmenu provides set of variables with namespace @dropdown-inverse- to change the theme of the menu. For more information, see dropdown-variables.less

Module: Dropmenu Positioning

This table gives you a quick overview of positioning utility classes.

Name Class Usage
Position Top Right .dropdown-position-topright Aligns with the top right corner of the trigger button.
Position Top Left .dropdown-position-topleft Aligns with the top left corner of the trigger button.
Position Bottom Left .dropdown-position-bottomleft Aligns with the bottom left corner of the trigger button.
Position Bottom Right .dropdown-position-bottomright Aligns with the bottom right corner of the trigger button.

Dropmenu is part of Skywalk, set of components and extensions for Bootstrap Framework. Skywalk aims to give you quality components and save you a lot of development time.

Created with care by Martin Staněk, Twitter: @koucik, Github: @skywalkapps