Components - Dropdown Menus
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
Basic submenu
Basic multi level menu example
Dropup menu
Change vertical orientation to top
Left orientation
Change horizontal orientation to left
Additional sizes Dropdown sizes with elements
Large 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 labels
Dropdown menu items with labels
Dropdown with badges
Dropdown menu items with badges
Additional placements
Additional left and right placements
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
No border shown
Hide border using .no-border class
Border color
Using .border-* class
Stronger border
Using .border-lg class