Breadcrumb

View in Lexicon

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

installyarn add @clayui/breadcrumb
versionNPM Version
useimport Breadcrumb from '@clayui/breadcrumb';

Table of Contents

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.

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