<ui:navigationMenu.root withViewport="{true}">
    <ui:navigationMenu.list>
        <ui:navigationMenu.item value="products">
            <ui:navigationMenu.trigger>Products</ui:navigationMenu.trigger>
        </ui:navigationMenu.item>
        <ui:navigationMenu.item value="company">
            <ui:navigationMenu.trigger>Company</ui:navigationMenu.trigger>
        </ui:navigationMenu.item>
        <ui:navigationMenu.item value="docs">
            <ui:navigationMenu.link href="#">Documentation</ui:navigationMenu.link>
        </ui:navigationMenu.item>
    </ui:navigationMenu.list>
    <ui:navigationMenu.indicator>
        <ui:navigationMenu.arrow />
    </ui:navigationMenu.indicator>
    <ui:navigationMenu.viewportPositioner>
        <ui:navigationMenu.viewport>
            <ui:navigationMenu.content value="products" class="w-90">
                <div class="grid grid-cols-2">
                    <ui:navigationMenu.link value="products" href="#" class="flex flex-col gap-0.5 !py-2 !px-3">
                        <span class="font-medium text-sm">Analytics</span>
                        <span class="text-xs text-muted-foreground">Track and analyze data</span>
                    </ui:navigationMenu.link>
                    <ui:navigationMenu.link value="products" href="#" class="flex flex-col gap-0.5 !py-2 !px-3">
                        <span class="font-medium text-sm">Marketing</span>
                        <span class="text-xs text-muted-foreground">Grow your audience</span>
                    </ui:navigationMenu.link>
                    <ui:navigationMenu.link value="products" href="#" class="flex flex-col gap-0.5 !py-2 !px-3">
                        <span class="font-medium text-sm">Automation</span>
                        <span class="text-xs text-muted-foreground">Save time with workflows</span>
                    </ui:navigationMenu.link>
                    <ui:navigationMenu.link value="products" href="#" class="flex flex-col gap-0.5 !py-2 !px-3">
                        <span class="font-medium text-sm">Commerce</span>
                        <span class="text-xs text-muted-foreground">Sell online with ease</span>
                    </ui:navigationMenu.link>
                </div>
            </ui:navigationMenu.content>
            <ui:navigationMenu.content value="company" class="w-32">
                <div class="grid grid-cols-1">
                    <ui:navigationMenu.link value="company" href="#">About Us</ui:navigationMenu.link>
                    <ui:navigationMenu.link value="company" href="#">Blog</ui:navigationMenu.link>
                    <ui:navigationMenu.link value="company" href="#">Careers</ui:navigationMenu.link>
                    <ui:navigationMenu.link value="company" href="#">Press</ui:navigationMenu.link>
                </div>
            </ui:navigationMenu.content>
        </ui:navigationMenu.viewport>
    </ui:navigationMenu.viewportPositioner>
</ui:navigationMenu.root>

Features

Supports simple inline dropdowns and shared viewport layouts
Keyboard navigation with arrow keys, Home, and End
Supports trigger-based menus and direct navigation links in the same list
Animated indicator and shared viewport support
Supports horizontal and vertical orientation

Anatomy

<primitives:navigationMenu.root>
    <primitives:navigationMenu.list>
        <primitives:navigationMenu.item>
            <primitives:navigationMenu.trigger />
            <primitives:navigationMenu.content>
                <primitives:navigationMenu.link />
            </primitives:navigationMenu.content>
        </primitives:navigationMenu.item>

        <primitives:navigationMenu.item>
            <primitives:navigationMenu.link />
        </primitives:navigationMenu.item>
    </primitives:navigationMenu.list>
</primitives:navigationMenu.root>

When using the shared viewport pattern, add the optional viewport-related parts:

<primitives:navigationMenu.root>
    <primitives:navigationMenu.list>
        <primitives:navigationMenu.item>
            <primitives:navigationMenu.trigger />
            <primitives:navigationMenu.triggerProxy />
            <primitives:navigationMenu.viewportProxy />
        </primitives:navigationMenu.item>
    </primitives:navigationMenu.list>

    <primitives:navigationMenu.indicator>
        <primitives:navigationMenu.arrow />
    </primitives:navigationMenu.indicator>

    <primitives:navigationMenu.viewportPositioner>
        <primitives:navigationMenu.viewport>
            <primitives:navigationMenu.content>
                <primitives:navigationMenu.link />
            </primitives:navigationMenu.content>
        </primitives:navigationMenu.viewport>
    </primitives:navigationMenu.viewportPositioner>
</primitives:navigationMenu.root>

Installation

typo3 ui:add navigationMenu

Read more about installing Components and Primitives.

Examples

Add dropdowns to items

Give an item a trigger and a content to open a dropdown right below it. Open Products or Company below.

<ui:navigationMenu.root>
    <ui:navigationMenu.list>
        <ui:navigationMenu.item value="products">
            <ui:navigationMenu.trigger>Products</ui:navigationMenu.trigger>
            <ui:navigationMenu.content>
                <div class="grid grid-cols-1">
                    <ui:navigationMenu.link href="#">Overview</ui:navigationMenu.link>
                    <ui:navigationMenu.link href="#">Features</ui:navigationMenu.link>
                    <ui:navigationMenu.link href="#">Pricing</ui:navigationMenu.link>
                    <ui:navigationMenu.link href="#">Changelog</ui:navigationMenu.link>
                </div>
            </ui:navigationMenu.content>
        </ui:navigationMenu.item>
        <ui:navigationMenu.item value="company">
            <ui:navigationMenu.trigger>Company</ui:navigationMenu.trigger>
            <ui:navigationMenu.content>
                <div class="grid grid-cols-1">
                    <ui:navigationMenu.link href="#">About</ui:navigationMenu.link>
                    <ui:navigationMenu.link href="#">Blog</ui:navigationMenu.link>
                    <ui:navigationMenu.link href="#">Careers</ui:navigationMenu.link>
                    <ui:navigationMenu.link href="#">Press</ui:navigationMenu.link>
                </div>
            </ui:navigationMenu.content>
        </ui:navigationMenu.item>
        <ui:navigationMenu.item value="docs">
            <ui:navigationMenu.link href="#">Documentation</ui:navigationMenu.link>
        </ui:navigationMenu.item>
    </ui:navigationMenu.list>
</ui:navigationMenu.root>

Use plain links

An item can hold a plain link. Set current="{true}" on the link of the page the visitor is on to render aria-current="page".

<ui:navigationMenu.root>
    <ui:navigationMenu.list>
        <ui:navigationMenu.item value="home">
            <ui:navigationMenu.link href="/" current="{true}">Home</ui:navigationMenu.link>
        </ui:navigationMenu.item>
        <ui:navigationMenu.item value="docs">
            <ui:navigationMenu.link href="/docs">Docs</ui:navigationMenu.link>
        </ui:navigationMenu.item>
        <ui:navigationMenu.item value="github">
            <ui:navigationMenu.link href="/github">GitHub</ui:navigationMenu.link>
        </ui:navigationMenu.item>
    </ui:navigationMenu.list>
</ui:navigationMenu.root>

Set withViewport="{true}" on the root and place the content parts in one shared viewport. The panels share one animated surface and an indicator marks the open item. Open Products, then Company.

<ui:navigationMenu.root withViewport="{true}">
    <ui:navigationMenu.list>
        <ui:navigationMenu.item value="products">
            <ui:navigationMenu.trigger>Products</ui:navigationMenu.trigger>
        </ui:navigationMenu.item>
        <ui:navigationMenu.item value="company">
            <ui:navigationMenu.trigger>Company</ui:navigationMenu.trigger>
        </ui:navigationMenu.item>
        <ui:navigationMenu.item value="docs">
            <ui:navigationMenu.link href="#">Documentation</ui:navigationMenu.link>
        </ui:navigationMenu.item>
    </ui:navigationMenu.list>
    <ui:navigationMenu.indicator>
        <ui:navigationMenu.arrow />
    </ui:navigationMenu.indicator>
    <ui:navigationMenu.viewportPositioner>
        <ui:navigationMenu.viewport>
            <ui:navigationMenu.content value="products" class="w-90">
                <div class="grid grid-cols-2">
                    <ui:navigationMenu.link value="products" href="#" class="flex flex-col gap-0.5 !py-2 !px-3">
                        <span class="font-medium text-sm">Analytics</span>
                        <span class="text-xs text-muted-foreground">Track and analyze data</span>
                    </ui:navigationMenu.link>
                    <ui:navigationMenu.link value="products" href="#" class="flex flex-col gap-0.5 !py-2 !px-3">
                        <span class="font-medium text-sm">Marketing</span>
                        <span class="text-xs text-muted-foreground">Grow your audience</span>
                    </ui:navigationMenu.link>
                    <ui:navigationMenu.link value="products" href="#" class="flex flex-col gap-0.5 !py-2 !px-3">
                        <span class="font-medium text-sm">Automation</span>
                        <span class="text-xs text-muted-foreground">Save time with workflows</span>
                    </ui:navigationMenu.link>
                    <ui:navigationMenu.link value="products" href="#" class="flex flex-col gap-0.5 !py-2 !px-3">
                        <span class="font-medium text-sm">Commerce</span>
                        <span class="text-xs text-muted-foreground">Sell online with ease</span>
                    </ui:navigationMenu.link>
                </div>
            </ui:navigationMenu.content>
            <ui:navigationMenu.content value="company" class="w-32">
                <div class="grid grid-cols-1">
                    <ui:navigationMenu.link value="company" href="#">About Us</ui:navigationMenu.link>
                    <ui:navigationMenu.link value="company" href="#">Blog</ui:navigationMenu.link>
                    <ui:navigationMenu.link value="company" href="#">Careers</ui:navigationMenu.link>
                    <ui:navigationMenu.link value="company" href="#">Press</ui:navigationMenu.link>
                </div>
            </ui:navigationMenu.content>
        </ui:navigationMenu.viewport>
    </ui:navigationMenu.viewportPositioner>
</ui:navigationMenu.root>

API Reference

The following tables cover the available props of the Fluid Primitives. For a full list of available client side props and methods, see the Zag.js Machine API.

navigationMenu.root

Provides shared navigation menu state and semantics. Renders a <nav> element.

Name	Description	Required	Default
`orientation`	`Enum\Orientation` The orientation of the navigation menu.	No	Horizontal
`defaultValue`	`string` The default value of the navigation menu. Use when you don't want to control the value of the menu.	No	''
`openDelay`	`integer` The delay before the menu opens.	No	200
`closeDelay`	`integer` The delay before the menu closes.	No	300
`disableHoverTrigger`	`boolean` Whether to disable the hover trigger.	No	-
`disableClickTrigger`	`boolean` Whether to disable the click trigger.	No	-
`disablePointerLeaveClose`	`boolean` Whether to disable the pointer leave close.	No	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`rootId`	`string` The root ID of the component, used for hydration and identification.	No	-
`ids`	`array` The IDs of of the component parts for composition.	No	[]
`autoMount`	`boolean` Whether the client initializes the component on its own. Set it to false to mount it yourself with `mount()`	No	true
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-navigation-menu-root`	<uid>
`data-orientation`	The orientation of the navigation-menu

navigationMenu.list

Groups the top-level navigation items. Renders a <ul> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-navigation-menu-list`	<uid>
`data-orientation`	The orientation of the list

navigationMenu.item

Wraps a single navigation item and its related parts. Renders an <li> element.

Name	Description	Required	Default
`value`	`string` The value of the item.	Yes	-
`disabled`	`boolean` Whether the item is disabled.	No	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-navigation-menu-item`	<uid>
`data-value`	The value of the item
`data-state`	"open" \| "closed"
`data-orientation`	The orientation of the item
`data-disabled`	Present when disabled

navigationMenu.trigger

Opens and closes the related navigation content. Renders a <button> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-navigation-menu-trigger`	<uid>
`data-uid`
`data-trigger-proxy-id`
`data-value`	The value of the item
`data-state`	"open" \| "closed"
`data-disabled`	Present when disabled

navigationMenu.triggerProxy

Provides a hidden focus proxy for shared viewport behavior. Renders a <span> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-navigation-menu-trigger-proxy`	<uid>
`data-trigger-proxy`
`data-trigger-id`

navigationMenu.link

Renders a navigational link item. Renders an <a> element.

Name	Description	Required	Default
`value`	`string` The value of the item this link belongs to. By default this is inherited from the parent navigationMenu.item.	No	-
`current`	`boolean` Whether the link is the current page.	No	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-navigation-menu-link`	<uid>
`data-value`	The value of the item
`data-current`	Present when current

navigationMenu.indicatorTrack

Provides a track for the active-item indicator. Renders a <div> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

navigationMenu.indicator

Displays the shared active-item indicator. Renders a <div> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-navigation-menu-indicator`	<uid>
`data-state`	"open" \| "closed"
`data-orientation`	The orientation of the indicator

navigationMenu.itemIndicator

Displays an indicator for an open item. Renders a <div> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-navigation-menu-item-indicator`	<uid>
`data-state`	"open" \| "closed"
`data-orientation`	The orientation of the item
`data-value`	The value of the item

navigationMenu.content

Contains the popup content for a navigation item. Renders a <div> element.

Name	Description	Required	Default
`value`	`string` The value of the item this content belongs to.	No	-
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-navigation-menu-content`	<uid>
`data-state`	"open" \| "closed"
`data-orientation`	The orientation of the content
`data-value`	The value of the item
`data-nested`	Present when the content is nested within another {{widget}}
`data-has-nested`	Present when the content has nested {{widget}}s

navigationMenu.viewportPositioner

Positions the shared viewport element. Renders a <div> element.

Name	Description	Required	Default
`align`	`Enum\NavigationMenuAlign` Placement of the viewport for CSS variables `--viewport-x` and `--viewport-y`.	No	Center
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-navigation-menu-viewport-positioner`	<uid>
`data-orientation`	The orientation of the viewportpositioner
`data-align`

navigationMenu.viewport

Displays the shared viewport that can host item content. Renders a <div> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-navigation-menu-viewport`	<uid>
`data-state`	"open" \| "closed"
`data-orientation`	The orientation of the viewport
`data-align`
`data-nested`	Present when the viewport is nested within another {{widget}}
`data-has-nested`	Present when the viewport has nested {{widget}}s

navigationMenu.viewportProxy

Provides a proxy element used to size and align the viewport. Renders a <span> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

navigationMenu.arrow

Displays a decorative arrow for the indicator or content. Renders a <div> element.

Name	Description	Required	Default
`attributes`	`array` Additional attributes that should be rendered on the component where ui:attributes is used.	No	[]
`asChild`	`boolean` If true the component uses its child only without the component template. Like Radix UI asChild or Base UI render props.	No	-
`class`	`string` The CSS class(es) to be applied to the component.	No	-

Rendered data attributes

Attribute	Description
`data-navigation-menu-arrow`	<uid>
`data-orientation`	The orientation of the arrow

Machine JavaScript API

Name	Type	Description
`value`	`string \| null`	The current value of the menu
`setValue`	`(value: string) => void`	Sets the value of the menu
`open`	`boolean`	Whether the menu is open
`isViewportRendered`	`boolean`	Whether the viewport is rendered
`getViewportNode`	`() => HTMLElement \| null`	Gets the viewport node element
`orientation`	`Orientation`	The orientation of the menu
`reposition`	`VoidFunction`	Function to reposition the viewport
`getTriggerState`	`(props: ItemProps) => TriggerState`	Returns the state of a specific trigger
`getContentState`	`(props: ContentProps) => ContentState`	Returns the state of a specific content

Accessibility

Key	Description
`ArrowDown`	When focus is on trigger (vertical orientation), moves focus to the next trigger.
`ArrowUp`	When focus is on trigger (vertical orientation), moves focus to the previous trigger.
`ArrowRight`	When focus is on trigger (horizontal orientation), moves focus to the next trigger. When focus is on content, moves focus to the next link.
`ArrowLeft`	When focus is on trigger (horizontal orientation), moves focus to the previous trigger. When focus is on content, moves focus to the previous link.
`Home`	When focus is on trigger, moves focus to the first trigger. When focus is on content, moves focus to the first link.
`End`	When focus is on trigger, moves focus to the last trigger. When focus is on content, moves focus to the last link.

Navigation Menu

Features

Anatomy

Installation

Examples

Add dropdowns to items

Use plain links

Build a mega menu

API Reference

navigationMenu.root

Rendered data attributes

navigationMenu.list

Rendered data attributes

navigationMenu.item

Rendered data attributes

navigationMenu.trigger

Rendered data attributes

navigationMenu.triggerProxy

Rendered data attributes

navigationMenu.link

Rendered data attributes

navigationMenu.indicatorTrack

navigationMenu.indicator

Rendered data attributes

navigationMenu.itemIndicator

Rendered data attributes

navigationMenu.content

Rendered data attributes

navigationMenu.viewportPositioner

Rendered data attributes

navigationMenu.viewport

Rendered data attributes

navigationMenu.viewportProxy

navigationMenu.arrow

Rendered data attributes

Machine JavaScript API

Accessibility