Header Navigation Base

Flexible, multi-level header navigation component with support for dropdown menus and custom trailing content.

Basic Navigation

A simple header navigation with top-level items and one dropdown menu.

import { HeaderNavigationBase } from "@/components/ui/navigation/header-navigation";

<HeaderNavigationBase
  items={[
    { label: "Home", href: "/" },
    {
      label: "Dashboard",
      href: "/dashboard",
      items: [
        { label: "Overview", href: "#", current: true },
        { label: "Notifications", href: "#" },
        { label: "Analytics", href: "#" },
        { label: "Saved reports", href: "#" },
        { label: "Scheduled reports", href: "#" },
        { label: "User reports", href: "#" },
      ],
    },
    { label: "Projects", href: "/projects" },
    { label: "Tasks", href: "/tasks" },
    { label: "Reporting", href: "/reporting" },
    { label: "Users", href: "/users" },
  ]}
/>

Dual-Tier Navigation with Actions

The navigation can include an action button or any custom trailing element.

import { Zap } from "@untitled-ui/icons-react";
import { HeaderNavigationBase } from "@/components/ui/navigation/header-navigation";
import { Button } from "@/components/ui/button";

<HeaderNavigationBase
  items={[
    { label: "Home", href: "/" },
    {
      label: "Dashboard",
      href: "/dashboard",
      current: true,
      items: [
        { label: "Overview", href: "#", current: true },
        { label: "Notifications", href: "#" },
        { label: "Analytics", href: "#" },
        { label: "Saved reports", href: "#" },
        { label: "Scheduled reports", href: "#" },
        { label: "User reports", href: "#" },
      ],
    },
    { label: "Projects", href: "/projects" },
    { label: "Tasks", href: "/tasks" },
    { label: "Reporting", href: "/reporting" },
    { label: "Users", href: "/users" },
  ]}
  trailingContent={
    <Button leftIcon={Zap} variant="secondary" size="sm">
      Upgrade now
    </Button>
  }
/>

Dropdown Navigation Header

A comprehensive header component featuring multi-level dropdowns for desktop and a full-screen drawer for mobile, using custom `NavigationMenu` and `Dialog` patterns.

Kaapi

Log inSign up

import { HeaderNavigationMenu } from "@/components/ui/navigation/header-navigation;
const headerNavMenuItems: HeaderNavItem[] = [
        { label: "Products", href: "/products", menu: <DropdownMenuSimple /> },
        { label: "Services", href: "/Services", menu: <DropdownMenuSimple /> },
        { label: "Pricing", href: "/pricing" },
        { label: "Resources", href: "/resources", menu: <DropdownMenuSimple /> },
        { label: "About", href: "/about" },
];
const footerNavMenuItems: HeaderNavItem[] = [
        { label: "About us", href: "/" },
        { label: "Press", href: "/products" },
        { label: "Careers", href: "/resources" },
        { label: "Legal", href: "/pricing" },
        { label: "Support", href: "/pricing" },
        { label: "Contact", href: "/pricing" },
        { label: "Sitemap", href: "/pricing" },
        { label: "Cookie settings", href: "/pricing" },
];

<HeaderNavigationMenu items={headerNavMenuItems} footerItems={footerNavMenuItems} viewport={false} />

API Reference

Props	Type	Default	Description
items	{ label: string; href?: string; current?: boolean; items?: Item[] }[]	-	Defines the main navigation structure. Each item can have nested subitems.
trailingContent?	ReactNode	-	Optional element displayed at the end of the header (e.g., button or avatar).
className?	string	-	Additional classes for custom styling.