A trigger that reveals a panel of options — single or multi-select, optionally searchable. Compose it from nana-option children (use nana-menu-label for groups). Flips above the trigger when it would overflow.
Ada Lovelace
Alan Turing
Paula Hawkins
Show code Copy < nana-dropdown label = "Assign to" style = "min-width:16rem" > < nana-option value = "ada" >Ada Lovelace</ nana-option > < nana-option value = "alan" >Alan Turing</ nana-option > < nana-option value = "paula" >Paula Hawkins</ nana-option > </ nana-dropdown >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/dropdown " ;
Add the searchable attribute to filter options as you type.
United States
Canada
Mexico
Show code Copy < nana-dropdown label = "Country" searchable style = "min-width:16rem" > < nana-option value = "us" >United States</ nana-option > < nana-option value = "ca" >Canada</ nana-option > < nana-option value = "mx" >Mexico</ nana-option > </ nana-dropdown >
Set select="multiple" to allow multiple selections.
React
Vue
Svelte
Show code Copy < nana-dropdown label = "Frameworks" select = "multiple" style = "min-width:16rem" > < nana-option value = "react" >React</ nana-option > < nana-option value = "vue" >Vue</ nana-option > < nana-option value = "svelte" >Svelte</ nana-option > </ nana-dropdown >
Use nana-menu-label to group options.
Design
Ada Lovelace
Engineering
Alan Turing
Show code Copy < nana-dropdown label = "Assign to" style = "min-width:16rem" > < nana-menu-label >Design</ nana-menu-label > < nana-option value = "ada" >Ada Lovelace</ nana-option > < nana-menu-label divider >Engineering</ nana-menu-label > < nana-option value = "alan" >Alan Turing</ nana-option > </ nana-dropdown >
< nana-dropdown label = " Assign to " >
< nana-option value = " ada " > Ada Lovelace </ nana-option >
< nana-option value = " alan " > Alan Turing </ nana-option >
Properties Property Attribute Type Default Description disabled— booleanfalseDisable the dropdown label— string'Select'Trigger label / placeholder (default trigger only) open— booleanfalseOpen state searchable— booleanfalseShow a search field that filters the options select— DropdownSelect'single'Single or multiple selection value— string''Selected value(s) — comma-separated for multiple
Events Event Description nana-changeFired on selection (`detail.value` — string or string[])
Slots Slot Description triggerCustom trigger element (falls back to a default button) (default)`nana-option` / `nana-menu-label` children
CSS parts Part Description ::part(panel)The floating options panel
CSS custom properties Property Description --nana-dropdown-max-heightPanel max height before scrolling
Event Type Description nana-changeCustomEventFired on selection (detail.value — string or string[])
Slot Description triggerCustom trigger element (falls back to a default button) (default)nana-option / nana-menu-label children
Variable Default Description --nana-dropdown-max-height— Panel max height before scrolling
Part Description panelThe floating options panel
Keyboard accessible Screen-reader labels Focus-visible states ARIA roles and states WCAG 2.2 AA contrast Explore Dropdown interactively Every state, prop, and edge case — with live controls — in Storybook.
