App Breadcrumbs Component in the Next.js Supabase SaaS kit

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:

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.