Qeetrix

Dropdown Menu

Usage

Import

import { DropdownMenu } from "@qeetrix/ui";

It can also be imported on its own from @qeetrix/ui/components/dropdown-menu.

Controlled and uncontrolled

Pass the value prop to control it, or the default prop to let the component own it.

ValueDefaultChange
opendefaultOpenonOpenChange

States

focus-visible · disabled · checked · open

Support

FeatureStatus
Right-to-leftSupported
Dark modeSupported
DensitySupported
Server renderingClient component
Reduced motionSupported

Accessibility

Follows the WAI-ARIA menu-button pattern. Audited.

CheckResult
SemanticsPass
Accessible namePass
KeyboardPass
FocusPass
Screen readerPass
Right-to-leftNot applicable
Reduced motionPass
Forced coloursPass
ContrastPass

Keyboard

Enter Space Escape ArrowUp ArrowDown Home End

Focus

One Tab stop for the group; arrow keys move between items (roving tab stop). While open, focus is contained and focus returns on close.

Tests

Covered by unit, accessibility (axe), interaction and visual tests.