Skip to main contentSkip to sidebarSkip to headerSkip to footer

Breadcrumb

A navigation aid that shows the user’s location in a site or app.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
import { Breadcrumb } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Breadcrumb
  path={[
    { href: "/", label: "Home" },
    { href: "/docs", label: "Documentation" },
    { href: "/docs/components", label: "Components" },
    { href: "/docs/components/breadcrumb", label: "Breadcrumb" },
  ]}
/>
 
{/* With back button */}
<Breadcrumb
  back={{ href: "/docs" }}
  path={[
    { href: "/", label: "Home" },
    { href: "/docs", label: "Documentation" },
    { href: "/docs/components", label: "Components" },
  ]}
/>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗