Breadcrumbs

React Breadcrumbs components show the current page’s location within a site hierarchy. They help users understand where they are and navigate back to parent pages.

This Breadcrumbs component is built with React and styled using Tailwind CSS, giving developers control over layout, separators, and icons.

Installation

npx @tailgrids/cli add breadcrumbs

Usage

Import the component and pass the required props.

import { Breadcrumbs } from "@/registry/core/breadcrumbs";

export const BreadcrumbsExample = () => (
  <Breadcrumbs
    items={[
      { href: "/", label: "Home" },
      { href: "/products", label: "Products" },
      { href: "/products/laptop", label: "Laptop" }
    ]}
  />
);

Examples

With Icons

Add icons to breadcrumb items to improve visual context.

Note: Icons are automatically sized to 16px (1rem) via the [&>svg]:size-4 class.

Divider Types

Use different divider styles between breadcrumb items using the dividerType prop.

Note: The last item in the breadcrumb trail is automatically styled with darker text to indicate the current page.

API Reference

Breadcrumbs

BreadcrumbItem

Accessibility

• Uses semantic <ol> and <li> elements for navigation
• The last item is visually distinguished with darker text color
• Icons inherit the current text color for consistent styling
• All links support keyboard navigation