Skip to main content
Fluid Primitives

Navigation Menu

A collection of links and menus for website navigation.

View Sourcefor NavigationMenu componentZag.js Docsfor NavigationMenu component

Features

Installation

typo3 ui:add navigation-menu

Read more about installing Components and Primitives.

Examples

Simple Dropdown

Render navigation items with inline dropdown content.

Links Only

Use the navigation menu as a simple list of links, including a current page link.

With Viewport

Use withViewport="{true}" to render dropdown content inside a shared viewport. This pattern works well for richer header navigation with animated transitions and an indicator.

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.

NameDescriptionRequiredDefault
orientationstring
The orientation of the navigation menu. 		No 
'horizontal'
defaultValuestring
The default value of the navigation menu. Use when you don't want to control the value of the menu. 		No 
''
openDelayinteger
The delay before the menu opens. 		No 
200
closeDelayinteger
The delay before the menu closes. 		No 
300
disableHoverTriggerboolean
Whether to disable the hover trigger. 		No 
-
disableClickTriggerboolean
Whether to disable the click trigger. 		No 
-
disablePointerLeaveCloseboolean
Whether to disable the pointer leave close. 		No 
-

navigationMenu.list

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

navigationMenu.item

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

NameDescriptionRequiredDefault
valuestring
The value of the item. 		Yes 
-
disabledboolean
Whether the item is disabled. 		No 
-

navigationMenu.trigger

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

navigationMenu.triggerProxy

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

navigationMenu.link

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

NameDescriptionRequiredDefault
valuestring
The value of the item this link belongs to. By default this is inherited from the parent navigationMenu.item. 		No 
-
currentboolean
Whether the link is the current page. 		No 
-

navigationMenu.indicatorTrack

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

navigationMenu.indicator

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

navigationMenu.itemIndicator

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

navigationMenu.content

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

NameDescriptionRequiredDefault
valuestring
The value of the item this content belongs to. 		No 
-

navigationMenu.viewportPositioner

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

NameDescriptionRequiredDefault
alignstring
Placement of the viewport for CSS variables `--viewport-x` and `--viewport-y`. 		No 
'center'

navigationMenu.viewport

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

navigationMenu.viewportProxy

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

navigationMenu.arrow

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

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>