Menubar

npx shadcn@latest add https://brutallab.facilito.dev/r/menubar.json

'use client';

import { useState } from 'react';
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
} from '@/components/ui/menubar';

export default function Demo() {
  const [action, setAction] = useState('Choose a command.');
  return (
    <div className="grid gap-4">
      <Menubar>
        <MenubarMenu>
          <MenubarTrigger>File</MenubarTrigger>
          <MenubarContent>
            <MenubarItem onClick={() => setAction('New file selected')}>
              New file
            </MenubarItem>
            <MenubarItem onClick={() => setAction('Open selected')}>
              Open
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Edit</MenubarTrigger>
          <MenubarContent>
            <MenubarItem onClick={() => setAction('Undo selected')}>
              Undo
            </MenubarItem>
            <MenubarItem disabled>Redo</MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
      <output>{action}</output>
    </div>
  );
}