Navigation

Navigation Menu

Preview Navigation Menu, copy setup snippets, review examples, and inspect API exports for @tuturuuu/ui/navigation-menu.

Live preview@tuturuuu/ui/navigation-menuView in docs

Preview

A contained preview using the same shared primitive exported by the package.

Installation

Install the shared UI package, import global styles once, then import the component from its public subpath.

terminal

bun add @tuturuuu/ui

manual step

import '@tuturuuu/ui/globals.css';

manual step

import { NavigationMenu, NavigationMenuList, NavigationMenuItem } from '@tuturuuu/ui/navigation-menu';

Usage

Copy the default usage snippet and adapt labels, state, and event handlers to the product surface.

usage.tsx

import { NavigationMenu, NavigationMenuItem, NavigationMenuList } from '@tuturuuu/ui/navigation-menu';

<NavigationMenu><NavigationMenuList><NavigationMenuItem /></NavigationMenuList></NavigationMenu>

Examples

Examples reuse the registry snippets so the docs stay aligned with the component catalog.

Default

A minimal implementation using the current registry snippet.

navigation-menu.tsx

import { NavigationMenu, NavigationMenuItem, NavigationMenuList } from '@tuturuuu/ui/navigation-menu';

<NavigationMenu><NavigationMenuList><NavigationMenuItem /></NavigationMenuList></NavigationMenu>

Composition

Use the grouped exports when the primitive has slots, triggers, content regions, or providers.

navigation-menu.tsx

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
} from '@tuturuuu/ui/navigation-menu';

Package import

Import through the public package path so workspace and external apps share the same contract.

navigation-menu.tsx

// Public package import
import { NavigationMenu } from '@tuturuuu/ui/navigation-menu';

// Workspace apps should keep importing through the package boundary.

API reference

The public exports currently available from this component entry.

Name	Kind	Description
`NavigationMenu`	Component	NavigationMenu is exported from @tuturuuu/ui/navigation-menu. Inspect the source for component-specific props and composition details.
`NavigationMenuList`	Component	NavigationMenuList is exported from @tuturuuu/ui/navigation-menu. Inspect the source for component-specific props and composition details.
`NavigationMenuItem`	Component	NavigationMenuItem is exported from @tuturuuu/ui/navigation-menu. Inspect the source for component-specific props and composition details.

Customization

Common props, states, and composition points to review before using this component.

ItemsContentViewport