Cognition

Components

Menubar

A persistent horizontal command bar, the kind that sits at the top of a desktop application. Each item opens a dropdown of grouped commands.

Menubar is for application commands, not navigation. For moving around a site or app, use Navigation Menu or Sidebar.

Preview

Rendered with live Cognition tokens. Open a menu and arrow across the bar, no dark: classes.

Variants

New Tab
New Window
Open recent

Default

New Tab⌘T
New Window⌘N
Print⌘P

With keyboard shortcuts

Open
Share
Save as

With submenus

Cut
Copy
Select all

With separators

Always Show Bookmarks
Always Show Full URLs

With checkboxes

Derek Ho
Arjun Prakash

With radio groups

Menus compose shortcuts, submenus, separators, checkboxes, and radio groups. The panels are shown open for reference.

States

FileEditView

Closed. The resting bar.

FileEditView
New Tab⌘T
New Window⌘N

Item open.

Open
Share
Save as
Email link
Messages

Nested item hover.

Cut
Paste
Copy

Item disabled.

Always Show Bookmarks
Always Show Full URLs

Checkbox checked.

Derek Ho
Arjun Prakash

Radio selected.

A menu opens on click, so the open, hover, and nested states render statically. The preview opens the real menus.

API

Component
Description
Menubar
The persistent horizontal bar.
MenubarMenu
One top-level menu within the bar.
MenubarTrigger
The label that opens a menu.
MenubarContent
The dropdown surface for a menu.
MenubarItem
A command item.
MenubarSeparator
A divider between groups.
MenubarLabel
A non-interactive group heading.
MenubarCheckboxItem
An item with a toggle checkmark.
MenubarRadioGroup
Wraps radio items to share one value.
MenubarRadioItem
A single-select item within a radio group.
MenubarShortcut
Right-aligned keyboard hint on an item.
MenubarSub
Root for a nested sub-menu.
MenubarSubTrigger
Item that opens the sub-menu.
MenubarSubContent
The nested sub-menu surface.

Don't and Do

Don't

Don't use a Menubar to move between pages or sections. It reads as an application command surface, so filling it with destinations confuses commands with navigation. Use Navigation Menu or Sidebar for getting around.

Do
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Use it for desktop application command surfaces, the File, Edit, View, Help pattern, where persistent access to grouped commands is expected.

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar";

export function AppMenubar() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>New Window</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}