🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Breadcrumb

Breadcrumb is a navigation component that shows the user's current location within a hierarchical structure.

Breadcrumbs provide a trail of links that represent the path from the root to the current page, helping users understand where they are in the application's hierarchy and allowing them to navigate back to parent pages quickly. They're particularly useful in applications with deep navigation structures, e-commerce sites with category hierarchies, or documentation sites with nested content. Breadcrumbs improve wayfinding and reduce the number of actions needed to navigate to higher-level pages.

Use breadcrumbs on pages that are several levels deep in a hierarchy, but avoid them on flat or single-level structures where they provide no value. Breadcrumbs should complement, not replace, primary navigation and should accurately reflect the site's information architecture. Keep breadcrumb labels concise and consider truncating very long paths with ellipsis to maintain clean layouts.

Example

"use client"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@strongtie/design-system/breadcrumb"

export function BreadcrumbDefault() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Installation


npm install @strongtie/design-system

import { Breadcrumb } from "@strongtie/design-system/breadcrumb"

Components

This module exports the following components:

Breadcrumb
BreadcrumbList
BreadcrumbItem
BreadcrumbLink
BreadcrumbPage
BreadcrumbSeparator
BreadcrumbEllipsis

Props

All components accept standard HTML attributes and React props.

Examples

"use client"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@strongtie/design-system/breadcrumb"

export function BreadcrumbDefault() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Custom Separator

"use client"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@strongtie/design-system/breadcrumb"
import { LuSlash } from "react-icons/lu"

export function BreadcrumbCustomSeparator() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <LuSlash />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <LuSlash />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

With Ellipsis

"use client"

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@strongtie/design-system/breadcrumb"

export function BreadcrumbWithEllipsis() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

breadcrumb
breadcrumb-ellipsis
breadcrumb-item
breadcrumb-link
breadcrumb-list
breadcrumb-page
breadcrumb-separator

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Badge Button Group

On This Page

Example Installation Components Props Examples Custom Separator With Ellipsis Styling Classes Accessibility

Contribute