1. UBold
  2. UI
  3. Dropdowns

Dropdowns

Examples

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Single button dropdowns

Any single .btn can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either <button> elements:

Action Another action Something else here
Action Another action Something else here

Variant

The best part is you can do this with any button variant, too:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Dropright variation

Trigger dropdown menus at the right of the elements by adding .dropright to the parent element.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Dropup variation

Trigger dropdown menus above elements by adding .dropup to the parent element.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Split button dropdowns

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Dropleft variation

Trigger dropdown menus at the right of the elements by adding .dropleft to the parent element.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Menu alignment

Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

Action Another action Something else here
Settings
user-img
Geneva Kennedy

Admin Head

Basic Settings
Messages 25

Tomaslau

I've finished it! See you so...

Stillnotdavid

This theme is awesome!

Kurafire

Nice to meet you

Shahedk

Hey! there I'm available...

Adhamdannaway

This theme is awesome!