General
Dropdown Menu
Dropdown menu component with custom trigger, selectable items, and active selection indicator.
Overview
DropdownMenu is a custom-styled menu surface for sort, filter, and contextual-action UIs. It opens from a configurable trigger and supports text items, checkbox items, icon items, radio groups, and separators.
Set position ('left' / 'right' / 'top' / 'bottom') to anchor the menu against the trigger. On viewports below the sm breakpoint, position auto-switches to 'bottom' so the menu doesn't get cut off on phones. width and maxHeight control the panel size and overflow scroll.
Pair the dropdown with a visible label (e.g. "Sort by") so users understand what the menu controls.
Key Business & UX Benefits
- One menu handles sort, filter, account actions, and contextual menus, so the storefront only ships one tested surface for every dropdown interaction.
- Auto-switch to bottom placement on mobile prevents the off-screen menu bug that drops mobile-tablet conversion on listing pages.
- Checkbox, radio, icon, and text item types make complex sort and filter UIs declarative, with keyboard and screen-reader support handled by the primitive.
- Type-safe item composition lets product teams add new sort options in minutes without re-implementing the menu shell.
Pro-Tip from Larry: Pair the dropdown with a visible label so users know they're changing sort order.
Usage
LDropdownMenu
Feature List
- Four positions ('left', 'right', 'top', 'bottom') anchor the panel against the trigger
- Below the `sm` breakpoint position auto-switches to `'bottom'` so the panel never clips off-screen on phones
- `width` and `maxHeight` control panel size and overflow scroll for long sort or filter lists
- Six item subcomponents (Headline, TextItem, CheckboxItem, IconItem, RadioGroup, RadioItem, Separator) cover text, multi-select, single-select, and grouped menus
- Configurable trigger slot adapts the same menu to sort buttons, icon buttons, and user-account chrome
- Keyboard navigation and screen-reader semantics ship with the primitive, no per-use wiring
API Reference
LDropdownMenu
| Prop | Default | Type |
|---|---|---|
width | string | |
maxHeight | string | |
position | "left" | "right" | "top" | "bottom" | |
disabled | boolean | |
open | boolean |
| Slot | Type |
|---|---|
default | any |
content | any |
| Event | Type |
|---|---|
update:open | (event: "update:open", value: boolean): void |
LDropdownMenuHeadline
| Slot | Type |
|---|---|
default | any |
LDropdownMenuCheckboxItem
| Prop | Default | Type |
|---|---|---|
disabled | false | boolean |
checked | false | boolean |
| Slot | Type |
|---|---|
default | any |
description | any |
| Event | Type |
|---|---|
update:checked | (event: "update:checked", value: boolean): void |
LDropdownMenuIconItem
| Prop | Default | Type |
|---|---|---|
icon | en | string |
description | string |
| Slot | Type |
|---|---|
default | any |
LDropdownMenuRadioGroup
| Prop | Default | Type |
|---|---|---|
value | string |
| Slot | Type |
|---|---|
default | any |
| Event | Type |
|---|---|
update:value | (event: "update:value", value: string | undefined): void |
LDropdownMenuRadioItem
| Prop | Default | Type |
|---|---|---|
valuerequired | string | |
disabled | false | boolean |
selectedIcon | misc/circle-filled | string |
| Slot | Type |
|---|---|
default | any |
description | any |
LDropdownMenuSeparator
LDropdownMenuTextItem
| Prop | Default | Type |
|---|---|---|
disabled | false | boolean |
| Slot | Type |
|---|---|
default | any |
description | any |
content | any |