---
status: "published"

label: "App Breadcrumbs"
title: "App Breadcrumbs Component in the Next.js Supabase SaaS kit"
description: "Learn how to use the App Breadcrumbs component in the Next.js Supabase SaaS kit"
order: 6
---


The `AppBreadcrumbs` component creates a dynamic breadcrumb navigation based on the current URL path. It's designed to work with Next.js and uses the `usePathname` hook from Next.js for routing information.

## Features

- Automatically generates breadcrumbs from the current URL path
- Supports custom labels for path segments
- Limits the number of displayed breadcrumbs with an ellipsis for long paths
- Internationalization support with the `Trans` component
- Responsive design with different text sizes for mobile and desktop

## Usage

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

function MyPage() {
  return (
    <AppBreadcrumbs
      values={{
        "custom-slug": "Custom Label"
      }}
      maxDepth={4}
    />
  );
}
```

When you have IDs in your URL, you can use the `values` prop to provide custom labels for those segments. For example, if your URL is `/users/123`, you can set `values={{ "123": "User Profile" }}` to display "User Profile" instead of "123" in the breadcrumb.

```tsx
<AppBreadcrumbs
  values={{
    "123": "User"
  }}
/>
```

This will display "User" instead of "123" in the breadcrumb.

## Props

The component accepts two optional props:

1. `values`: An object where keys are URL segments and values are custom labels.
- Type: `Record<string, string>`
- Default: `{}`
2. `maxDepth`: The maximum number of breadcrumb items to display before using an ellipsis.
- Type: `number`
- Default: `6`

## Functionality

- The component splits the current path into segments and creates a breadcrumb item for each.
- If the number of segments exceeds `maxDepth`, it shows an ellipsis (...) to indicate hidden segments.
- The last breadcrumb item is not clickable and represents the current page.
- Custom labels can be provided through the `values` prop.
- For segments without custom labels, it attempts to use an i18n key (`common.routes.[unslugified-path]`). If no translation is found, it falls back to the unslugified path.

## Styling

- The component uses Tailwind CSS classes for styling.
- Breadcrumb items are capitalized.
- On larger screens (lg breakpoint), the text size is slightly smaller.

## Dependencies

This component relies on several other components and utilities:

- Next.js `usePathname` hook
- Custom UI components (Breadcrumb, BreadcrumbItem, etc.) from Shadcn UI
- `If` component for conditional rendering
- `Trans` component for internationalization

This component provides a flexible and easy-to-use solution for adding breadcrumb navigation to your Next.js application. It's particularly useful for sites with deep hierarchical structures or those requiring dynamic breadcrumb generation.