/** * @fileoverview NavigationMenu primitive — site navigation with animated dropdowns, viewport support, and active indicators. * Built on Radix UI NavigationMenu. Part of the Saasflare base component layer. * @module packages/ui/components/ui/navigation-menu * @layer core * * @component * @example * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@saasflare/ui'; * * * * Products * * Documentation * * * * */ import * as React from "react"; import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"; import { type SaasflareComponentProps } from "../../providers"; /** * Props for {@link NavigationMenu}. * * `viewport` toggles the shared {@link NavigationMenuViewport} that hosts all * dropdown content in one animated panel; set it to `false` to render each * item's content as a self-contained popover below its trigger instead. */ interface NavigationMenuProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps { /** * Render the shared viewport panel for dropdown content. * * @default true */ viewport?: boolean; } /** * Site navigation root with animated dropdown menus, built on Radix NavigationMenu. * * Hosts a {@link NavigationMenuList} of items and, by default, a shared * {@link NavigationMenuViewport} that all dropdown content animates into. * Resolves the design-system axes and emits them as data attributes. Use for * horizontal header navigation. * * @component * @layer core */ declare function NavigationMenu({ className, children, viewport, surface, radius, animated, iconWeight, ...props }: NavigationMenuProps): import("react/jsx-runtime").JSX.Element; /** * Horizontal list that lays out the top-level {@link NavigationMenuItem} entries. * * @component * @layer core */ declare function NavigationMenuList({ className, ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element; /** * A single menu entry — wraps a trigger/content pair or a standalone link. * * @component * @layer core */ declare function NavigationMenuItem({ className, ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element; /** * cva builder for the trigger button styles. Applied internally by * {@link NavigationMenuTrigger}; call it on a plain {@link NavigationMenuLink} * to make a top-level link match the trigger appearance. */ declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string; interface NavigationMenuTriggerProps extends React.ComponentProps, Pick { } /** * Button that opens an item's {@link NavigationMenuContent}. Renders a caret * that rotates while open and follows the resolved `iconWeight` axis. * * @component * @layer core */ declare function NavigationMenuTrigger({ className, children, iconWeight, ...props }: NavigationMenuTriggerProps): import("react/jsx-runtime").JSX.Element; interface NavigationMenuContentProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps { } /** * Dropdown panel for a menu item. Renders into the shared * {@link NavigationMenuViewport} when the root has `viewport` enabled, * otherwise as a self-contained popover below its trigger. * * @component * @layer core */ declare function NavigationMenuContent({ className, surface, radius, animated, iconWeight, ...props }: NavigationMenuContentProps): import("react/jsx-runtime").JSX.Element; interface NavigationMenuViewportProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps { } /** * Shared panel that hosts the active item's content and animates between sizes. * Rendered automatically by {@link NavigationMenu} unless `viewport` is `false`. * * @component * @layer core */ declare function NavigationMenuViewport({ className, surface, radius, animated, iconWeight, ...props }: NavigationMenuViewportProps): import("react/jsx-runtime").JSX.Element; interface NavigationMenuLinkProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps { } /** * Navigational link inside the menu — use `asChild` to compose with a framework * router link. Works standalone in an item or inside dropdown content. * * @component * @layer core */ declare function NavigationMenuLink({ className, surface, radius, animated, iconWeight, ...props }: NavigationMenuLinkProps): import("react/jsx-runtime").JSX.Element; interface NavigationMenuIndicatorProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps { } /** * Animated arrow that tracks the active trigger and points at the open content. * * @component * @layer core */ declare function NavigationMenuIndicator({ className, surface, radius, animated, iconWeight, ...props }: NavigationMenuIndicatorProps): import("react/jsx-runtime").JSX.Element; export { NavigationMenu, type NavigationMenuProps, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, };