About
Pixel-art horizontal menubar from 8bitcn.com — retro pixel border on top-level items and submenus, with checkbox/radio items and submenus. Built on Radix Menubar (clean source).
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,
MenubarCheckboxItem,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarSeparator,
MenubarShortcut,
MenubarTrigger,
} 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 retro">
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New Tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
<MenubarItem>New Window <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
<MenubarItem disabled>New Incognito Window</MenubarItem>
<MenubarSeparator />
<MenubarItem>Print... <MenubarShortcut>⌘P</MenubarShortcut></MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Edit</MenubarTrigger>
<MenubarContent>
<MenubarItem>Undo <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
<MenubarItem>Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
<MenubarSeparator />
<MenubarItem>Cut</MenubarItem>
<MenubarItem>Copy</MenubarItem>
<MenubarItem>Paste</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>View</MenubarTrigger>
<MenubarContent>
<MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
<MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
</div>
);
}