Skip to main content
The Dropdown component is a styled button with a chevron icon that rotates to indicate open/closed state. It’s commonly used as a trigger for dropdown menus and expandable panels.

​
Import

import { Dropdown } from '@luminescent/ui-qwik';

​
Usage

import { useSignal } from '@builder.io/qwik';

export default component$(() => {
  const isOpen = useSignal(false);
  
  return (
    <Dropdown
      opened={isOpen.value}
      onClick$={() => isOpen.value = !isOpen.value}
    >
      Select an option
    </Dropdown>
  );
});

​
Props

​
opened
boolean
Controls the chevron rotation. When true, the chevron rotates 180 degrees.
​
hover
boolean
When true, the chevron rotates on hover instead of requiring the opened prop.
​
class
{ [key: string]: boolean }
Object-based class names for conditional styling.
​
...props
PropsOf<'button'>
All standard HTML button attributes are supported (except the standard class prop).

​
Examples

<Dropdown
  opened={isOpen.value}
  onClick$={() => isOpen.value = !isOpen.value}
>
  Toggle Menu
</Dropdown>

​
Behavior

The chevron icon automatically rotates 180 degrees when opened or on hover/focus. The rotation uses smooth transitions with motion-safe support. Focus-within also triggers rotation for keyboard accessibility.

​
Styling

The component includes:
  • group lum-btn - Button styling with group context
  • flex-1 text-left - Left-aligned text that fills available space
  • Chevron icon with smooth ease-out transitions
  • Faster transition on hover/focus (duration-75 vs duration-300)

​
Accessibility

The button type is set to button by default to prevent form submission. The component responds to both hover and focus-within states for keyboard navigation.

Build docs developers (and LLMs) love

Get started for freeTalk to us