DropdownMenu

Menu de contexto baseado em Radix UI. Suporta itens, rótulos, separadores, checkboxes, grupos de rádio, submenus e atalhos de teclado.

Demonstração

Props

Prop	Tipo	Padrão	Descrição
`DropdownMenu`	`Radix Root`	`—`	Root component that controls open/closed state.
`DropdownMenuTrigger`	`Radix Trigger`	`—`	Element that opens the menu when activated.
`DropdownMenuContent`	`Radix Content`	`—`	The floating menu panel.
`DropdownMenuItem`	`Radix Item`	`—`	A single menu item. Supports disabled state.
`DropdownMenuLabel`	`Radix Label`	`—`	Section label inside the menu.
`DropdownMenuSeparator`	`Radix Separator`	`—`	Horizontal divider between menu sections.
`DropdownMenuShortcut`	`span`	`—`	Right-aligned keyboard shortcut hint.
`DropdownMenuCheckboxItem`	`Radix CheckboxItem`	`—`	Checkbox toggle item.
`DropdownMenuRadioGroup`	`Radix RadioGroup`	`—`	Group of radio items.
`DropdownMenuRadioItem`	`Radix RadioItem`	`—`	Single radio option.
`DropdownMenuSub`	`Radix Sub`	`—`	Submenu root.
`DropdownMenuSubTrigger`	`Radix SubTrigger`	`—`	Item that opens a submenu.
`DropdownMenuSubContent`	`Radix SubContent`	`—`	The submenu panel.

Uso

import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel,
  DropdownMenuShortcut,
} from '@ghiberti85/ui'

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      Profile <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Ver no Storybook

Abrir no Storybook →

←Spinner AlertDialog→