Dropdown Component

The Dropdown component creates interactive menus that expand and collapse with smooth animations. It’s perfect for navigation menus, settings panels, and any interface that needs to show and hide content on demand.

Key Features

• Smooth Animations: Polished expand/collapse transitions

• Flexible Content: Supports both simple lists and custom content

• Click Outside: Optional automatic closing when clicking outside

• Keyboard Support: Full keyboard navigation and accessibility

• Customizable: Multiple styling and behavior options

Basic Usage

Create a simple dropdown menu with a list of items:

1
<Dropdown
2
    items={[
3
        { label: "Docs", href: "/docs/" },
4
        { label: "Blog", href: "/blog/" },
5
        { label: "Home", href: "/" }
6
    ]}
7
>
8
    Menu
9
</Dropdown>

Selection State

The dropdown maintains selection state and supports pre-selected values and disabled options.

1
<Dropdown
2
    items={[
3
        { label: 'Default Option', value: '1', active: true },
4
        { label: 'Disabled Option', value: '2', disabled: true },
5
        { label: 'Regular Option', value: '3' },
6
    ]}
7
>
8
    With States
9
</Dropdown>

Overlay

The dropdown can be displayed as an overlay or menu inline with the trigger button.

1
<Dropdown overlay={false} class="mb-8" items={[{ label: 'Profile' }, { label: 'Settings' }, { label: 'Logout' }]}>
2
  Menu
3
</Dropdown>

Custom Event Listeners

The component emits custom events for selection changes:

Waiting for events to be emitted… (Click on the menu to see the events)

1
// Listen for selection changes
2
document.querySelector('dropdown-wrapper')
3
    .addEventListener(DropdownEventNames.Selected, (event) => {
4
        const { dropdownId, active } = event.detail;
5
        // Handle selection change
6
    });

Dropdown Props API

1
interface Item {
2
    label?: string;
3
    href?: string;
4
    id?: string;
5
    disabled?: boolean;
6
    active?: boolean;
7
}

Accessibility Features

Keyboard Navigation

• Enter/Space to toggle
• Tab for focus management
• Escape to close

ARIA Attributes

• aria-expanded state
• aria-controls relationships
• Proper focus management

Common Applications