Dropdown ​

Dropdowns are toggleable, contextual overlays for displaying lists of links, actions, or content. They provide a way to display additional options without cluttering the interface.

When to Use ​

• For action menus with multiple related options
• To save space by hiding secondary actions until needed
• For filter or sort controls in data tables
• For user profile or settings menus in navigation

When Not to Use / Alternatives ​

• For form selections (use Select component instead)
• When all options should be visible (use Button Group or Tabs)
• For primary navigation (use Navbar with Nav component)

Component Anatomy ​

• Toggle Button: Triggers the dropdown menu
• Dropdown Menu: Container for dropdown items
• Dropdown Items: Individual actionable items with optional icons
• Dividers (optional): Visual separators between item groups

Basic Usage ​

With Icons ​

Enhance dropdown items with Bootstrap Icons for better scannability.

Variants ​

Use different button variants to match your interface style.

Sizes ​

Dropdowns come in three sizes to match your interface needs.

Split Button ​

Split button dropdowns allow a default action with additional options. Use the end prop to align the dropdown menu to the right.

Direction Variations ​

Control the direction the dropdown menu opens.

Best Practices ​

• Use clear, action-oriented labels for dropdown items
• Group related actions together using dividers
• Keep dropdown menus concise (5-10 items maximum recommended)
• Use icons to improve scannability and visual hierarchy
• Ensure sufficient color contrast in all theme modes
• Provide keyboard navigation support for accessibility
• Consider using split buttons when there's a primary action

Props ​

Events ​

Exposed Methods ​

Slots ​

Accessibility ​

• Dropdown trigger has aria-expanded state
• aria-haspopup indicates popup behavior
• Keyboard: Tab to focus, Enter/Space to open, Arrow keys to navigate options, Escape to close
• Options are focusable with proper role attributes