Menu
NavigationDropdown context menu built on Radix DropdownMenu.
Radix DropdownMenu wrapper. Compose from MenuTrigger, MenuContent, MenuItem, MenuLabel, MenuSeparator, MenuSub, MenuSubTrigger, MenuSubContent.
Usage
import { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator } from "nosible-ux"
import { Button } from "nosible-ux"
export default function Example() {
return (
<Menu>
<MenuTrigger asChild>
<Button intent="outline">Actions</Button>
</MenuTrigger>
<MenuContent>
<MenuItem>Add to watchlist</MenuItem>
<MenuItem>Export signals</MenuItem>
<MenuSeparator />
<MenuItem destructive>Delete feed</MenuItem>
</MenuContent>
</Menu>
)
}Examples
With submenu
Accessibility
Built on Radix DropdownMenu: arrow key navigation, Escape to close, and role="menu" with role="menuitem" items are all handled.
Props
| Name | Type | Default | Description |
|---|---|---|---|
align | "center" | "start" | "end" | undefined | — | |
alignOffset | number | undefined | — | |
arrowPadding | number | undefined | — | |
asChild | boolean | undefined | — | |
avoidCollisions | boolean | undefined | — | |
collisionBoundary | Boundary | Boundary[] | undefined | — | |
collisionPadding | number | Partial<Record<"top" | "bottom" | "left" | "right", number>> | undefined | — | |
forceMount | true | undefined | — | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
hideWhenDetached | boolean | undefined | — | |
loop | boolean | undefined | false | Whether keyboard navigation should loop around |
onCloseAutoFocus | ((event: Event) => void) | undefined | — | Event handler called when auto-focusing on close. Can be prevented. |
onEscapeKeyDown | ((event: KeyboardEvent) => void) | undefined | — | |
onFocusOutside | ((event: FocusOutsideEvent) => void) | undefined | — | |
onInteractOutside | ((event: PointerDownOutsideEvent | FocusOutsideEvent) => void) | undefined | — | |
onPointerDownOutside | ((event: PointerDownOutsideEvent) => void) | undefined | — | |
side | "top" | "bottom" | "left" | "right" | undefined | — | |
sideOffset | number | undefined | — | |
sticky | "partial" | "always" | undefined | — | |
updatePositionStrategy | "always" | "optimized" | undefined | — |