Components
Loading preview...
Pixel-art horizontal menubar from 8bitcn.com — retro pixel border on top-level items and submenus. Wraps Radix Menubar (inlined via esbuild).
npx shadcn@latest add https://21st.dev/r/theorcdev/8bit-menubar"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>
);
}