Breadcrumb

Displays the user's current page hierarchy, enhancing navigation and providing context. It is typically placed at the top of a page.

Usage

Basic usage example to quickly understand how the Breadcrumb component works. Demonstrates the structure, interaction, and default behavior for seamless navigation design.

import React from "react";
import Link from "next/link";
import { Breadcrumb } from "@/ui/breadcrumb";

function renamed(str: string) {
  const words = str.split("-");
  return words.map(word => word.charAt(0).toUpperCase() + str.slice(1).toLowerCase()).join(" ");
}

// Declarative Props
export function BreadcrumbDeclarativeUsageDemo() {
  const pathname = "docs/web/components/breadcrumb";
  const paths = pathname.split("/").filter(Boolean);
  const active = (index: number) => index === paths.length - 1 || undefined;
  const links = (index: number) => (active(index) ? "" : `/${paths.slice(0, index + 1).join("/")}`);
  const items = paths.map((path, index) => (
    <Link key={path} href={links(index)} aria-disabled={active(index)}>
      {renamed(path)}
    </Link>
  ));
  return <Breadcrumb items={items} />;
}

// Compound Components
export function BreadcrumbCompoundUsageDemo() {
  const pathname = "docs/web/components/breadcrumb";
  const paths = pathname.split("/").filter(Boolean);
  const active = (index: number) => index === paths.length - 1 || undefined;
  const links = (index: number) => (active(index) ? "" : `/${paths.slice(0, index + 1).join("/")}`);

  return (
    <Breadcrumb>
      {paths.map((path, index) => (
        <React.Fragment key={path}>
          <Breadcrumb.Item>
            <Link href={links(index)} aria-disabled={active(index)}>
              {renamed(path)}
            </Link>
          </Breadcrumb.Item>
          {index < paths.length - 1 && <Breadcrumb.Separator separator="⇄" />}
        </React.Fragment>
      ))}
    </Breadcrumb>
  );
}

Properties

Interactive configurator to explore and customize the available options for the Breadcrumb component. Adjust separators, spacing, visual appearance, and responsiveness in real-time.

Gap

Color

Overflow wrap

Example showcasing how to customize the separator between breadcrumb items. The separator can be a simple character (e.g., /, >) or a custom React element such as an icon or styled component, allowing greater flexibility in visual presentation.

"use client";
import React from "react";
import Link from "next/link";
import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from "@/ui/breadcrumb";

function renamed(str: string) {
  const words = str.split("-");
  return words.map(word => word.charAt(0).toUpperCase() + str.slice(1).toLowerCase()).join(" ");
}

// Declarative Props
export function BreadcrumbChangeSeparatorDeclarativeDemo() {
  const pathname = "docs/web/components/breadcrumb";
  const paths = pathname.split("/").filter(Boolean);
  const active = (index: number) => index === paths.length - 1 || undefined;
  const links = (index: number) => (active(index) ? "" : `/${paths.slice(0, index + 1).join("/")}`);
  const separator = (index: number) => (index % 2 === 0 ? "+" : "-");

  const items = paths.map((path, index) => (
    <Link key={path} href={links(index)} aria-disabled={active(index)}>
      {renamed(path)}
    </Link>
  ));

  return <Breadcrumb gap={16} items={items} overflowWrap separator={separator} />;
}

// Independent Components
export function BreadcrumbChangeSeparatorIndependentDemo() {
  const pathname = "docs/web/components/breadcrumb";
  const paths = pathname.split("/").filter(Boolean);
  const active = (index: number) => index === paths.length - 1 || undefined;
  const links = (index: number) => (active(index) ? "" : `/${paths.slice(0, index + 1).join("/")}`);

  return (
    <Breadcrumb gap={14} overflowWrap>
      {paths.map((path, index) => (
        <React.Fragment key={path}>
          <BreadcrumbItem>
            <Link href={links(index)} aria-disabled={active(index)}>
              {renamed(path)}
            </Link>
          </BreadcrumbItem>
          {index < paths.length - 1 && index % 2 === 0 ? <BreadcrumbSeparator separator="+" /> : <BreadcrumbSeparator separator="-" />}
        </React.Fragment>
      ))}
    </Breadcrumb>
  );
}

API References

Styles API

type Selector = "root" | "breadcrumb" | "separator" | "wrap" | "ellipsis";

Styles API	Type	Default	Annotation
unstyled`?`	`Partial<Record<Selector, boolean>>`	`false`	if `true`, default styles will be removed
className`?`	`string`	`undefined`	pass to root component `<div>`
classNames`?`	`Partial<Record<Selector, string>>`	`undefined`
style`?`	`CSSProperties`	`undefined`	pass to root component `<div>`
styles`?`	`Partial<Record<Selector, CSSProperties>>`	`undefined`

Props API

Props API	Type	Default	Annotation
children`?`	`React.ReactNode`	`undefined`	React nodes that should be separated with `separator`
items`?`	`React.ReactNode[]`	`undefined`	Filling the childrens array section briefly
separator`?`	`React.ReactNode`	`/`	Separator between children
gap`?`	`number \| string`	`12px`	Controls spacing between separator and breadcrumb

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

breadcrumb.tsx