Breadcrumb

Name: Passport UI
Author: Praveen Thirumurugan

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

1import { Breadcrumb } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx

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

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗