Skip to main content
The SelectMenu component provides a customizable dropdown menu that can replace native select elements. It supports custom rendering, hover interactions, and flexible positioning.

​
Import

import { SelectMenu, SelectMenuRaw } from '@luminescent/ui-qwik';

​
Usage

<SelectMenu
  id="theme"
  values={[
    { name: 'Light', value: 'light' },
    { name: 'Dark', value: 'dark' },
    { name: 'Auto', value: 'auto' },
  ]}
  value={theme.value}
  onChange$={(e, el) => {
    theme.value = el.value;
  }}
>
  Theme
</SelectMenu>

​
SelectMenu Props

​
id
string
HTML id for the component. Used to generate dropdown button id as {id}-dropdown.
​
values
Array<{ name: JSXChildren, value: string | number }>
Array of options to display in the dropdown menu. Each object has a name (displayed label) and value (form value).
​
value
string | number
The currently selected value.
​
align
'left' | 'right' | 'center'
Alignment of the dropdown panel relative to the button.
​
hover
boolean
When true, the dropdown opens on hover instead of click.
​
noblur
boolean
Disables the backdrop blur effect on the dropdown panel.
​
nocloseonclick
boolean
Prevents the dropdown from closing when clicking outside.
​
customDropdown
boolean
When true, uses the custom dropdown slot instead of displaying the selected value.
​
panelClass
string
default:"lum-bg-lum-input-bg"
Custom class for the dropdown panel background.
​
btnClass
string
default:"lum-bg-transparent"
Custom class for the dropdown option buttons.
​
class
{ [key: string]: boolean }
Object-based class names for conditional styling on the dropdown button.
​
...props
PropsOf<'select'>
All standard HTML select attributes are supported (except class and size).

​
Slots

​
dropdown
slot
Custom content to display in the dropdown button. Used when customDropdown is true or when no values are provided.
​
extra-buttons
slot
Additional buttons to append to the dropdown panel below the value options.

​
Examples

<SelectMenu
  id="country"
  values={[
    { name: 'United States', value: 'us' },
    { name: 'Canada', value: 'ca' },
    { name: 'Mexico', value: 'mx' },
  ]}
  value={country.value}
/>

​
Behavior

The component creates a hidden native <select> element that syncs with the custom UI. When an option is clicked, it updates the hidden select and dispatches a change event. The dropdown auto-closes on selection unless nocloseonclick is set.

​
Accessibility

  • Native select element in the background for form integration
  • Keyboard navigation support (Tab, Enter, Arrow keys)
  • Focus-within state opens dropdown for keyboard users
  • Proper button types prevent form submission
  • select-none on dropdown prevents text selection

​
Styling Features

  • Maximum height of 18rem (72) with scroll for long lists
  • Smooth scale and opacity transitions
  • Backdrop blur effect (unless noblur is set)
  • Z-index of 1000 for proper layering
  • Custom scrollbar styling via lum-scroll

Build docs developers (and LLMs) love

Get started for freeTalk to us