A menu bar providing commands and options for your application.
Installation
npx shadcn@latest add @caprice/menubarpnpm dlx shadcn@latest add @caprice/menubaryarn dlx shadcn@latest add @caprice/menubarbunx shadcn@latest add @caprice/menubarnpm install @caprice-ui/reactpnpm add @caprice-ui/reactyarn add @caprice-ui/reactbun add @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactpnpm add @base-ui/react lucide-reactyarn add @base-ui/react lucide-reactbun add @base-ui/react lucide-reactAdd a cn helper
import { cn as merge } from 'cn';
import type { VariantProps } from 'cva';
import { defineConfig } from 'cva/config';
import { getSchema } from 'cva/tools';
export const { cva, cx: cn } = defineConfig({
cx: merge,
});
export type { VariantProps };
export { getSchema };
Copy and paste the following code into your project.
'use client';
import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
/**
* The container for menus.
*
* Documentation: [Caprice UI Menubar](https://caprice-ui.com/docs/components/menubar)
*
* API Reference: [Base UI Menubar](https://base-ui.com/react/components/menubar)
*/
export namespace Menubar {
export type State = MenubarPrimitive.State;
export type Props = React.ComponentProps<typeof MenubarPrimitive>;
}
export function Menubar({ ...props }: Menubar.Props) {
return <MenubarPrimitive data-slot="menubar" {...props} />;
}
Update the import paths to match your project setup.
Usage
import { Menubar } from "@/components/caprice-ui/menubar"import { Menubar } from "@caprice-ui/react/menubar"Examples
API Reference
Last updated on