Components/Navigation/Menu

Menu

Navigation

Dropdown 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 TypeDefaultDescription
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 | undefinedUsed to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
hideWhenDetached
boolean | undefined
loop
boolean | undefinedfalseWhether keyboard navigation should loop around
onCloseAutoFocus
((event: Event) => void) | undefinedEvent 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