Sections

• Introduction
• Installation
• Styling
• Colors
• Forms
• Skills
• RTL
• LLMs.txt
• Changelog

Components

• Accordion
• Action Bar
• Alert Dialog
• Alert
• Announcement
• Aspect Ratio
• Autocomplete
• Avatar
• Badge
• Bottom Navigation
• Breadcrumb
• Button Group
• Button
• Calendar
• Card
• Carousel
• Chart
• Checkbox
• Circular Progress
• Circular Slider
• Clipboard
• Collapsible
• Color Picker
• Combobox
• Command
• Context Menu
• Data List
• Date InputNew
• Date Picker
• Dialog
• DrawerUpdated
• Editable
• Field
• File Upload
• FloatUpdated
• Floating Panel
• Frame
• Hint
• Hover Card
• Image Cropper
• Input Group
• Input OTP
• Input
• Item
• Kbd
• Link Overlay
• Listbox
• Marquee
• Menu
• Native Select
• Number Input
• Pagination
• Password Input
• Popover
• Progress
• Prose
• QR Code
• Radio Group
• Rating
• Resizable
• Scroll Area
• Segment Group
• Select
• Separator
• Sheet
• Sidebar
• Signature Pad
• Skeleton
• Skip Nav
• Slider
• Spinner
• StatusUpdated
• Steps
• Switch
• Table
• Tabs
• Tags Input
• Textarea
• Timer
• Toast
• Toggle Group
• Toggle Tooltip
• Toggle
• Tooltip
• Tour
• Tree View

Utilities

• Client Only
• Download Trigger
• Format
• Highlight
• Hitbox
• JSON Tree View
• Presence
• Show
• Swap

Forms

• Formisch
• React Hook Form
• TanStack Form

Hooks

• useIsMobile

Menu

Copy Markdown

List of options on button interaction.

DocsAPI

PreviewCode

Open

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/menu

Anatomy#

Menu
├── MenuTrigger
└── MenuPositioner
    └── MenuContent
        ├── MenuGroup
        │ └── MenuGroupLabel
        ├── MenuItem
        ├── MenuQuickItem
        ├── MenuCheckboxItem
        ├── MenuRadioGroup
        │ └── MenuRadioItem
        ├── MenuSub
        │ ├── MenuSubTrigger
        │ └── MenuSubContent
        ├── MenuSeparator
        ├── MenuShortcut
        └── MenuArrow

Usage#

import {
  Menu,
  MenuCheckboxItem,
  MenuContent,
  MenuGroup,
  MenuItem,
  MenuQuickItem,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuShortcut,
  MenuSub,
  MenuSubContent,
  MenuSubTrigger,
  MenuTrigger,
} from "@/components/ui/menu";

<Menu>
  <MenuTrigger />
  <MenuContent>
    <MenuItemGroup>
      <MenuItemGroupLabel />
      <MenuItem />
      <MenuSub>
        <MenuSubTrigger />
        <MenuSubContent>
          <MenuItem />
        </MenuSubContent>
      </MenuSub>
      <MenuSeparator />
      <MenuItemGroup>
        <MenuRadioItem />
      </MenuItemGroup>
      <MenuSeparator />
      <MenuCheckboxItem />
    </MenuItemGroup>
  </MenuContent>
</Menu>

Positioning#

Control the position of the menu relative to the trigger using the positioning prop.

PreviewCode

lefttopbottomright

Examples#

Nested Menu#

Use MenuSub, MenuSubTrigger, and MenuSubContent for nested submenus.

PreviewCode

Open

Icons#

Combine icons with labels for quick scanning.

PreviewCode

Open

Shortcuts#

Use MenuShortcut to show keyboard hints next to menu items.

PreviewCode

Open

Checkboxes#

Use MenuCheckboxItem for toggles.

PreviewCode

Open

Radio Group#

Use MenuRadioGroup and MenuRadioItem for a single selection from a set of options.

PreviewCode

Open

With Link#

Use the asChild prop on MenuItem with a anchor element to render a link.

PreviewCode

Open

With Group Label#

Use MenuGroup with MenuGroupLabel or the heading prop to group related items under a label.

PreviewCode

Open

With Separator#

Use MenuSeparator to add visual dividers between related groups of menu items.

PreviewCode

Open

Quick Items#

Use MenuQuickItem for actions with icon-above-text layout, ideal for quick actions like Copy and Share displayed horizontally.

PreviewCode

Open

Scrollable#

Add max-h-* and overflow-y-auto to MenuContent to constrain height and enable native scrolling when there are many items.

PreviewCode

Open

Open a Dialog#

Open a dialog from a MenuItem with the onSelect prop and controlled state.

PreviewCode

Open

Destructive#

Use variant="destructive" on MenuItem for irreversible actions like delete.

PreviewCode

Open

API Reference#

Menu#

Root element of the menu component.

MenuTrigger#

Opens the menu on click. Use asChild to delegate to a child element.

MenuContent#

Holds menu options. Displayed in a portal, positioned relative to the trigger.

MenuItem#

A single selectable menu option. Supports asChild for custom elements.

MenuCheckboxItem#

A menu option with a checkbox. Use checked and onCheckedChange for controlled state.

MenuRadioGroup#

Group of mutually exclusive options. Use value and onValueChange for controlled state.

MenuRadioItem#

A single option in a radio group.

MenuGroup#

Groups related items. Use heading or MenuGroupLabel for a label.

MenuGroupLabel#

Label for a group. Must be used inside MenuGroup.

MenuSeparator#

Visual divider between groups of menu items.

MenuQuickItem#

A menu option with icon-above-text layout for quick actions. Use with flex to display multiple items horizontally.

MenuSub / MenuSubTrigger / MenuSubContent#

Submenu: wrap a nested Menu-like structure. MenuSubTrigger opens the submenu; MenuSubContent holds the nested items.

MenuShortcut#

Optional keyboard shortcut hint displayed next to a menu item.

MenuArrow#

Optional arrow pointing toward the trigger.

For a complete list of props, see the Ark UI documentation.

[

Previous page

Marquee ](/docs/components/marquee)[

Next page

Native Select ](/docs/components/native-select)

On This Page

InstallationAnatomyUsagePositioningExamplesNested MenuIconsShortcutsCheckboxesRadio GroupWith LinkWith Group LabelWith SeparatorQuick ItemsScrollableOpen a DialogDestructiveAPI ReferenceMenuMenuTriggerMenuContentMenuItemMenuCheckboxItemMenuRadioGroupMenuRadioItemMenuGroupMenuGroupLabelMenuSeparatorMenuQuickItemMenuSub / MenuSubTrigger / MenuSubContentMenuShortcutMenuArrow