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.

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

export default function App() {
  return (
    <Provider spritemap="/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