Portaled ARIA menu with bounded anchored positioning.
@combric/react · v1.1.1 · Current
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@combric/react";
export function Example() {
return <DropdownMenu><DropdownMenuTrigger>Actions</DropdownMenuTrigger><DropdownMenuContent><DropdownMenuItem>Edit</DropdownMenuItem><DropdownMenuSeparator /><DropdownMenuItem disabled>Archive</DropdownMenuItem></DropdownMenuContent></DropdownMenu>;
}import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@combric/react";
export function Example() {
return <DropdownMenu><DropdownMenuTrigger>More actions</DropdownMenuTrigger><DropdownMenuContent side="top" align="end"><DropdownMenuItem>Duplicate</DropdownMenuItem><DropdownMenuItem>Move</DropdownMenuItem></DropdownMenuContent></DropdownMenu>;
}| Name |
|---|
DropdownMenu |
DropdownMenuTrigger |
DropdownMenuContent |
DropdownMenuItem |
DropdownMenuSeparator |
| Property / capability | Published contract |
|---|---|
| side | top | right | bottom | left |
| align | start | center | end |
| Contract | onSelect |
Implements menu/menuitem roles, skips disabled items, and restores focus after keyboard dismissal.
Arrow keys wrap; Home/End move; Enter/Space select; Escape restores focus; Tab closes.
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.