• Welcome to Blaszok the most advanced shopping theme ever crated. We are sure it will fit all your needs. Remember if you have any suggestions or ideas for future updates please share them.

  • Useful Links

    Donec placerat adipiscing sapien id consequat. Donec nec auctor nisl. Curabitur hendrerit ultricies ligula ac blandit.

    • FAQ
    • Size Guide
    • Pressroom
    • Privacy Policy
    • Career
    • Shipping
  • Customer Service

    +48 800 801 802

    Free helpline.
    For stationary and mobile phones.

    Contact Form
Home / Styles / Button Dropdown Menus

Button Dropdown Menus

Overview and examples

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

  1. class="btn-group">
  2. class="btn dropdown-toggle"data-toggle="dropdown"href="#">
  3. Action
  4. class="caret">
  5. class="dropdown-menu">

Works with all button sizes

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

Requires JavaScript

Button dropdowns require the Bootstrap dropdown plugin to function.

In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.


Split button dropdowns

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

  1. class="btn-group">
  2. class="btn">Action
  3. class="btn dropdown-toggle"data-toggle="dropdown">
  4. class="caret">
  5. class="dropdown-menu">

Sizes

Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.

  1. class="btn-group">
  2. class="btn btn-mini">Action
  3. class="btn btn-mini dropdown-toggle"data-toggle="dropdown">
  4. class="caret">
  5. class="dropdown-menu">

Dropup menus

Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.

  1. class="btn-group dropup">
  2. class="btn">Dropup
  3. class="btn dropdown-toggle"data-toggle="dropdown">
  4. class="caret">
  5. class="dropdown-menu">