Q: How do I add submenus inside a menubar dropdown?

Wrap a section in ` ` with ` ` (renders with a ChevronRight). The submenu opens on hover or arrow-right. Common pattern: "Edit → Find → Find Next / Find Previous / Find in Files". Cap nesting at two levels — three becomes hard to navigate.

Q: How do I add checkbox / radio items (View → Show Sidebar, Layout → Compact)?

Use ` ` for toggles. Use ` ` + ` ` for single-select groups. The menubar stays open after toggling — important for users who want to flip multiple settings before dismissing.

Question 1

What is a shadcn menubar?

Accepted Answer

A shadcn menubar is the desktop-app-style horizontal menu bar — File / Edit / View / Help — with each top-level item opening a dropdown of actions. It's the chrome users recognize from native apps (Word, Photoshop, VS Code, Figma) brought into the web. Built on Radix UI's Menubar primitive (auto-focus on adjacent menus when one is open, ARIA-menubar semantics, full keyboard nav) and styled with shadcn/ui.

Question 2

Are these menubar examples free?

Accepted Answer

Yes, every menubar example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

How is a Menubar different from a NavigationMenu or DropdownMenu?

Accepted Answer

Menubar is a HORIZONTAL ROW of dropdowns where adjacent menus auto-open as you mouse across — the desktop-app File/Edit/View pattern. NavigationMenu is for marketing-site top nav (with mega-menu panels for each section). DropdownMenu is a single anchored dropdown attached to one trigger button. Pick by scope: app-style command surface (Menubar), site-style nav (NavigationMenu), single button menu (DropdownMenu).

Question 4

When should I use a menubar in a web app?

Accepted Answer

Web apps that mirror desktop apps — Figma, VS Code in the browser, Notion's editor, Linear's app shell. The menubar gives power users a discoverable, keyboard-friendly access path to every app action. Skip menubar for content sites, simple SaaS, mobile-first apps — they don't have enough actions to justify the chrome, and mobile users can't see / use it anyway.

Question 5

How do I add submenus inside a menubar dropdown?

Accepted Answer

Wrap a section in `` with `` (renders with a ChevronRight). The submenu opens on hover or arrow-right. Common pattern: "Edit → Find → Find Next / Find Previous / Find in Files". Cap nesting at two levels — three becomes hard to navigate.

Question 6

How do I show keyboard shortcuts in menubar items?

Accepted Answer

Render `<MenubarShortcut>` inside each MenubarItem on the right edge. Use Kbd-styled chips for each shortcut (`⌘S`, `⌘⇧P`). Make sure the displayed shortcut matches what your global keydown handler triggers — drift between displayed and actual binding is one of the most common bugs in app menubars.

Question 7

How do I add checkbox / radio items (View → Show Sidebar, Layout → Compact)?

Accepted Answer

Use `` for toggles. Use `` + `` for single-select groups. The menubar stays open after toggling — important for users who want to flip multiple settings before dismissing.

Question 8

How do I install a menubar example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/menubar/…`, plus the shadcn/ui Menubar primitive (and its Radix dependency) if you don't already have it.

Question 9

How do I make a menubar work on touch devices?

Accepted Answer

Menubars are desktop-first by design. On touch, the auto-open-on-hover-cross-over behavior doesn't work because there's no hover. Two patterns: (1) Hide the menubar on mobile via `hidden md:flex` and provide a hamburger menu with the same actions as a fallback. (2) Convert each top-level menu to a tap-to-toggle DropdownMenu on mobile. Pattern (1) is simpler and usually correct — mobile users navigate via different patterns.

Question 10

How do I bind global keyboard shortcuts that match the menubar items?

Accepted Answer

Build a global keydown listener that matches Cmd+S → save, Cmd+Z → undo, etc. Keep the bindings in a single source-of-truth object so the displayed shortcut in MenubarShortcut and the actual binding can't drift apart. Library: react-hotkeys-hook handles the cross-platform Cmd vs Ctrl mapping for you.

Question 11

Which libraries do menubar examples depend on?

Accepted Answer

Radix UI Menubar (the primitive — auto-open on adjacent triggers, focus management, ARIA-menubar, keyboard nav, submenus, checkboxes, radios), shadcn/ui Menubar (the styled wrapper generated into your project), Tailwind CSS, and Lucide React (icons inside menu items). React 19 baseline.

Question 12

Are menubar examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. Radix Menubar implements the WAI-ARIA Menubar pattern: ArrowLeft/Right moves between top-level menus, ArrowDown opens the focused menu, Home/End jump to the first/last item, type-ahead jumps to items by initial letter. Screen readers announce the menubar role, each menu's name, and each item's label. The active menu is reflected via `aria-expanded`.

Question 13

Can I use these menubar examples with React Server Components?

Accepted Answer

The Menubar is a client component (it manages open/active state and keyboard navigation). Wrap it inside a Server Component layout and pass static menu structure as props. For permission-aware menus (admin sees more items than viewer), filter the menu structure on the server before passing it to the client-boundary menubar.

React Menubar Examples for shadcn/ui

Browse every menubar example

Frequently Asked Questions