# Navigation

> Navigation menus, breadcrumbs, and pagination components.

*Canonical: https://makerkit.dev/docs/nextjs-prisma/ui-components/navigation*

---

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](./overview) 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.

## Navigation Menu

Horizontal navigation menu with dropdowns.

```typescript
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@kit/ui/navigation-menu';
```

```tsx
<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.

```typescript
import { BorderedNavigationMenu, BorderedNavigationMenuItem } from '@kit/ui/bordered-navigation-menu';
```

```tsx
<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.

## Breadcrumb

Navigation trail showing page hierarchy.

```typescript
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '@kit/ui/breadcrumb';
```

```tsx
<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>
```

### With Next.js Link

```tsx
import Link from 'next/link';

<BreadcrumbLink render={<Link href="/products" />}>
  Products
</BreadcrumbLink>
```

## App Breadcrumbs

Application-specific breadcrumbs with automatic route detection.

```typescript
import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
```

```tsx
<AppBreadcrumbs />
```

Automatically generates breadcrumbs based on current route.

## Pagination

Page navigation controls.

```typescript
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@kit/ui/pagination';
```

```tsx
<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.

```typescript
import MobileNavigationDropdown from '@kit/ui/mobile-navigation-menu';
```

```tsx
<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.

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

---

**Next:** [Dialogs & Overlays →](./dialogs-and-overlays)