Menu Bar

FreeNew

A desktop-style menu bar built on Radix Menubar, with menus, submenus, checkbox items, shortcuts, status icons and a clock.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

children

variant

portal

inset

variant

children

locale

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/menu-bar.json

Usage

import {
  MenuBar,
  MenuBarClock,
  MenuBarContent,
  MenuBarItem,
  MenuBarMenu,
  MenuBarShortcut,
  MenuBarStatus,
  MenuBarTrigger,
} from "@/components/ui/menu-bar"

<MenuBar>
  <MenuBarMenu value="file">
    <MenuBarTrigger>File</MenuBarTrigger>
    <MenuBarContent>
      <MenuBarItem>
        New Note <MenuBarShortcut>⌘N</MenuBarShortcut>
      </MenuBarItem>
    </MenuBarContent>
  </MenuBarMenu>
  <MenuBarStatus>
    <MenuBarClock />
  </MenuBarStatus>
</MenuBar>

Props

MenuBar

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	`MenuBarMenu` items first, then an optional `MenuBarStatus`.

Also accepts all Radix Menubar.Root props. The status area renders beside the ARIA menubar, not inside it.

MenuBarTrigger

Prop	Type	Default	Description
`variant`	`"default" \| "app"`	`"default"`	`app` sets the trigger in bold, like an application menu.

MenuBarContent

Prop	Type	Default	Description
`portal`	`boolean`	`true`	Render in a portal on `document.body`. Set `false` to keep the menu inside a mockup container.

Also accepts all Radix Menubar.Content props. align defaults to "start". MenuBarSubContent takes the same portal prop.

MenuBarItem

Prop	Type	Default	Description
`inset`	`boolean`	-	Indent the label to line up with checkbox items.
`variant`	`"default" \| "destructive"`	`"default"`	Red text for destructive actions.

MenuBarCheckboxItem, MenuBarLabel, MenuBarSeparator, MenuBarSub and MenuBarSubTrigger wrap the matching Radix parts.

MenuBarStatusItem

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	An icon. Give the button an `aria-label`.

Also accepts all <button> props.

MenuBarClock

Prop	Type	Default	Description
`locale`	`string`	`"en-US"`	BCP 47 locale for formatting.
`format`	`Intl.DateTimeFormatOptions`	weekday, month, day, time	Formatting options.
`value`	`Date`	-	Show a fixed time instead of the live clock.

The clock renders empty on the server and fills in after mount, so it never causes a hydration mismatch.