Menubar

Navigation

Application menu bar with dropdowns.

Installation

npm install @radix-ui/react-menubar

Import

import { PixelMenubar, PixelMenubarMenu, PixelMenubarTrigger, PixelMenubarContent, PixelMenubarItem } from "@/components/ui/pixel-menubar"

Usage

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel-menubar.tsx

"use client";

import * as MenubarPrimitive from "@radix-ui/react-menubar";
import { Check, ChevronRight } from "lucide-react";
import type * as React from "react";
import { cn } from "@/lib/utils";

function PixelMenubar({
  className,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
  return (
    <MenubarPrimitive.Root
      className={cn(
        "flex h-10 items-center space-x-1 border-4 border-black bg-[#fffacd] dark:bg-[#2a2a2a] p-1 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]",
        "font-[family-name:var(--font-press-start)] text-xs",
        className,
      )}
      {...props}
    />
  );
}

function PixelMenubarMenu({
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
  return <MenubarPrimitive.Menu {...props} />;
}

function PixelMenubarTrigger({
  className,
  ...props
}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
  return (
    <MenubarPrimitive.Trigger
      className={cn(
        "flex cursor-pointer select-none items-center px-3 py-1.5 text-xs font-bold outline-none duration-0",
        "hover:bg-[#ff6b6b] hover:text-white",
        "focus:bg-[#ff6b6b] focus:text-white",
        "data-[state=open]:bg-[#ff6b6b] data-[state=open]:text-white",
        className,
      )}
      {...props}
    />
  );
}

function PixelMenubarContent({
  className,
  align = "start",

// ... (more code below)

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.