General
Dropdown Menu
Dropdown menu component with custom trigger, selectable items, and active selection indicator.
Overview
Acts like a native select element but uses the custom dropdown component for enhanced styling. Opens via the Sort button on filter bar. Only one option can be selected at a time with immediate product order update. Similar to Nuxt UI select component pattern. Uses LuiDropdownMenu internally.
Key Business & UX Benefits
- Matches brand and layout with a custom-styled dropdown instead of native select.
- Makes the current sort choice obvious with a clear active indicator.
- Updates results immediately so users see the effect of their choice.
- Supports keyboard use and accessibility with standard patterns.
Pro-Tip from Larry: Pair the dropdown with a visible label so users know they're changing sort order.
Usage
DropdownMenu
Feature List
- Single selection with visual active indicator
- v-model support for two-way binding
- Dropdown menu with customizable option list
- Keyboard navigation with arrow keys and Enter
API Reference
DropdownMenu
| Prop | Default | Type |
|---|---|---|
width | string | |
maxHeight | string | |
position | "left" | "right" | "top" | "bottom" | |
disabled | boolean |
| Slot | Type |
|---|---|
default | any |
trigger | any |
content | any |
DropdownMenuHeadline
| Slot | Type |
|---|---|
default | any |
DropdownMenuCheckboxItem
| 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 |
DropdownMenuIconItem
| Prop | Default | Type |
|---|---|---|
icon | en | string |
description | string |
| Slot | Type |
|---|---|
default | any |
DropdownMenuRadioGroup
| Prop | Default | Type |
|---|---|---|
value | string |
| Slot | Type |
|---|---|
default | any |
| Event | Type |
|---|---|
update:value | (event: "update:value", value: string | undefined): void |
DropdownMenuRadioItem
| Prop | Default | Type |
|---|---|---|
valuerequired | string | |
disabled | false | boolean |
selectedIcon | misc/circle-filled | string |
| Slot | Type |
|---|---|
default | any |
description | any |
DropdownMenuSeparator
DropdownMenuTextItem
| Prop | Default | Type |
|---|---|---|
disabled | false | boolean |
| Slot | Type |
|---|---|
default | any |
description | any |
content | any |