Menubar

The row of menus across the top of an application: a black bar of quiet slabs, each filled with the accent while its menu is open.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/menubar

Examples

Job, View, Help

menubar-dispatch.tsx

import { useState } from "react";import {  Menubar,  MenubarCheckboxItem,  MenubarContent,  MenubarItem,  MenubarMenu,  MenubarRadioGroup,  MenubarRadioItem,  MenubarSeparator,  MenubarShortcut,  MenubarSub,  MenubarSubContent,  MenubarSubTrigger,  MenubarTrigger,} from "@/components/zero/menubar";export default function MenubarDispatch() {  const [radio, setRadio] = useState(true);  const [sort, setSort] = useState("reward");  return (    <Menubar>      <MenubarMenu>        <MenubarTrigger>Job</MenubarTrigger>        <MenubarContent>          <MenubarItem>            New job            <MenubarShortcut>⌘N</MenubarShortcut>          </MenubarItem>          <MenubarItem>            Take it            <MenubarShortcut>⌘T</MenubarShortcut>          </MenubarItem>          <MenubarSub>            <MenubarSubTrigger>Send to</MenubarSubTrigger>            <MenubarSubContent>              <MenubarItem>Mara</MenubarItem>              <MenubarItem>Rui</MenubarItem>            </MenubarSubContent>          </MenubarSub>          <MenubarSeparator />          <MenubarItem danger>Abandon</MenubarItem>        </MenubarContent>      </MenubarMenu>      <MenubarMenu>        <MenubarTrigger>View</MenubarTrigger>        <MenubarContent>          <MenubarCheckboxItem checked={radio} onCheckedChange={setRadio}>            Radio on          </MenubarCheckboxItem>          <MenubarSeparator />          <MenubarRadioGroup value={sort} onValueChange={setSort}>            <MenubarRadioItem value="reward">By reward</MenubarRadioItem>            <MenubarRadioItem value="distance">By distance</MenubarRadioItem>          </MenubarRadioGroup>        </MenubarContent>      </MenubarMenu>      <MenubarMenu>        <MenubarTrigger>Help</MenubarTrigger>        <MenubarContent>          <MenubarItem>Shortcuts</MenubarItem>          <MenubarItem>About dispatch</MenubarItem>        </MenubarContent>      </MenubarMenu>    </Menubar>  );}

Behaviour

Once one menu is open, moving along the bar opens the next; arrow keys move between menus. The menus are Dropdown menus, with their rows, submenus, checkbox and radio rows.

Props

Menubar

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Which way the bar runs.

Also takes every prop of Base UI's Menubar.

MenubarMenu, MenubarTrigger, MenubarContent

Also takes every prop of Base UI's Menu.Root.