Dropdown

An interactive menu component with keyboard navigation and intelligent positioning. Dropdowns provide flexible menu interfaces with full accessibility support, including arrow key navigation, automatic focus management, and click-outside-to-close behavior. Features smart positioning with Floating UI for automatic flipping and repositioning.

Quick Start

The most basic dropdown requires three components: .dropdown, .dropdown_trigger, and .dropdown_menu with .dropdown_item elements.

The dropdown component automatically handles opening/closing, keyboard navigation, and focus management. Click the trigger or use Enter/Space to open, then navigate with arrow keys.

Disabled Items

Dropdown items can be disabled using the disabled=true attribute. Disabled items cannot be focused via keyboard navigation, and do not close the menu when clicked. They remain accessible to screen readers following ARIA accessibility standards.

Disabled items use aria-disabled="true" and data-disabled="true" attributes for accessibility and styling. Use the data-disabled: variant to style disabled items differently, such as reducing opacity or changing text color.

Sections

Organize complex dropdown menus using .dropdown_section, .dropdown_heading, and .dropdown_separator components.

Sections provide semantic grouping with proper ARIA labels, headings label each section, and separators create visual divisions between groups.

Styling

Highlighting Active Items

Use the data-focus data attribute selector to style dropdown items based on their focus state. The data-focus: variant applies when an item has focus (via keyboard navigation or hover), responding to keyboard navigation and hover states.

Items without focus use their default styling, while items with the data-focus attribute get the enhanced styling. This creates a clear visual indication of the currently focused item without requiring separate styles for unfocused states.

You can customize the focused state styling by modifying the data-focus: classes. Common patterns include background color changes, text color variations, and subtle animations to enhance the user experience.

Smart Positioning

Powered by Floating UI, the dropdown intelligently positions itself using the placement and offset attributes. It automatically flips to the opposite side when there's insufficient space and repositions on scroll or resize.

Use placement="top-start", placement="right-start", placement="bottom-end", or other positioning options. The offset attribute controls the distance in pixels from the trigger button. The component automatically repositions when scrolling or resizing to stay visible and accessible.

Match Trigger Width

Use match_trigger_width=true on .dropdown_menu to make the menu at least as wide as its trigger. This is useful for select-style dropdowns where the menu should align with the trigger's edges.

The menu's min-width is set to the trigger's width, so the menu can still grow wider if its content requires it. The width is recalculated automatically on scroll and resize.

Keyboard Interaction

The dropdown component provides full keyboard accessibility with comprehensive navigation support. All interactions follow standard ARIA patterns for menu components. Try typing letters like "a", "b", or "d" when the menu is open to see typeahead search in action.

Key Description
When the menu button is focused:
Enter / Space Opens the menu and focuses the first non-disabled item
↓ Opens the menu and focuses the first non-disabled item
↑ Opens the menu and focuses the last non-disabled item
When the menu is open:
Esc Closes the menu and returns focus to the trigger button
↑ / ↓ Focuses the previous/next non-disabled item (wraps around)
Home / PageUp Focuses the first non-disabled item
End / PageDown Focuses the last non-disabled item
Enter / Space Activates/clicks the currently focused menu item
A-Z / 0-9 Focuses the first item that starts with the typed character. Repeated presses cycle through matching items.