# Navigation

> Navigation menus, breadcrumbs, and pagination components.

*Canonical: https://makerkit.dev/docs/tanstack-drizzle/ui-components/navigation*

---

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

## 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 TanStack Router Link

Use the Base UI `render` prop to render the breadcrumb as a router `Link`. Pass the destination via `to` (and `params` for dynamic segments):

```tsx
import { Link } from '@tanstack/react-router';

<BreadcrumbLink render={<Link to="/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' },
  ]}
/>
```

---

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