Dropdown menus Dropdown component states
Basic dropdown

Default dropdown menu styling

Disabled items

Disable the link with .disabled class

Active menu item

Make the link active with .active class

Dropdown headers Dropdown header with options
Default header

Basic header styling of label sections

Highlighted header

Highlight header using .highlight class

Menu header icons

Display left/right positioned icons

Dropdown submenu Multilevel submenu with options
Additional sizes Dropdown sizes with elements
Dropdown components Icons, checkboxes, radios, switches etc.
Left menu item icons

Dropdown icons in left position

Right menu item icons

Dropdown icons in right position

Icons and text combo

Combine text and icons for annotations

Dropdown with labels

Dropdown menu items with labels

Dropdown with badges

Dropdown menu items with badges

Left positioned

Additional left side placement

Menu with checkboxes

Left and right positioned checkboxes

Menu with radios

Left and right positioned radios

Menu with switches

Left and right positioned switches

Custom menu colors Custom background and state colors
Solid dropdown menu

Example of a solid dropdown menu

Disabled menu items

Disable menu items with disabled class

Active menu item

Set active menu item with active class

Menu item icons

Left and right positioned icons

Checkboxes and radios

Checkboxes and radios in solid menus

Labels and switches

Labels, badges and switch toggles

Border options Optional border customizations
Without shadow

Hide shadow using .no-shadow class

Optional border

Using .border-* class

Stronger border

Using .border-lg class