basecn
Components

Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Docs API Reference

Installation

pnpm dlx shadcn@latest add https://basecn.dev/r/menubar.json

Migrating from Radix UI

Common Migration Steps

All components share several migration patterns when moving from Radix UI to Base UI. Before proceeding with component-specific changes, review the essential migration patterns.

Familiarizing yourself with these patterns will make the component-specific migration steps much clearer.

Listening to Item Clicks

In Radix UI, you can listen to item clicks by passing a function to the onSelect prop.

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>...</MenubarTrigger>
    <MenubarContent>
      <MenubarMenuItem onSelect={() => { console.log("New Tab") }}>New Tab</MenubarMenuItem>
      <MenubarMenuItem>New Window</MenubarMenuItem>
      <MenubarMenuItem>New Private Window</MenubarMenuItem>
      <MenubarMenuItem>Open File</MenubarMenuItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

In Base UI, you can do the same by passing a function to the onClick prop.

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>...</MenubarTrigger>
    <MenubarPositioner>
      <MenubarContent>
        <MenubarMenuItem onClick={() => { console.log("New Tab") }}>New Tab</MenubarMenuItem>
        <MenubarMenuItem>New Window</MenubarMenuItem>
        <MenubarMenuItem>New Private Window</MenubarMenuItem>
        <MenubarMenuItem>Open File</MenubarMenuItem>
      </MenubarContent>
    </MenubarPositioner>
  </MenubarMenu>
</Menubar>
Docs by Fumadocs
Analytics by Databuddy