Navigation

Navigation menus, breadcrumbs, and pagination components.

Navigation components for building menus, breadcrumbs, and page controls.

Horizontal navigation menu with dropdowns.

import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@kit/ui/navigation-menu';
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/products/a">Product A</NavigationMenuLink>
        <NavigationMenuLink href="/products/b">Product B</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/about">About</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Bordered Navigation Menu

Tabbed navigation with underline indicator for active route.

import { BorderedNavigationMenu, BorderedNavigationMenuItem } from '@kit/ui/bordered-navigation-menu';
<BorderedNavigationMenu>
  <BorderedNavigationMenuItem
    path="/dashboard"
    label="Dashboard"
  />
  <BorderedNavigationMenuItem
    path="/settings"
    label="Settings"
  />
  <BorderedNavigationMenuItem
    path="/billing"
    label="Billing"
  />
</BorderedNavigationMenu>

Automatically highlights active route based on current pathname.

Navigation trail showing page hierarchy.

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '@kit/ui/breadcrumb';
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/products">Products</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
import Link from 'next/link';
<BreadcrumbLink render={<Link href="/products" />}>
  Products
</BreadcrumbLink>

App Breadcrumbs

Application-specific breadcrumbs with automatic route detection.

import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
<AppBreadcrumbs />

Automatically generates breadcrumbs based on current route.

Pagination

Page navigation controls.

import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@kit/ui/pagination';
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="/page/1" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/page/1">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/page/2" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="/page/3">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="/page/3" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Mobile Navigation Dropdown

Mobile navigation dropdown selector with current page indicator.

import MobileNavigationDropdown from '@kit/ui/mobile-navigation-menu';
<MobileNavigationDropdown
  links={[
    { path: '/dashboard', label: 'Dashboard' },
    { path: '/settings', label: 'Settings' },
    { path: '/billing', label: 'Billing' },
  ]}
/>

Next: Dialogs & Overlays →