7ebff31475
Version 3 of the kit: - Radix UI replaced with Base UI (using the Shadcn UI patterns) - next-intl replaces react-i18next - enhanceAction deprecated; usage moved to next-safe-action - main layout now wrapped with [locale] path segment - Teams only mode - Layout updates - Zod v4 - Next.js 16.2 - Typescript 6 - All other dependencies updated - Removed deprecated Edge CSRF - Dynamic Github Action runner
84 lines
2.8 KiB
Plaintext
84 lines
2.8 KiB
Plaintext
---
|
|
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. |