Bread Crumbs

Guide your users through your application's navigation hierarchy with rothko ui's Breadcrumbs component. Display a clear and intuitive path, allowing users to easily backtrack or explore different sections, enhancing the overall navigation experience.

View Source

Import

Global
Single

import { BreadCrumbs, BreadCrumbItem } from '@rothko-ui/react';

Usage

Example
Code

Props

BreadCrumbs Props

Name	Type	Default	Description
Name children	Type `ReactNode`	Default	Description Breadcrumb items to be displayed.
Name className	Type `string`	Default	Description CSS class name(s).
Name style	Type `React.CSSProperties`	Default	Description Inline style for the breadcrumbs.

BreadCrumbItem Props

Name	Type	Default	Description
Name className	Type `string`	Default	Description CSS class name(s).
Name onClick	Type `() => void`	Default	Description onClick handler for the breadcrumb item.
Name style	Type `CSSProperties`	Default	Description Inline style for the breadcrumb item.
Name target	Type `string`	Default	Description The target of the breadcrumb item link.
Name to	Type `string`	Default	Description The URL to navigate to when the breadcrumb item is clicked.