Breadcrumbs

Displays the path to the current page.

BreadcrumbBreadcrumb

Slots

children

Item2 props

Divider0 props

Item2 props

Installation

Usage

Example

Source Code

"use client";

import React from "react";
import { Breadcrumbs } from "@/ui/components/Breadcrumbs";

function BreadcrumbsExample() {
  return (
    <Breadcrumbs>
      <Breadcrumbs.Item>Breadcrumb</Breadcrumbs.Item>
      <Breadcrumbs.Divider />
      <Breadcrumbs.Item active={true}>Breadcrumb</Breadcrumbs.Item>
    </Breadcrumbs>
  );
}

export default BreadcrumbsExample;

Props

Breadcrumbs Props

Item Props

Divider Props

Prop

Type

Default value

Notes

children

React.ReactNode

—

This is a <div> component. It accepts onClick and className props.

Examples

Active

Use the active prop to set the active state of the tab. This should usually be the last item in the list.


View code

Using links

Wrap the Breadcrumbs.Item in a link component to make it a navigatable. This can be an anchor tag or a Link component from a router library like React Router or NextJS.


View code

You can also alternatively use onClick for navigation.


View code

Built in Subframe

ProductComponents Theme Templates Docs Pricing

CompanyBlog LinkedIn X / Twitter Github

ResourcesSlack community Help center For agencies For design systems Subframe vs Figma