Dropdown

Wraps a .dropdown-trigger button + .dropdown-menu panel with the WAI-ARIA menu-button interaction pattern (arrow keys, Home/End, Escape, outside-click, viewport-aware flip). Finds the two by class name — DropdownTrigger/DropdownMenu are a convenient way to produce that markup; hand-writing the .dropdown-* <div>s works exactly the same.

Usage


import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Divider } from '@mav-labs-inc/mavkit-react'
 
<Dropdown>
  <DropdownTrigger>Options</DropdownTrigger>
  <DropdownMenu aria-label="Options">
    <DropdownItem>Edit</DropdownItem>
    <DropdownItem>Duplicate</DropdownItem>
    <Divider className="dropdown-separator" role="separator" aria-hidden="true" />
    <DropdownItem as="button" danger>Delete</DropdownItem>
  </DropdownMenu>
</Dropdown>

Examples

Basic

Hover trigger

Falls back to click on touch devices ((hover: none)) automatically.

Props

Prop	Type	Default	Description
triggerMode	'click' \| 'hover'	'click'
onOpened	() => void	—
onClosed	() => void	—
className	string	—
children	ReactNode	—
ref	Ref<DropdownHandle>	—	{ open(), close(), toggle(), isOpen }

DropdownTrigger

Renders a .btn.dropdown-trigger button and accepts every native <button> attribute. Dropdown manages aria-expanded on it directly — don’t set that prop yourself.

DropdownMenu

Prop	Type	Default	Description
align	'left' \| 'right'	'left'	Right-aligns the panel under the trigger via .dropdown-menu-right.

Also accepts every native <div> attribute. Give it an aria-label (or aria-labelledby) — the menu has no visible heading of its own.

DropdownItem

Prop	Type	Default	Description
as	'a' \| 'button'	'a'	Element to render — <a> for navigating items, or <button type="button"> for actions like "Delete" that don't navigate.
danger	boolean	—	Styles the item red via .menu-link-danger for destructive actions.
disabled	boolean	—	Marks the item aria-disabled instead of removing it. Dropdown's roving focus skips it automatically.
icon	ReactNode	—	Optional leading .menu-icon.

Also accepts every native <a>/<button> attribute (whichever as renders).