NOCTA UI

Navigation Menu

A hover-driven navigation bar with animated panels that surface nested content and quick actions

Installation

Install the Navigation Menu component with the nocta-ui CLI:

npx @nocta-ui/cli add navigation-menu

Import the primitives you need for your navigation structure:

import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuGroup,
  NavigationMenuLink,
} from '@/components/ui/navigation-menu';

Example

Default Navigation Menu

Hover or focus an item to preview its nested content.

API Reference

NavigationMenu

Prop

Type

NavigationMenuItem

Prop

Type

NavigationMenuLink

Prop

Type

NavigationMenuGroup

Prop

Type

Menubar

A top-level application menubar with grouped actions, submenus, and full keyboard navigation

Pagination

Navigate through paged data sets with previous, next and numbered controls.

On this page

Installation
Example
Default Navigation Menu
API Reference
NavigationMenu
NavigationMenuItem
NavigationMenuLink
NavigationMenuGroup