Dropdown menus
Dropdown component statesBasic 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 optionsDefault header
Basic header styling of label sections
Header with underline
Basic header styling of label sections
Uppercase headers
Basic header styling of label sections
Highlighted header
Highlight header using .dropdown-header-highlight class
Heading elements
Basic header styling of label sections
Menu header icons
Display left/right positioned icons
Dropdown submenu
Multilevel submenu with optionsAdditional sizes
Dropdown sizes with elementsLarge menu size
Using .dropdown-menu-lg class
Small menu size
Using .dropdown-menu-sm class
Mini menu size
Using .dropdown-menu-xs class
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 badges
Dropdown menu items with badges
Dropdown with pill badges
Dropdown menu items with pill 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 colorsSolid 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 customizationsMenu without border
Hide border using .border-0 class
Border color
Using .border-* class
Stronger border
Using .border-2 class