Navigation Menu

import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const { cva, cx: cn } = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };
export { getSchema };

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} />;
}