Dropdown
Customizable popover menu.
import { component$, useStyles$ } from '@builder.io/qwik';
import { Dropdown } from '@qwik-ui/headless';
import { LuCheck } from '@qwikest/icons/lucide';
export default component$(() => {
useStyles$(styles);
const actions = [
{ label: 'Commit ⌘+K', disabled: false },
{ label: 'Push ⇧+⌘+K', disabled: false },
{ label: 'Update Project ⌘+T', disabled: true },
];
const checkboxItems = ['Show Git Log', 'Show History'];
const radioItems = ['main', 'develop'];
return (
<Dropdown.Root>
<Dropdown.Trigger class="dropdown-trigger">Git Settings</Dropdown.Trigger>
<Dropdown.Popover class="dropdown-popover" gutter={8}>
<Dropdown.Group class="dropdown-group">
<Dropdown.GroupLabel class="dropdown-group-label">Actions</Dropdown.GroupLabel>
{actions.map((action) => (
<Dropdown.Item
key={action.label}
class="dropdown-item"
disabled={action.disabled}
>
{action.label}
</Dropdown.Item>
))}
</Dropdown.Group>
<Dropdown.Separator />
{checkboxItems.map((item) => {
return (
<Dropdown.CheckboxItem key={item} class="dropdown-item">
<Dropdown.ItemIndicator>
<LuCheck />
</Dropdown.ItemIndicator>
{item}
</Dropdown.CheckboxItem>
);
})}
<Dropdown.Separator />
<Dropdown.RadioGroup class="dropdown-group" value="main">
{radioItems.map((item) => {
return (
<Dropdown.RadioItem key={item} class="dropdown-item" value={item}>
<Dropdown.ItemIndicator>
<LuCheck />
</Dropdown.ItemIndicator>
{item}
</Dropdown.RadioItem>
);
})}
</Dropdown.RadioGroup>
</Dropdown.Popover>
</Dropdown.Root>
);
});
// internal
import styles from '../snippets/dropdown.css?inline';
Anatomy
| Component | Description |
Dropdown.Root | Defines the component boundary and exposes its internal logic. Must wrap over all other parts. |
Dropdown.Trigger | Toggles the visibility of the dropdown menu. Should wrap around the button element. |
Dropdown.Popover | Container for the dropdown menu, responsible for positioning and visibility. |
Dropdown.Arrow | Optional arrow pointing from the trigger to the dropdown menu. |
Dropdown.Content | Contains the dropdown options and other interactive elements. |
Dropdown.Group | Groups multiple dropdown items under a common label. |
Dropdown.GroupLabel | Label for a group of dropdown items. |
Dropdown.Separator | Visual separator between different sections or groups of dropdown items. |
Dropdown.CheckboxItem | Dropdown item that includes a checkbox for multi-select options. |
Dropdown.ItemIndicator | Indicator that shows the selected state of an item. |
Dropdown.RadioGroup | Groups radio items, allowing only one to be selected at a time. |
Dropdown.RadioItem | Dropdown item that includes a radio button for single-select options within a radio group. |
API
Dropdown.Root
| Component | Description |
bind:open | Two-way data bind of the open state of the dropdown to a user-defined signal. |
onOpenChange$ | Callback function that is triggered when the open state of the dropdown changes. |
import { component$ } from '@builder.io/qwik';
import { Dropdown } from '@qwik-ui/headless';
export default component$(() => {
const actions = [
{ label: 'Merge Branch ⌘+M', disabled: false },
{ label: 'Rebase Branch ⌘+R', disabled: true },
{ label: 'Stash Changes ⌘+S', disabled: false },
{ label: 'Checkout Branch ⌘+B', disabled: false },
{ label: 'Pull Changes ⌘+P', disabled: false },
{ label: 'Create Tag ⌘+T', disabled: false },
];
return (
<Dropdown.Root>
<Dropdown.Trigger>Git Settings</Dropdown.Trigger>
<Dropdown.Popover gutter={8}>
{actions.map((action) => (
<Dropdown.Item key={action.label} disabled={action.disabled}>
{action.label}
</Dropdown.Item>
))}
</Dropdown.Popover>
</Dropdown.Root>
);
});