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
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.
<AppBreadcrumbs
values={{
"123": "User"
}}
/>
This will display "User" instead of "123" in the breadcrumb.
Props
The component accepts two optional props:
values
: An object where keys are URL segments and values are custom labels.
- Type:
Record<string, string>
- Default:
{}
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 renderingTrans
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.