ContextMenu

Menu de contexto por clique direito construído no Radix UI com labels, separadores, atalhos, checkboxes, radio items e submenus.

Demonstração

Right-click here

ContextMenuContent Props

Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode`	`—`	Content shown inside the menu.
`onOpenChange`	`(open: boolean) => void`	`—`	Callback when the menu opens or closes.

ContextMenuItem Props

Prop	Tipo	Padrão	Descrição
`disabled`	`boolean`	`false`	Disables the item.
`onSelect`	`(e: Event) => void`	`—`	Called when the item is selected.
`inset`	`boolean`	`false`	Adds left padding to align with checkbox/radio items.

Uso

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuCheckboxItem,
  ContextMenuSub,
  ContextMenuSubTrigger,
  ContextMenuSubContent,
} from '@ghiberti85/ui'

<ContextMenu>
  <ContextMenuTrigger>
    <div>Right-click me</div>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuLabel>File</ContextMenuLabel>
    <ContextMenuSeparator />
    <ContextMenuItem>
      New File <ContextMenuShortcut>⌘N</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuCheckboxItem checked>Show toolbar</ContextMenuCheckboxItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>More</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Option A</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
  </ContextMenuContent>
</ContextMenu>

Ver no Storybook

Abrir no Storybook →

←HoverCard EmptyState→