Breadcrumb

Breadcrumb is a secondary navigation pattern that identifies the page position inside a hierarchy.

install	yarn add @clayui/breadcrumb
version
use	`import Breadcrumb from '@clayui/breadcrumb';`

Table of Contents

Example
API Reference

Example

Breadcrumbs are a navigation aid for your site, use them when you need to provide a quick way to jump back to previously viewed pages or sections.

Open Sandbox

import {Provider} from '@clayui/core';
import Breadcrumb from '@clayui/breadcrumb';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Breadcrumb
					items={[
						{
							href: '#1',
							label: 'Home',
						},
						{
							href: '#2',
							label: 'About',
						},
						{
							href: '#3',
							label: 'Contact',
						},
						{
							href: '#4',
							label: 'Projects',
						},
						{
							active: true,
							href: '#5',
							label: 'Five',
						},
					]}
				/>
			</div>
		</Provider>
	);
}

API Reference

({ ariaLabels, ellipsisBuffer, ellipsisProps, className, items, spritemap, ...otherProps }: IProps) => JSX.Element

Parameters

Properties

ariaLabels

{ breadcrumb: string; open: string; close: string; } | undefined= {"breadcrumb":"Breadcrumb","close":"Partially nest breadcrumbs","open":"See full nested"}

Defines the aria label of component elements.

Deprecated

ellipsisBuffer

number | undefined= 1

The number of Breadcrumb Items to show on each side of the active Breadcrumb Item before using an ellipsis dropdown.

Deprecated

ellipsisProps

Object | undefined= {}

Use this property for defining otherProps that will be passed to ellipsis dropdown trigger.

items *

Array<IItem>

Property to define Breadcrumb's items.

spritemap

string | undefined

Path to the location of the spritemap resource.

Returns

Element

Item

({ active, href, label, onClick, ...otherProps }: IItem) => JSX.Element

Parameters

Properties

active

boolean | undefined

Flag to indicate if the Breadcrumb item is active or not.

href

string | undefined

This value is used to be the target of the link.

label *

string

Label of the Breadcrumb item

onClick

((event: React.SyntheticEvent) => void) | undefined

Callback for when a Breadcrumb item is clicked.

Returns

Element

Edit this page on GitHub

Contributors

Matuzalém Teles, Diego Nascimento, Bryce Osterhaus, Krešimir Čoko

Last edited May 9, 2025 at 6:15:38 AM

Table of Contents

Example
API Reference