Navigation

Navigation menus, breadcrumbs, and pagination components.

Build navigation with NavigationMenu for header dropdowns, BorderedNavigationMenu for tabbed page navigation with active state, Breadcrumb for page hierarchy, and Pagination for paged content. Use MobileNavigationDropdown for responsive mobile menus.

This guide is part of the UI Components documentation.

Navigation components provide wayfinding UI elements that help users understand their location in the app and move between sections, with built-in support for active state highlighting and responsive layouts.

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' },
  ]}
/>

Common Pitfalls

  • Missing Next.js Link integration: Use the render prop for client-side navigation: <BreadcrumbLink render={<Link href="..." />}>.
  • Pagination href mismatch: Ensure pagination hrefs match your actual route structure. Mismatched paths cause full page reloads.
  • NavigationMenu outside viewport: Dropdown content can overflow the viewport. Test at different screen sizes.
  • BorderedNavigationMenu path matching: The component uses exact path matching by default. Nested routes may not highlight correctly.
  • Mobile nav not updating: MobileNavigationDropdown reads path on mount. Ensure it re-renders on route changes.

Frequently Asked Questions

How does BorderedNavigationMenu detect active routes?
It compares the current pathname to each item's path prop. Use exact paths or implement custom matching logic if needed.
Can I use Pagination with Server Components?
Yes. Pagination with href props works in Server Components. For onClick-based pagination, use a Client Component.
How do I add icons to navigation items?
Include the icon inside the link or button: <NavigationMenuLink><Home className='h-4 w-4 mr-2' />Home</NavigationMenuLink>
What's the difference between NavigationMenu and BorderedNavigationMenu?
NavigationMenu is for header dropdowns with flyout menus. BorderedNavigationMenu is for tabbed sub-navigation with underline indicator.

Next: Dialogs & Overlays →