Skip to main content
The Breadcrumbs component displays a navigational trail showing the user’s location within the site hierarchy. It helps users understand where they are and provides quick navigation to parent pages.

​
Basic Usage

import { Breadcrumbs } from 'reshaped';

function App() {
  return (
    <Breadcrumbs>
      <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/products">Products</Breadcrumbs.Item>
      <Breadcrumbs.Item>Current Page</Breadcrumbs.Item>
    </Breadcrumbs>
  );
}

​
Colors

Breadcrumbs supports two color schemes: 
<Breadcrumbs color="neutral">
  <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
  <Breadcrumbs.Item>Page</Breadcrumbs.Item>
</Breadcrumbs>

<Breadcrumbs color="primary">
  <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
  <Breadcrumbs.Item>Page</Breadcrumbs.Item>
</Breadcrumbs>

​
Custom Separator

Use a custom separator between breadcrumb items: 
<Breadcrumbs separator="/">
  <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/products">Products</Breadcrumbs.Item>
  <Breadcrumbs.Item>Item</Breadcrumbs.Item>
</Breadcrumbs>

​
With Icons

Add icons to breadcrumb items: 
import { Breadcrumbs } from 'reshaped';
import IconHome from '@/icons/Home';
import IconFolder from '@/icons/Folder';

<Breadcrumbs>
  <Breadcrumbs.Item href="/" icon={IconHome}>
    Home
  </Breadcrumbs.Item>
  <Breadcrumbs.Item href="/documents" icon={IconFolder}>
    Documents
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>File.pdf</Breadcrumbs.Item>
</Breadcrumbs>

​
Collapsible Breadcrumbs

Automatically collapse breadcrumbs when there are too many items: 
<Breadcrumbs
  defaultVisibleItems={3}
  expandAriaLabel="Show all breadcrumbs"
>
  <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/level1">Level 1</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/level2">Level 2</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/level3">Level 3</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/level4">Level 4</Breadcrumbs.Item>
  <Breadcrumbs.Item>Current</Breadcrumbs.Item>
</Breadcrumbs>
Disable expansion: 
<Breadcrumbs
  defaultVisibleItems={3}
  disableExpand
>
  {/* Items */}
</Breadcrumbs>

​
Navigation Patterns

​
Basic Navigation

<Breadcrumbs ariaLabel="Breadcrumb navigation">
  <Breadcrumbs.Item href="/">
    Home
  </Breadcrumbs.Item>
  <Breadcrumbs.Item href="/category">
    Category
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    Current Page
  </Breadcrumbs.Item>
</Breadcrumbs>

​
With Click Handlers

<Breadcrumbs>
  <Breadcrumbs.Item onClick={() => navigate('/')}>
    Home
  </Breadcrumbs.Item>
  <Breadcrumbs.Item onClick={() => navigate('/products')}>
    Products
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    Current Item
  </Breadcrumbs.Item>
</Breadcrumbs>

​
Disabled Items

<Breadcrumbs>
  <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
  <Breadcrumbs.Item disabled>Unavailable</Breadcrumbs.Item>
  <Breadcrumbs.Item>Current</Breadcrumbs.Item>
</Breadcrumbs>

​
Props

​
Breadcrumbs

​
color
'neutral' | 'primary'
default:"neutral"
Component color scheme
​
separator
React.ReactNode
Node for defining custom separator between items (default is chevron icon)
​
defaultVisibleItems
number
Number of items to show by default, others will be hidden and can be expanded
​
expandAriaLabel
string
Aria label for the expand button
​
disableExpand
boolean
default:"false"
Turn expand button into static text and disable the expand functionality
​
ariaLabel
string
aria-label attribute for the component
​
className
string
Additional CSS class name
​
attributes
object
Additional HTML attributes
​
children
React.ReactElement | React.ReactElement[]
required
Breadcrumb items

​
Breadcrumbs.Item

​
href
string
URL to navigate to when clicked
​
onClick
(event: React.MouseEvent) => void
Callback when the item is clicked
​
icon
React.ComponentType
SVG component for the icon
​
disabled
boolean
default:"false"
Disable user interaction
​
children
React.ReactNode
Item content

Build docs developers (and LLMs) love

Get started for freeTalk to us