shadcn.io is not affiliated with official shadcn/ui
Menubar examples · Standard
Menubar with Destructive Action for React
An Edit menu with Cut, Copy and Paste, and a destructive Delete set apart by a separator.
A delete next to Copy is easy to hit by mistake. This menubar's Edit menu lists Cut, Copy and Paste, then a separator and Delete in the destructive color, so the dangerous command stands apart. It fits editors and file apps.
Preview
Installation
FAQ
How is Delete marked as dangerous?
variant="destructive" on its MenubarItem colors the row. It doesn't confirm anything: open an Alert Dialog from its handler if the delete can't be undone.
Why is Delete on its own after a line?
A MenubarSeparator puts space between the clipboard commands and Delete, which makes a mis-click less likely.
What opens this menu?
A MenubarTrigger that reads Edit, inside a MenubarMenu, the only menu on the bar.
How do I add a shortcut hint on Cut?
Put a MenubarShortcut after the label inside the item, such as Cut followed by ⌘X. It only prints the hint; register the key yourself.
Related
- Simple Text MenubarA menubar with one File menu of plain
- Application MenubarAn application menubar with File, Edit
- Compact MenubarA menubar with a single Options menu
- Button with Text (Destructive)Delete, in the danger color
- Simple Delete Confirmation Alert DialogA simple delete confirmation with a
- Menubar with CheckboxesA View menu of checkbox rows that show or