Primitives

<NavigationMenu>
- <NavigationMenuList>
  - <NavigationMenuItem>
    - <NavigationMenuTrigger />
    - <NavigationMenuContent>
      - <NavigationMenuLink />
      </NavigationMenuContent>
    - <NavigationMenuLink />
    </NavigationMenuItem>
  </NavigationMenuList>
- <NavigationMenuViewport />
</NavigationMenu>

Installation

First install and activate one skin. Core deliberately contains no visual token defaults.

The Control UI source installs this primitive from src/registry/sources/control-ui/ui/navigation-menu.tsx.

Registry command

npx shadcn@latest add https://control-ui.dev/r/navigation-menu.json

See registry manifest

Dependencies

Control variantssrc/registry/sources/control-ui/control-variants.tsSupport

Raw code

Primary installed source

src/registry/sources/control-ui/ui/navigation-menu.tsx

"use client";

import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";

import type { ComponentProps, CSSProperties } from "react";

import type { ButtonKnobStyle } from "@/components/control-ui/knob-contracts/button-knobs";

import type { PopupKnobStyle } from "@/components/control-ui/knob-contracts/popup-knobs";

import { cn } from "@/components/control-ui/lib/cn";

import { controlEffectsAttribute } from "@/components/control-ui/skin";

import { useSkin } from "@/components/control-ui/skin-provider";

export type NavigationMenuProps = ComponentProps<"nav"> & {

value?: string | null;

defaultValue?: string | null;

onValueChange?: (value: string | null) => void;

orientation?: "horizontal" | "vertical";

delay?: number;

closeDelay?: number;

} & { style?: CSSProperties & PopupKnobStyle };

export type NavigationMenuListProps = ComponentProps<"ul"> & { style?: CSSProperties & PopupKnobStyle };

export type NavigationMenuItemProps = ComponentProps<"li"> & {

value?: string;

} & { style?: CSSProperties & PopupKnobStyle };

export type NavigationMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & {

style?: CSSProperties & ButtonKnobStyle & PopupKnobStyle;

};

export type NavigationMenuContentProps = ComponentProps<"div"> & { style?: CSSProperties & PopupKnobStyle };

export const navigationMenuLinkVariants = ["default", "compact"] as const;

export type NavigationMenuLinkVariant = (typeof navigationMenuLinkVariants)[number];

export type NavigationMenuLinkProps = Omit<ComponentProps<"a">, "style"> & { style?: CSSProperties & PopupKnobStyle } & {

active?: boolean;

closeOnClick?: boolean;

variant?: NavigationMenuLinkVariant;

};

export type NavigationMenuViewportProps = Omit<ComponentProps<"div">, "style"> & { style?: CSSProperties & PopupKnobStyle };

type RefinedLinkProps = NavigationMenuLinkProps & Pick<ComponentProps<typeof NavigationMenuPrimitive.Link>, "render">;

export function NavigationMenu({ className, children, ...props }: NavigationMenuProps) {

return (

<NavigationMenuPrimitive.Root

data-control-ui="navigation-menu"

data-control-family="popup"

data-popup-kind="navigation-menu"

data-slot="root"

className={cn("relative flex max-w-max flex-1 items-center justify-center", className)}

{...props}

>

{children}

</NavigationMenuPrimitive.Root>

);

}

export function NavigationMenuList({ className, ...props }: NavigationMenuListProps) {

return (

<NavigationMenuPrimitive.List

data-control-ui="navigation-menu"

data-control-family="popup"

data-popup-kind="navigation-menu"

data-slot="list"

className={cn("flex flex-1 list-none items-center justify-center", className)}

{...props}

/>

);

}

export function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps) {

return (

<NavigationMenuPrimitive.Item

data-control-ui="navigation-menu"

data-control-family="popup"

data-popup-kind="navigation-menu"

data-slot="item"

className={cn("relative", className)}

{...props}

/>

);

}

export function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps) {

return (

<NavigationMenuPrimitive.Trigger

data-control-ui="navigation-menu"

data-control-family="button"

data-slot="trigger"

data-control="true"

data-cursor="default"

data-size="sm"

data-variant="quiet"

data-tone="neutral"

data-shape="default"

className={cn("inline-flex select-none items-center", className)}

{...props}

>

{children}

<NavigationMenuPrimitive.Icon

data-control-ui="navigation-menu"

data-control-family="popup"

data-popup-kind="navigation-menu"

data-slot="icon"

>

<svg viewBox="0 0 12 12" className="size-3" aria-hidden="true" fill="none">

          <path d="M3 4.5 6 7.5 9 4.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />

</svg>

</NavigationMenuPrimitive.Icon>

</NavigationMenuPrimitive.Trigger>

);

}

export function NavigationMenuContent({ className, children, ...props }: NavigationMenuContentProps) {

return (

<NavigationMenuPrimitive.Content

data-control-ui="navigation-menu"

data-control-family="popup"

data-popup-kind="navigation-menu"

data-slot="content"

className={cn("h-full w-full p-[var(--popover-padding)]", className)}

{...props}

>

{children}

</NavigationMenuPrimitive.Content>

);

}

export function NavigationMenuLink({ variant = "default", className, active, children, ...props }: RefinedLinkProps) {

return (

<NavigationMenuPrimitive.Link

data-control-ui="navigation-menu"

data-popup-kind="navigation-menu"

data-slot="link"

data-control-family="popup"

data-popup-part="navigation-link"

data-variant={variant}

active={active}

className={cn(

"block select-none",

variant === "compact" && "inline-flex h-control-sm items-center px-[calc(var(--padding-x)*0.75)]",

className,

)}

{...props}

>

{children}

</NavigationMenuPrimitive.Link>

);

}

export function NavigationMenuViewport({ className, ...props }: NavigationMenuViewportProps) {

const skin = useSkin();

return (

<NavigationMenuPrimitive.Portal>

<NavigationMenuPrimitive.Positioner

data-control-ui="navigation-menu"

data-control-family="popup"

data-popup-kind="navigation-menu"

data-slot="positioner"

data-skin={skin.id}

data-effects={controlEffectsAttribute(skin.effects)}

sideOffset={8}

collisionPadding={{ top: 5, bottom: 5, left: 16, right: 16 }}

collisionAvoidance={{ side: "none" }}

        className="z-(--z-popup) h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] before:absolute before:inset-x-0 before:top-[-8px] before:h-2 before:content-['']"

>

<NavigationMenuPrimitive.Popup

data-control-ui="navigation-menu"

data-control-family="popup"

data-popup-kind="navigation-menu"

data-slot="popup"

className="relative h-[var(--popup-height)] w-[var(--popup-width)]"

>

<NavigationMenuPrimitive.Viewport

data-control-ui="navigation-menu"

data-popup-kind="navigation-menu"

data-slot="viewport"

data-surface="floating"

data-control-family="popup"

data-popup-part="surface"

className={cn("relative h-full w-full overflow-hidden", className)}

{...props}

/>

</NavigationMenuPrimitive.Popup>

</NavigationMenuPrimitive.Positioner>

</NavigationMenuPrimitive.Portal>

);

}

Knobs

Typed custom properties the recipe paints with. Set one on the root — style, a utility class, or a skin — and every slot inherits it.

--cui-button-* · 25 knobsHow the cascade resolves

--cui-button-radius<length-percentage>var(--nest-radius, var(--radius-control))

--cui-button-gap<length-percentage>calc(var(--spacing) * 1.5)

--cui-button-icon<length>1rem

--cui-button-height<length-percentage>var(--control-h-md)

--cui-button-padding-inline<length-percentage>var(--padding-x)

--cui-button-icon-padding-inline<length-percentage>max(0px, calc(var(--cui-button-padding-inline) - var(--spacing) * 0.5))

--cui-button-font-size<length-percentage>var(--text-body)

--cui-button-background<color>transparent

--cui-button-background-image*none

--cui-button-hover-background-image*var(--cui-button-background-image)

--cui-button-foreground<color>var(--muted-foreground)

--cui-button-hover-background<color>var(--hover-fill)

--cui-button-hover-foreground<color>var(--foreground)

--cui-button-press-background<color>var(--cui-button-hover-background)

--cui-button-press-scale<number>0.96

--cui-button-active-background<color>var(--active-fill)

--cui-button-active-foreground<color>var(--foreground)

--cui-button-active-hover-background<color>var(--cui-button-active-background)

--cui-button-shadow*0 0 transparent

--cui-button-hover-shadow*var(--cui-button-shadow)

--cui-button-press-shadow*var(--cui-button-hover-shadow)

--cui-button-active-shadow*var(--cui-button-shadow)

--cui-button-open-background<color>var(--cui-button-hover-background)

--cui-button-open-foreground<color>var(--cui-button-hover-foreground)

--cui-button-open-shadow*var(--cui-button-shadow)

--cui-popup-* · 44 knobsHow the cascade resolves

--cui-popup-title-foreground<color>var(--cui-popup-foreground)

--cui-popup-title-font-size<length-percentage>var(--text-heading-3)

--cui-popup-title-font-weight<number>var(--font-weight-semibold)

--cui-popup-title-line-height<number>var(--text-heading-3--line-height)

--cui-popup-title-letter-spacing<length>-0.025em

--cui-popup-description-foreground<color>var(--muted-foreground)

--cui-popup-close-inset<length-percentage>calc(var(--spacing) * 3)

--cui-popup-item-inset<length-percentage>calc(var(--spacing) * 8)

--cui-popup-label-padding-block<length-percentage>var(--cui-popup-item-padding-block)

--cui-popup-label-padding-inline<length-percentage>var(--cui-popup-item-padding-inline)

--cui-popup-label-font-size<length-percentage>var(--text-micro)

--cui-popup-label-font-weight<number>var(--font-weight-medium)

--cui-popup-label-letter-spacing<length>0.08em

--cui-popup-label-text-transformnone | uppercase | lowercase | capitalizeuppercase

--cui-popup-separator-inset<length-percentage>calc(var(--popover-padding) * -1)

--cui-popup-shortcut-font-size<length-percentage>var(--text-body)

--cui-popup-shortcut-letter-spacing<length>0.02em

--cui-popup-status-success-foreground<color>var(--success-text)

--cui-popup-status-warning-foreground<color>var(--warning-text)

--cui-popup-status-info-foreground<color>var(--info-text)

--cui-popup-status-error-foreground<color>var(--destructive)

--cui-popup-radius<length-percentage>var(--radius-popover)

--cui-popup-background<color>var(--popover)

--cui-popup-foreground<color>var(--popover-foreground)

--cui-popup-border-color<color>var(--control-rim)

--cui-popup-border-width<length>var(--control-rim-width)

--cui-popup-shadow*var(--shadow-pop)

--cui-popup-backdrop-filter*blur(var(--backdrop-blur-popover))

--cui-popup-backdrop-background<color>oklch(from var(--foreground) l c h / var(--overlay-opacity))

--cui-popup-backdrop-blur<length>var(--backdrop-blur-overlay)

--cui-popup-item-radius<length-percentage>var(--radius-popup-item-fit)

--cui-popup-item-font-size<length-percentage>var(--text-body)

--cui-popup-item-icon-size<length-percentage>1rem

--cui-popup-item-padding-block<length-percentage>calc(var(--spacing) * 1)

--cui-popup-item-padding-inline<length-percentage>calc(var(--padding-x) * 0.5)

--cui-popup-item-min-height<length-percentage>max(var(--target-min), var(--control-h-xs))

--cui-popup-item-highlight-shadow*inset 0 0 0 1px oklch(from var(--foreground) l c h / 0.35)

--cui-popup-item-foreground<color>var(--foreground)

--cui-popup-item-highlight-background<color>var(--hover-fill)

--cui-popup-item-highlight-foreground<color>var(--cui-popup-item-foreground)

--cui-popup-item-highlight-muted-foreground<color>var(--muted-foreground)

--cui-popup-item-disabled-opacity<number>var(--disabled-opacity)

--cui-popup-separator-color<color>var(--border)

--cui-popup-shortcut-foreground<color>var(--muted-foreground)

Navigation menu

Composition

Anatomy

Installation

Dependencies

Raw code

Knobs