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

Usage

Import the component and pass the required props.

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

export default () => (
  <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.

import { Home, BoxCube3D } from "@tailgrids/icons";

<Breadcrumbs
  items={[
    { href: "/", label: "Home", icon: <Home /> },
    { href: "/products", label: "Products", icon: <BoxCube3D /> },
    { href: "/products/laptop", label: "Laptop" }
  ]}
/>;

Divider Types

Use different divider styles between breadcrumb items.

<Breadcrumbs
  dividerType="chevron"
  items={[
    { href: "/", label: "Home" },
    { href: "/docs", label: "Documentation" }
  ]}
/>

<Breadcrumbs
  dividerType="dot"
  items={[
    { href: "/", label: "Home" },
    { href: "/blog", label: "Blog" }
  ]}
/>

<Breadcrumbs
  dividerType="slash"
  items={[
    { href: "/", label: "Home" },
    { href: "/about", label: "About" }
  ]}
/>

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

Notes

• The last item in the breadcrumb trail is automatically styled with darker text to indicate the current page
• Icons are automatically sized to 16px (1rem) via the [&>svg]:size-4 class
• The component uses contents display on list items to support flexible layouts