Overlays and menus

useDropdownMenu

Manages dropdown menu disclosure — identical API to usePopover but sets aria-haspopup to "menu" for correct ARIA semantics on menu triggers.

Copy React example DropdownMenu component

Live component preview · Astro

Explore DropdownMenu

Try the component this hook connects to. The preview uses the Astro adapter; the React example below uses useDropdownMenu.

React usage

Import from @santi020k/lumen-react and spread the controller props onto the matching components.

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from '@santi020k/lumen-react'

export function ActionsMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Edit</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem status="Admin">Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from '@santi020k/lumen-react'

export function ActionsMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Edit</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem status="Admin">Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Load @santi020k/lumen-react/styles.css once in your application. With React Server Components, put 'use client' at the top of the module that calls the hook. Follow the React setup guide for the framework boundary.

Options

Property	Type	Default	Description
defaultOpen	boolean	false	Initial open state.
open	boolean	-	Controlled open state.
onOpenChange	(open: boolean) => void	-	Callback fired when the open state changes.
id	string	auto	Explicit id for the menu panel.

Controller return values

Property	Type	Description
rootProps	LumenProps<"div">	Spread onto the root wrapper.
triggerProps	LumenProps<"button">	Spread onto the menu trigger. Sets aria-haspopup="menu".
panelProps	LumenProps<"div">	Spread onto the menu panel with keyboard navigation.
open	boolean	Current open state.
close	() => void	Close the menu.
toggle	() => void	Toggle the menu.