This component implements the Material Design 3 dropdown menu with proper accessibility support. It supports various trigger styles, item layouts, and interactive features like checkboxes and groups.
Qwik M3 Dropdown
Prop Controls
Basic Dropdowns
Button Trigger
Profile
Settings
Sign out
Custom Trigger
Option 1
Option 2
Option 3
Advanced Dropdowns
With Groups and Checkboxes
Display
Show Toolbar
Show Sidebar
Zoom
Zoom In
Zoom Out
Reset Zoom
Dense Items
Name
Date
Size
Ascending
<Dropdown.Root>
<Dropdown.Trigger variant="button" label="Open Menu" trailingIcon={<ArrowDropDownIcon />} />
<Dropdown.Popover>
<Dropdown.Item>Item 1</Dropdown.Item>
<Dropdown.Item>Item 2</Dropdown.Item>
<Dropdown.Separator />
<Dropdown.Group>
<Dropdown.GroupLabel>Group Label</Dropdown.GroupLabel>
<Dropdown.CheckboxItem>Checkbox Item</Dropdown.CheckboxItem>
</Dropdown.Group>
</Dropdown.Popover>
</Dropdown.Root>