Dropdowns

1.

Dropdown States

Dropdown component states

Dropdown: Default #1.01

Default dropdown menu styling

Dropdown: Disabled #1.02

Disable the link with .disabled class

Dropdown: Active #1.03

Make the link active with .active class

2.

Dropdown Headers

Dropdown header with options

Dropdown: Default Header #2.01

Basic header styling of label sections

Dropdown: Header Left Icon #2.02

Display left/right positioned icons

Dropdown: Header Right Icon #2.03

Display left/right positioned icons

Dropdown: Header Left & Right Icon #2.04

Display left/right positioned icons

3.

Dropdown Options

Icons, checkboxes, radios, switches etc.

Dropdown: Left Icon #3.01

Dropdown icons in left position

Dropdown: Right Icon #3.02

Dropdown icons in right position

Dropdown: Right Badge #3.03

Dropdown menu items with .badge

Dropdown: Right Pills #3.04

Dropdown menu items with .badge

Dropdown: Left Badge #3.05

Dropdown menu items with .badge

Dropdown: Left Pills #3.06

Dropdown menu items with .badge

Dropdown: Right & Left Icons #3.07

Dropdown icons in right position

Dropdown: Left Radios #3.08

Left and right positioned radio

Dropdown: Left Checkboxes #3.09

Left and right positioned checkboxes

Dropdown: Forms #3.10

with Buttons, Inputs and Checkbox.

4.

Dropdown Directions

Icons, checkboxes, radios, switches etc.

Dropdown: Dropup #4.01

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

Dropdown: Dropright #4.02

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

Dropdown: Dropleft #4.03

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

5.

Dropdown Customs

Yamm, Lists, Buttons...

Dropdown: List Group (as Buttons) #5.02

Below example UI composition with: Media, Badge, List Groups, and Links.

Configurator
Nav Color
Nav Style