Menubar

Barra de menus estilo desktop (Arquivo, Editar…).

Navegação

Carregando demonstração…

Código da demo

"use client";

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

export function Demo() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>Arquivo</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Novo <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>Abrir</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Sair</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Editar</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Desfazer</MenubarItem>
          <MenubarItem>Refazer</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

Acessibilidade: Navegação por setas entre menus e itens; Esc fecha.
Importar: import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent } from "@financeequity/ui/menubar"
Neste repositório:
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent } from "@/components/ui/menubar"
Dependências: radix-ui