PlumUI

Menubar

A desktop-style menu bar. Once a menu is open, hover the others and the highlight slides along with you.

NavigationRadix Menubar 
1export async function deploy(project: string) {
2  const build = await createBuild(project)
3  await build.wait()
4  return promote(build.id)
5}

Playground

Tweak the props, the preview and the code follow.

Props
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem checked={bookmarks} onCheckedChange={setBookmarks}>
        Show bookmarks
      </MenubarCheckboxItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Installation

npx @plumsydev/plum-ui add menubar

Usage

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar"
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Examples

Media controls

Checkbox and radio items drive the player: shuffle, repeat and playback speed.

Shipping Season — Ep. 42
1×

Workspace switcher

The trigger label follows the radio selection.

API Reference

Menubar

PropTypeDefault
value

Controlled open menu.

string—
onValueChange

Called when a menu opens or closes.

(value: string) => void—
loop

Arrow keys wrap around the bar.

booleantrue

MenubarItem

PropTypeDefault
variant

Destructive items are tinted red.

"default" | "destructive""default"
inset

Aligns the label with checkbox and radio items.

boolean—

Notes

  • Also exports MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, MenubarLabel and MenubarSeparator.
PreviousMarqueeNextNavigation Menu