8-bit Menubar

Component 19

About

Pixel-art horizontal menubar from 8bitcn.com — retro pixel border on top-level items and submenus. Wraps Radix Menubar (inlined via esbuild).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds 8-bit Menubar to your project and fits it to your theme.

Code

How 8-bit Menubar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import {
  Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem,
  MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubTrigger, MenubarSubContent,
} from "@/components/ui/8bit-menubar";
export default function Default() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden font-pixel">
      <Menubar>
        <MenubarMenu>
          <MenubarTrigger>Game</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>New Run <MenubarShortcut>N</MenubarShortcut></MenubarItem>
            <MenubarItem>Load Save <MenubarShortcut>L</MenubarShortcut></MenubarItem>
            <MenubarSeparator />
            <MenubarSub>
              <MenubarSubTrigger>Difficulty</MenubarSubTrigger>
              <MenubarSubContent>
                <MenubarItem>Easy</MenubarItem>
                <MenubarItem>Normal</MenubarItem>
                <MenubarItem>Hard</MenubarItem>
              </MenubarSubContent>
            </MenubarSub>
            <MenubarSeparator />
            <MenubarItem>Quit <MenubarShortcut>Q</MenubarShortcut></MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Hero</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>Inventory</MenubarItem>
            <MenubarItem>Stats</MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger>Help</MenubarTrigger>
          <MenubarContent>
            <MenubarItem>Controls</MenubarItem>
            <MenubarItem>About</MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
    </div>
  );
}