Menu

Loading code...

Installation

pnpm dlx shadcn@latest add @uitopia/menu

Usage

import {
  Menu,
  MenuCheckboxItem,
  MenuGroup,
  MenuGroupLabel,
  MenuItem,
  MenuPopup,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuSub,
  MenuSubPopup,
  MenuSubTrigger,
  MenuTrigger,
} from "@/components/ui/menu"

<Menu>
  <MenuTrigger>Open</MenuTrigger>
  <MenuPopup align="start" sideOffset={4}>
    <MenuItem>Profile</MenuItem>
    <MenuSeparator />

    <MenuGroup>
      <MenuGroupLabel>Playback</MenuGroupLabel>
      <MenuItem>Play</MenuItem>
      <MenuItem>Pause</MenuItem>
    </MenuGroup>

    <MenuSeparator />

    <MenuCheckboxItem>Shuffle</MenuCheckboxItem>
    <MenuCheckboxItem>Repeat</MenuCheckboxItem>

    <MenuSeparator />

    <MenuGroup>
      <MenuGroupLabel>Sort by</MenuGroupLabel>
      <MenuRadioGroup>
        <MenuRadioItem>Artist</MenuRadioItem>
        <MenuRadioItem>Album</MenuRadioItem>
        <MenuRadioItem>Title</MenuRadioItem>
      </MenuRadioGroup>
    </MenuGroup>

    <MenuSeparator />

    <MenuSub>
      <MenuSubTrigger>Add to playlist</MenuSubTrigger>
      <MenuSubPopup>
        <MenuItem>Jazz</MenuItem>
        <MenuItem>Rock</MenuItem>
      </MenuSubPopup>
    </MenuSub>
  </MenuPopup>
</Menu>

Examples

Open on Hover

Loading code...

With Checkbox

Loading code...

With Radio Group

Loading code...

With Link

Loading code...

With Group Label

Loading code...

Close on Click

Loading code...

Open a Dialog

Loading code...

Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with ui/topia quickly.

Prop Mapping

Component	Radix UI Prop	Base UI Prop
`MenuItem`	`onSelect`	`onClick`

Quick Checklist

If you used asChild on parts, switch to the render prop
Replace onSelect → onClick on menu items
Update import path from @/components/ui/dropdown-menu → @/components/ui/menu
Prefer Menu* component names; DropdownMenu* remain for legacy
Prefer MenuGroupLabel instead of DropdownMenuLabel
Prefer MenuPopup instead of DropdownMenuContent
Prefer MenuSubPopup instead of DropdownMenuSubContent

Comparison Examples

shadcn/ui

<DropdownMenu>
  <DropdownMenuTrigger>Open menu</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem
      onSelect={() => {
        console.log("Dashboard")
      }}
    >
      Dashboard
    </DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Sign out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

ui/topia

<Menu>
  <MenuTrigger>Open menu</MenuTrigger>
  <MenuPopup>
    <MenuItem
      onClick={() => {
        console.log("Dashboard")
      }}
    >
      Dashboard
    </MenuItem>
    <MenuItem>Settings</MenuItem>
    <MenuItem>Sign out</MenuItem>
  </MenuPopup>
</Menu>

Installation

Usage

Examples

Open on Hover

With Checkbox

With Radio Group

With Link

With Group Label

Nested Menu

Close on Click

Open a Dialog

Comparing with Radix / shadcn

Prop Mapping

Quick Checklist

Comparison Examples

On this page