A collection of links and menus for website navigation.
Installation
npx shadcn@latest add @caprice/navigation-menunpm install @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const { compose, cva, cx: cn,} = defineConfig({ hooks: { onComplete: (className: string) => twMerge(className), },});export type { VariantProps };Copy and paste the following code into your project.
import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';/** * Groups all parts of the navigation menu. * Renders a `<nav>` element at the root, or `<div>` element when nested. * * Documentation: [Caprice UI Navigation Menu](https://caprice-ui.com/docs/components/navigation-menu) * * API Reference: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu#root) */export namespace Root { export type State = NavigationMenuPrimitive.Root.State; export type Props = React.ComponentProps<typeof NavigationMenuPrimitive.Root>; export type Actions = NavigationMenuPrimitive.Root.Actions; export type ChangeEventDetails = NavigationMenuPrimitive.Root.ChangeEventDetails; export type ChangeEventReason = NavigationMenuPrimitive.Root.ChangeEventReason;}export function Root({ ...props }: Root.Props) { return <NavigationMenuPrimitive.Root data-slot="navigation-menu" {...props} />;}/** * Contains a list of navigation menu items. * Renders a `<ul>` element. * * Documentation: [Caprice UI Navigation Menu](https://caprice-ui.com/docs/components/navigation-menu) * * API Reference: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu#list) */export namespace List { export type State = NavigationMenuPrimitive.List.State; export type Props = React.ComponentProps<typeof NavigationMenuPrimitive.List>;}export function List({ ...props }: List.Props) { return <NavigationMenuPrimitive.List data-slot="navigation-menu-list" {...props} />;}/** * An individual navigation menu item. * Renders a `<li>` element. * * Documentation: [Caprice UI Navigation Menu](https://caprice-ui.com/docs/components/navigation-menu) * * API Reference: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu#item) */export namespace Item { export type State = NavigationMenuPrimitive.Item.State; export type Props = React.ComponentProps<typeof NavigationMenuPrimitive.Item>;}export function Item({ ...props }: Item.Props) { return <NavigationMenuPrimitive.Item data-slot="navigation-menu-item" {...props} />;}/** * Opens the navigation menu popup when hovered or clicked, revealing the * associated content. * Renders a `<button>` element. * * Documentation: [Caprice UI Navigation Menu](https://caprice-ui.com/docs/components/navigation-menu) * * API Reference: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu#trigger) */export namespace Trigger { export type State = NavigationMenuPrimitive.Trigger.State; export type Props = React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>;}export function Trigger({ ...props }: Trigger.Props) { return <NavigationMenuPrimitive.Trigger data-slot="navigation-menu-trigger" {...props} />;}/** * An icon that indicates that the trigger button opens a menu. * * Documentation: [Caprice UI Navigation Menu](https://caprice-ui.com/docs/components/navigation-menu) * * API Reference: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu#icon) */export namespace Icon { export type State = NavigationMenuPrimitive.Icon.State; export type Props = React.ComponentProps<typeof NavigationMenuPrimitive.Icon>;}export function Icon({ ...props }: Icon.Props) { return <NavigationMenuPrimitive.Icon data-slot="navigation-menu-icon" {...props} />;}/** * A container for the content of the navigation menu item that is moved into the popup * when the item is active. * Renders a `<div>` element. * * Documentation: [Caprice UI Navigation Menu](https://caprice-ui.com/docs/components/navigation-menu) * * API Reference: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu#content) */export namespace Content { export type State = NavigationMenuPrimitive.Content.State; export type Props = React.ComponentProps<typeof NavigationMenuPrimitive.Content>;}export function Content({ ...props }: Content.Props) { return <NavigationMenuPrimitive.Content data-slot="navigation-menu-content" {...props} />;}/** * A link in the navigation menu that can be used to navigate to a different page or section. * Renders an `<a>` element. * * Documentation: [Caprice UI Navigation Menu](https://caprice-ui.com/docs/components/navigation-menu) * * API Reference: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu#link) */export namespace Link { export type State = NavigationMenuPrimitive.Link.State; export type Props = React.ComponentProps<typeof NavigationMenuPrimitive.Link>;}export function Link({ ...props }: Link.Props) { return <NavigationMenuPrimitive.Link data-slot="navigation-menu-link" {...props} />;}/** * A backdrop for the navigation menu popup. * Renders a `<div>` element. * * Documentation: [Caprice UI Navigation Menu](https://caprice-ui.com/docs/components/navigation-menu) * * API Reference: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu#backdrop) */export namespace Backdrop { export type State = NavigationMenuPrimitive.Backdrop.State; export type Props = React.ComponentProps<typeof NavigationMenuPrimitive.Backdrop>;}export function Backdrop({ ...props }: Backdrop.Props) { return <NavigationMenuPrimitive.Backdrop data-slot="navigation-menu-backdrop" {...props} />;}/** * A portal element that moves the popup to a different part of the DOM. * By default, the portal element is appended to `<body>`. * Renders a `<div>` element. * * Documentation: [Caprice UI Navigation Menu](https://caprice-ui.com/docs/components/navigation-menu) * * API Reference: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu#portal) */export namespace Portal { export interface State extends NavigationMenuPrimitive.Portal.State {} export type Props = React.ComponentProps<typeof NavigationMenuPrimitive.Portal>;}export function Portal({ ...props }: Portal.Props) { return <NavigationMenuPrimitive.Portal data-slot="navigation-menu-portal" {...props} />;}/** * Positions the navigation menu against the currently active trigger. * Renders a `<div>` element. * * Documentation: [Caprice UI Navigation Menu](https://caprice-ui.com/docs/components/navigation-menu) * * API Reference: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu#positioner) */export namespace Positioner { export type State = NavigationMenuPrimitive.Positioner.State; export type Props = React.ComponentProps<typeof NavigationMenuPrimitive.Positioner>;}export function Positioner({ ...props }: Positioner.Props) { return <NavigationMenuPrimitive.Positioner data-slot="navigation-menu-positioner" {...props} />;}/** * A container for the navigation menu contents. * Renders a `<nav>` element. * * Documentation: [Caprice UI Navigation Menu](https://caprice-ui.com/docs/components/navigation-menu) * * API Reference: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu#popup) */export namespace Popup { export type State = NavigationMenuPrimitive.Popup.State; export type Props = React.ComponentProps<typeof NavigationMenuPrimitive.Popup>;}export function Popup({ ...props }: Popup.Props) { return <NavigationMenuPrimitive.Popup data-slot="navigation-menu-popup" {...props} />;}/** * The clipping viewport of the navigation menu's current content. * Renders a `<div>` element. * * Documentation: [Caprice UI Navigation Menu](https://caprice-ui.com/docs/components/navigation-menu) * * API Reference: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu#viewport) */export namespace Viewport { export type State = NavigationMenuPrimitive.Viewport.State; export type Props = React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>;}export function Viewport({ ...props }: Viewport.Props) { return <NavigationMenuPrimitive.Viewport data-slot="navigation-menu-viewport" {...props} />;}/** * Displays an element pointing toward the navigation menu's current anchor. * Renders a `<div>` element. * * Documentation: [Caprice UI Navigation Menu](https://caprice-ui.com/docs/components/navigation-menu) * * API Reference: [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu#arrow) */export namespace Arrow { export type State = NavigationMenuPrimitive.Arrow.State; export type Props = React.ComponentProps<typeof NavigationMenuPrimitive.Arrow>;}export function Arrow({ ...props }: Arrow.Props) { return <NavigationMenuPrimitive.Arrow data-slot="navigation-menu-arrow" {...props} />;}Update the import paths to match your project setup.
Usage
import * as NavigationMenu from "@/components/caprice-ui/navigation-menu"import * as NavigationMenu from "@caprice-ui/react/navigation-menu"