Thành phần

Menubar

Menubar on Base UI Menubar and Menu: heavy top rule and bottom hairline, ink-fill trigger when open, Dropdown Menu rows.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Install

bash

npx shadcn add @eloquent/menubar

Usage

tsx

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

<Menubar aria-label="Editor">
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New story<MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Undo</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Name the bar with aria-label. Rows, checkbox and radio items, labels (inside a MenubarGroup) and submenus work as in Dropdown Menu.

States

Disabled trigger

State	Treatment
Bar	Heavy 3px ink rule above, hairline below, no box
Trigger focus	2px ink outline, 2px offset
Menu open	Trigger takes the ink fill with paper text
Rows	Ink-fill highlight, ink check and dot, hairline separators
Disabled trigger	`halftone` text, `cursor-not-allowed`

Keyboard

Key	Action
Tab	Enter the bar (one stop)
ArrowLeft / ArrowRight	Move between triggers
Enter / Space / ArrowDown	Open the focused trigger's menu with the first row highlighted
ArrowDown / ArrowUp	Move the highlight in a menu
ArrowRight	On a plain row, open the next menu; on a submenu row, open the submenu
ArrowLeft	Close a submenu and return to its row
Esc	Close; focus returns to the trigger

Vietnamese

Ink adaptation

Upstream shadcn's border box, shadow, radius and animation are removed. The bar is a heavy rule above and a hairline below; triggers are Barlow capitals at 44px high with no hover effect, and the open menu's trigger takes the ink fill. Rows follow Dropdown Menu. Built on Base UI Menubar and Menu.