Breadcrumbs

Displays the path to the current page.

BreadcrumbBreadcrumb

Properties

No properties to configure

Example

Source Code

Installation

"use client";

import React from "react";
import { Breadcrumbs } from "@/subframe/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

Item

Divider

Prop

Type

Default

Additional info

children

React.ReactNode

—

This component is a <div>. Props like onClick and className will continue to work here.

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 Installation Quick start Pricing

CompanyBlog LinkedIn X / Twitter Github

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