Context Menu
The Context Menu appears on right-click and provides contextual actions for the target element.
Basic Usage
import { CtxMenu } from "@paramanu/navigation-react"
export default function App() {return ( <CtxMenu open> <div role="menuitem">Cut</div> <div role="menuitem">Copy</div> <div role="menuitem">Paste</div> </CtxMenu>)}<div class="pm-ctx-menu pm-ctx-menu--md pm-ctx-menu--open" role="menu"><div role="menuitem">Cut</div><div role="menuitem">Copy</div><div role="menuitem">Paste</div></div>Accessibility
| Key | Action |
|---|---|
ArrowDown | Move to next item |
ArrowUp | Move to previous item |
Enter | Activate focused item |
Escape | Close menu |
- Uses
role="menu"on the container. - Triggered via right-click (contextmenu event).
CtxMenu Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Size preset |
open | boolean | false | Visibility state |
CSS Classes
| Class | Description |
|---|---|
pm-ctx-menu | Root element |
pm-ctx-menu--open | Open state |