Dropdown

A menu that opens from a trigger and holds a list of choices or actions.

Refined portWildDropdown.vueDropdowns/DropdownWDropdown, WDropdownMenu

Try it

Pick an item, then reopen the menu from the keyboard and use the arrow keys.

Content

Align

Min width

Choice descriptions

Disabled item

<WildDropdown v-model:open="open" :min-width="240">
  <template #trigger="{ toggle }">
    <WildButton variant="borders" size="sm" icon="chevron-down" @click="toggle">{{ range }}</WildButton>
  </template>
  <WildDropdownItem label="Last 7 days" :selected="range === 'Last 7 days'" @click="range = 'Last 7 days'" />
  <WildDropdownItem label="Last 30 days" :selected="range === 'Last 30 days'" @click="range = 'Last 30 days'" />
  <WildDropdownItem label="Last 90 days" :selected="range === 'Last 90 days'" @click="range = 'Last 90 days'" />
  <WildDropdownItem label="This month" :selected="range === 'This month'" @click="range = 'This month'" />
</WildDropdown>

When to use

Use it to switch a view between a few options, such as a time range.
Use it to group actions on a page or a record behind one labelled button.

Don’t use it

To choose a value in a form. Use Select.
For a filter in a filter bar. Use Dropdown pill.
For row actions in a table. Use Icon menu.
For two or three options always on show. Use Segmented.

States

A chosen item is filled blue with a tick. Destructive items are red, and disabled items turn grey but keep their place.

Last 7 days

Last 30 days

Last 90 days

This month

choices

Edit site

Download

Delete site

actions

<WildDropdownItem label="Last 30 days" selected />
<WildDropdownItem label="This month" disabled />
<WildDropdownItem label="Delete site" icon="trash" variant="destructive" />

Content

Start actions with a verb, and name the object: Edit site, Delete site.
Keep labels to one line. Put a consequence in the description.
Put a destructive action last, and confirm it with a confirm dialog.
Disable an item instead of hiding it, so the list doesn’t shift between openings.

Accessibility

The trigger announces a menu and whether it’s open. Choices are read as radio items with their checked state.

Key	What it does
Enter / Space	On the trigger, opens on the chosen item. In the menu, picks and closes.
Down / Up	On the trigger, opens on the first or last item. In the menu, moves and wraps.
Home / End	Moves to the first or last item.
A letter	Moves to the next item starting with it.
Escape	Closes and returns focus to the trigger.
Tab	Closes the menu and moves on.

Props

Prop	Type	Default	Description
open	boolean	false	Open state, bound with v-model:open.
align	'start' \| 'end'	'start'	Trigger edge the menu aligns to.
placement	'bottom' \| 'top'	'bottom'	Preferred side; flips when there isn’t room.
minWidth	number	200	Narrowest width in px; grows to fit.
maxHeight	number	400	Height in px past which it scrolls.
matchTriggerWidth	boolean	false	Sets the menu to the trigger’s width.
fullWidth	boolean	false	Container spans its parent.
closeOnClickOutside	boolean	true	Closes on a press outside.
closeOnEscape	boolean	true	Closes on Escape.
closeOnScroll	boolean	true	Closes when the page scrolls.
repositionOnScroll	boolean	false	With closeOnScroll off, follows the trigger instead of closing.
#trigger	slot { open, toggle }	—	The button that opens the menu.
Item label	string	—	The item’s text.
Item value	string \| number	—	Sent with @click.
Item selected	boolean	false	Fills the chosen item and adds a tick.
Item showCheckmark	boolean	true	Shows the selected item’s tick.
Item disabled	boolean	false	Greys the item out and blocks it; arrow keys skip it.
Item icon	string	—	Icon name, shown before the label.
Item variant	'default' \| 'destructive'	'default'	Destructive turns the item red.
Item description	string	—	A second line under the label.
Item @click	(value) => void	—	Fires with value when picked.

Tokens

Token	Value	Where it lands
--global-neutral-grey-500	#E6E6E6	Menu border.
--shadow-dropdown	0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04)	Menu elevation.
--radius-lg	8px	Menu corners.
--global-cool-grey-1200	#24262B	Item label.
--global-cool-grey-900	#595E6A	Item icon and description.
--global-neutral-grey-300	#F1F1F1	Item hover.
--global-blue-1000	#1877F2	Chosen item fill and focus ring.
--global-blue-1100	#0C296A	Chosen item fill on hover.
--color-white	#FFFFFF	Chosen item label and tick.
--global-red-900	#BC1C1C	Destructive label.
--global-red-100	#FEEBEB	Destructive item hover.
--global-neutral-grey-200	#F5F5F5	Chosen item fill when disabled.
--global-neutral-grey-800	#ADACB0	Disabled label, icon and tick.