in development

Dropdown

Description

The dropdown component provides a trigger button that reveals a list of actionable options or choices when activated. Unlike a <select> element, which is designed for form input, a dropdown is an interactive menu pattern that triggers actions, navigation, or displays contextual options.

A collapsed dropdown appears as a button with a chevron icon indicating expandable content. The dropdown button follows the standard button styling (primary, secondary, or subtle, while primary is very unlikely) and includes a visual indicator (typically a downward chevron) to signal its interactive nature.

Dropdowns should not be used as form selects or for single-value data input. Use them when:

• Multiple related actions need to be grouped under one trigger
• Space is limited and secondary actions need to be consolidated
• Contextual options depend on user interaction or state
• The selected option is reflected elsewhere in the interface (e.g., filter selections shown in a filter bar)

Typical Use Cases

• Action menus: Grouping related actions like “Export as PDF”, “Print”, “Share”
• Context menus: Right-click or more-actions menus
• Filter controls: Where selected options are displayed separately from the dropdown itself
• Navigation menus: Secondary or utility navigation
• Settings or preferences: Quick access to configuration options

Design Characteristics

• Trigger: Styled as a button (primary, secondary, or subtle) with a chevron icon
• Chevron direction: Points down when closed, up when open
• Panel positioning: Below the trigger by default; adapts based on viewport space
• Item structure: Clear, concise labels; optional icons for visual clarity
• Dividers: Optional horizontal rules to group related items
• Hover/focus states: Clear visual feedback on interactive items
• Keyboard navigation: Arrow keys navigate items, Enter/Space activates
• Close behavior: Clicking outside, pressing Escape, or selecting an item closes the menu

Usage

HTML Structure

The dropdown must use semantic HTML and ARIA patterns for accessibility. Use a <button> for the trigger and a list structure for the menu items. Use <button> elements for actions and <a> elements for navigation links within menu items.

JavaScript Behavior

The dropdown requires JavaScript to manage state and interactions:

• Toggle state: Clicking the trigger toggles aria-expanded between true and false and shows/hides the menu
• Chevron rotation: Rotate the chevron icon when expanded
• Focus management: Focus moves to the first menu item when opened via keyboard
• Keyboard navigation:
  • Arrow Down: Move focus to next item
  • Arrow Up: Move focus to previous item
  • Enter or Space: Activate focused item
  • Escape: Close dropdown and return focus to trigger
  • Tab: Close dropdown and move focus to next focusable element
• Click outside: Close dropdown when user clicks outside the component
• Item selection: Selecting an item executes its action and closes the dropdown

Accessibility

The Dropdown component must conform to WCAG 2.1 AA and the Barrierefreiheitsstärkungsgesetz (2025):

• Trigger button: Must be a semantic <button> element with clear labeling
• ARIA attributes:
  • aria-expanded: Indicates whether the menu is open (true) or closed (false)
  • aria-haspopup="true": Signals that the button controls a menu
  • role="menu" on the menu container
  • role="menuitem" on each actionable item
  • role="none" on list items to remove default list semantics
  • role="separator" for divider elements
  • aria-labelledby: Links the menu to its trigger for context
• Keyboard operability: Full keyboard navigation with arrow keys, Enter, Space, and Escape
• Focus management: Visible focus indicators on trigger and menu items; logical focus order
• Screen reader support: Ensure state changes (aria-expanded) are announced; menu items are identified correctly
• Close on blur: Menu closes when focus leaves the component
• Hidden state: Use hidden attribute or display: none to properly hide the menu from assistive technologies when closed

Testing: Validate with Lighthouse, NVDA/JAWS (Windows), and VoiceOver (macOS/iOS). Ensure all interactions work without a mouse.

Integration

• Position dropdowns near their associated content or controls
• Ensure adequate spacing around the trigger to prevent accidental activation
• For filter dropdowns, display selected values in a separate filter bar or tag list
• Avoid nesting dropdowns within dropdowns
• Consider viewport constraints: reposition menu if it would overflow the viewport

Animation

Chevron rotates between up and down at 80ms; the menu fades in (160ms ease-out) and out (120ms ease-in). No stagger, slide, or scale. Everything is instant for prefers-reduced-motion.

Example

Coming soon™

Resources

• Dropdown in Figma
• Dropdown in Storybook