Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Menubar with Sections for Svelte

An Edit menu split into Actions (Cut, Copy, Paste) and History (Undo, Redo), with a label on each section.

UI library: Ark UI

Edit opens two labeled groups. Actions lists Cut, Copy and Paste. A separator, then History lists Undo and Redo. The labels are not commands.

Group commands under labels when a menu mixes two jobs, such as editing and history. A Dropdown Menu can use the same groups off one button. In Svelte, Ark UI does not run Undo or Redo.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Menubar anatomy: trigger, root, item, separator, sub trigger, content

Usage

<Menubar><MenubarMenu><MenubarTrigger>Edit</MenubarTrigger><MenubarContent><MenubarGroup><MenubarLabel>Actions</MenubarLabel><MenubarItem value="cut">Cut</MenubarItem><MenubarItem value="copy">Copy</MenubarItem><MenubarItem value="paste">Paste</MenubarItem></MenubarGroup><MenubarSeparator /><MenubarGroup><MenubarLabel>History</MenubarLabel><MenubarItem value="undo">Undo</MenubarItem><MenubarItem value="redo">Redo</MenubarItem></MenubarGroup></MenubarContent></MenubarMenu></Menubar>

FAQ

How are Actions and History split?

Each section is a MenubarGroup that starts with its MenubarLabel, with a MenubarSeparator between the two groups.

Is the section label a command?

No. A MenubarLabel names its group; nothing happens when you click it.

What does the separator separate?

The Actions group from the History group: Paste above the line, the History label below it.

What opens this menu?

A MenubarTrigger that reads Edit, in the bar's only MenubarMenu.

Do the labels take keyboard focus?

No. The arrow keys move from Paste straight to Undo, skipping the separator and the History label. Screen readers use each label to name its group.

How do I show a shortcut on Undo?

Put a MenubarShortcut after the label inside the Undo item, such as ⌘Z. It only prints the hint.

API Reference

Menubar

Sets value="cut", value="copy", value="paste", value="undo" and value="redo". The rest is on the Menubar page.

All 10 menubar examples