Dropdown - Bellhop Design System

Examples

Interactive examples showing different dropdown configurations and menu options.

Basic Dropdown

A simple dropdown menu with text-only menu items.

chevron_right Web Component

<bh-dropdown
	label="Options"
	variant="outlined"
	size="md"
	state="focus"
	show-icons="true"
	menu-items='[ {"id":"1","label":"Edit","icon":"edit"}, {"id":"2","label":"Duplicate","icon":"content_copy"}, {"id":"3","label":"Archive","icon":"archive"}, {"id":"div1","divider":true}, {"id":"4","label":"Delete","icon":"delete"}]'
></bh-dropdown>

chevron_right React

<BhDropdown
	label="Options"
	variant="outlined"
	size="md"
	state="focus"
	showIcons="showIcons"
	menuItems='[ {"id":"1","label":"Edit","icon":"edit"}, {"id":"2","label":"Duplicate","icon":"content_copy"}, {"id":"3","label":"Archive","icon":"archive"}, {"id":"div1","divider":true}, {"id":"4","label":"Delete","icon":"delete"}]'
></BhDropdown>

Dropdown with Icons

Menu items with leading icons to provide visual context for each action.

chevron_right Web Component

<bh-ropdown
	label="Options"
	variant="outlined"
	size="md"
	state="focus"
	show-icons="showIcons"
	menu-items='[ {"id":"1","label":"Edit","icon":"edit"}, {"id":"2","label":"Duplicate","icon":"content_copy"}, {"id":"3","label":"Archive","icon":"archive"}, {"id":"div1","divider":true}, {"id":"4","label":"Delete","icon":"delete"}]'
></bh-dropdown>

chevron_right React

<BhDropdown
	label="Options"
	variant="outlined"
	size="md"
	state="focus"
	showIcons="showIcons"
	menuItems='[ {"id":"1","label":"Edit","icon":"edit"}, {"id":"2","label":"Duplicate","icon":"content_copy"}, {"id":"3","label":"Archive","icon":"archive"}, {"id":"div1","divider":true}, {"id":"4","label":"Delete","icon":"delete"}]'
></BhDropdown>

When to use

Use dropdowns to present a list of actions or options without taking up permanent screen space.

Action Menus

Group related actions like Edit, Delete, Share, and Export under a single trigger button.

User Account Menus

Display user profile options, settings, and sign-out actions in navigation bars.

Contextual Options

Show relevant options based on the current context, like table row actions or card menus.

Navigation

Organize navigation links in a compact menu for secondary or overflow navigation items.

When not to use

For selecting a single option from a list in forms—use a select element or radio buttons instead
When all options need to be constantly visible—display them inline or use tabs
For primary navigation that should always be accessible—use a navigation bar or sidebar
When there's only one or two actions—use individual buttons for clarity

Anatomy

Dropdowns consist of a trigger button and a floating menu containing selectable options.

Trigger Button
Clickable element that opens and closes the dropdown menu
Menu Container
Floating panel that appears below or above the trigger when opened
Menu Items
List of clickable options with optional icons and descriptions
Dividers (Optional)
Visual separators grouping related menu items
Chevron Icon
Down arrow indicating the presence of hidden options

Types

Dropdowns come in various button styles and sizes to match different UI contexts.

Default

Standard dropdown with outlined button style and text label.

Ghost

Minimal style without background or border for subtle action menus.

Icon Only Outlined

Compact outlined button showing only an icon, typically three vertical dots.

Icon Only Ghost

Minimal icon-only variant for inline actions and tight spaces.

Avatar

User menu triggered by an avatar image, common for account navigation.

Disabled

Non-interactive state showing the dropdown is unavailable.

Interaction

Dropdowns open on click and close when an option is selected or user clicks outside.

Opening

Click the trigger button to display the menu with a smooth animation.

Selection

Click a menu item to trigger its action and automatically close the dropdown.

Dismissal

Close the menu by clicking outside, pressing Escape, or selecting an option.

Keyboard Navigation

Navigate menu items with arrow keys and select with Enter or Space.

Placement

Dropdowns can be positioned throughout the interface wherever actions need to be accessed.

Navigation Bars

Place user account menus or navigation overflow menus in headers and navigation areas.

Table Rows

Add action menus to table rows for Edit, Delete, and other row-specific actions.

Cards

Include contextual menus in card headers for card-specific actions and options.

Toolbars

Group related toolbar actions under dropdown menus to save space.

Accessibility

Dropdowns follow WAI-ARIA menu button pattern for full keyboard accessibility.

Keyboard Support

Enter/Space: Open dropdown or select focused menu item
Arrow Down: Open dropdown or move focus to next item
Arrow Up: Move focus to previous menu item
Home/End: Jump to first or last menu item
Escape: Close dropdown and return focus to trigger
Tab: Close dropdown and move focus to next element

ARIA Attributes

aria-haspopup="menu": Indicates trigger button opens a menu
aria-expanded: Communicates whether menu is open or closed
role="menu": Identifies the dropdown menu container
role="menuitem": Marks each selectable menu option
aria-disabled: Indicates disabled menu items

Focus Management

Focus moves to first menu item when dropdown opens
Focus returns to trigger button when menu closes
Arrow keys move focus through menu items
Clear focus indicators on all interactive elements

Screen Reader Support

Trigger button state announced (expanded/collapsed)
Menu items are announced with their labels
Disabled items announced as unavailable
Menu role and item count communicated to users

Related Components

Components that provide similar or complementary functionality.

Component	Usage
Button	The trigger element commonly used to open dropdown menus.
Popover	Similar overlay pattern but for richer content beyond simple lists.
Modal	Use for more complex interactions that require full user attention.
Select	Use for form inputs where users choose from predefined options.

Resources

Design and development resources for the Dropdown component.

Figma

Available

View in Figma →

Web Components/Angular

Available

View in Storybook →

React

Available

View in Storybook →