App Breadcrumbs

Learn how to use the 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: {}
  1. 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.


Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS