Docs
メニューバー

メニューバー

一般的にデスクトップアプリケーションで使用される視覚的に主張するメニューで、一連のコマンドに簡単にアクセスできます。

Docs

インストール

npx shadcn-ui@latest add menubar

使用法

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar"
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>ファイル</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        新しいタブ <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>新しいウィンドウ</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>共有</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>印刷</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>