Breadcrumb

yarn add @clayui/breadcrumb

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

React Component
CSS / Markup

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 ClayBreadcrumb from '@clayui/breadcrumb';

import ClayBreadcrumb from '@clayui/breadcrumb';

const Component = () => {
  return (
    <ClayBreadcrumb
      ellipsisBuffer={1}
      items={[
        {
          active: true,
          href: "#1",
          label: "Home"
        },
        {
          href: "#2",
          label: "About"
        },
        {
          href: "#3",
          label: "Contact"
        },
        {
          href: "#4",
          label: "Projects"
        },
        {
          href: "#5",
          label: "Five"
        }
      ]}
      spritemap={spritemap}
    />
  );
};

render(<Component />);

const Component = () => {
  return (
    <ClayBreadcrumb
      ellipsisBuffer={1}
      items={[
        {
          active: true,
          href: "#1",
          label: "Home"
        },
        {
          href: "#2",
          label: "About"
        },
        {
          href: "#3",
          label: "Contact"
        },
        {
          href: "#4",
          label: "Projects"
        },
        {
          href: "#5",
          label: "Five"
        }
      ]}
      spritemap={spritemap}
    />
  );
};
render(<Component />);

API

Property	Type	Required	Default	Description
ellipsisBuffer	number	false	1	The number of Breadcrumb Items to show on each side of the active Breadcrumb Item before using an ellipsis dropdown.
ellipsisProps	Object	false	{}	Use this property for defining `otherProps` that will be passed to ellipsis dropdown trigger.
items	Array<TItem>	true		Property to define Breadcrumb's items.
spritemap	string	false		Path to the location of the spritemap resource.

A navigation aid for your site, provide a quick way to jump back to previously viewed pages or sections.

Use <span class="breadcrumb-text-truncate"></span> inside breadcrumb links to truncate text based on a max-width.

Breadcrumb will use $breadcrumb-divider-svg-icon by default, set $breadcrumb-divider-svg-icon: none; if you wish to use the UTF-8 charset or third-party icon font.

Don't forget to check WAI-ARIA accessibility pratices for alerts when writting your markup.

<ol class="breadcrumb">
	<li class="breadcrumb-item">
		<a class="breadcrumb-link" href="#1" title="Home">
			<span class="breadcrumb-text-truncate">Home</span>
		</a>
	</li>
	<li class="breadcrumb-item">
		<a class="breadcrumb-link" href="#1" title="Components">
			<span class="breadcrumb-text-truncate">Components</span>
		</a>
	</li>
	<li class="breadcrumb-item">
		<a
			class="breadcrumb-link"
			href="#1"
			title="Breadcrumbs and Paginations"
		>
			<span class="breadcrumb-text-truncate"
				>Breadcrumbs and Paginations</span
			>
		</a>
	</li>
	<li class="breadcrumb-item">
		<a class="breadcrumb-link" href="#1" title="Page">
			<span class="breadcrumb-text-truncate">Page</span>
		</a>
	</li>
	<li class="breadcrumb-item">
		<a
			class="breadcrumb-link"
			href="#1"
			title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual"
		>
			<span class="breadcrumb-text-truncate"
				>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span
			>
		</a>
	</li>
	<li class="active breadcrumb-item">
		<span class="breadcrumb-text-truncate" title="Active">Active</span>
	</li>
</ol>

<ol class="breadcrumb">
	<li class="breadcrumb-item dropdown">
		<a
			aria-expanded="false"
			aria-haspopup="true"
			class="breadcrumb-link dropdown-toggle"
			data-toggle="dropdown"
			href=""
			id="breadcrumb2Dropdown1"
			role="button"
		>
			<svg
				class="lexicon-icon lexicon-icon-ellipsis-h"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#ellipsis-h"></use>
			</svg>
			<svg
				class="lexicon-icon lexicon-icon-caret-bottom"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-bottom"></use>
			</svg>
		</a>
		<ul aria-labelledby="breadcrumb2Dropdown1" class="dropdown-menu">
			<li><a class="dropdown-item" href="#1">Home</a></li>
			<li><a class="dropdown-item" href="#1">Components</a></li>
			<li>
				<a class="dropdown-item" href="#1"
					>Breadcrumbs and Paginations</a
				>
			</li>
		</ul>
	</li>
	<li class="breadcrumb-item">
		<a class="breadcrumb-link" href="#1" title="Page">
			<span class="breadcrumb-text-truncate">Page</span>
		</a>
	</li>
	<li class="breadcrumb-item">
		<a
			class="breadcrumb-link"
			href="#1"
			title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual"
		>
			<span class="breadcrumb-text-truncate"
				>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span
			>
		</a>
	</li>
	<li class="active breadcrumb-item">
		<span class="breadcrumb-text-truncate" title="Active">Active</span>
	</li>
</ol>

<ol class="breadcrumb">
	<li class="breadcrumb-item dropdown">
		<a
			aria-expanded="false"
			aria-haspopup="true"
			class="breadcrumb-link dropdown-toggle"
			data-toggle="dropdown"
			href="#1"
			id="breadcrumb3Dropdown1"
			role="button"
			title="Dropdown"
		>
			<span class="breadcrumb-text-truncate">Dropdown</span>
			<svg
				class="lexicon-icon lexicon-icon-caret-bottom"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-bottom"></use>
			</svg>
		</a>
		<ul aria-labelledby="breadcrumb3Dropdown1" class="dropdown-menu">
			<li><a class="dropdown-item" href="#1">Home</a></li>
			<li><a class="dropdown-item" href="#1">Components</a></li>
			<li>
				<a class="dropdown-item" href="#1"
					>Breadcrumbs and Paginations</a
				>
			</li>
		</ul>
	</li>
	<li class="breadcrumb-item dropdown">
		<button
			aria-expanded="false"
			aria-haspopup="true"
			class="breadcrumb-link btn btn-unstyled dropdown-toggle"
			data-toggle="dropdown"
			id="breadcrumb3Dropdown2"
			title="Dropdown"
			type="button"
		>
			<span class="breadcrumb-text-truncate">Dropdown</span>
			<svg
				class="lexicon-icon lexicon-icon-caret-bottom"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-bottom"></use>
			</svg>
		</button>
		<ul aria-labelledby="breadcrumb3Dropdown2" class="dropdown-menu">
			<li><a class="dropdown-item" href="#1">Home</a></li>
			<li><a class="dropdown-item" href="#1">Components</a></li>
			<li>
				<a class="dropdown-item" href="#1"
					>Breadcrumbs and Paginations</a
				>
			</li>
		</ul>
	</li>
	<li class="breadcrumb-item dropdown">
		<button
			aria-expanded="false"
			aria-haspopup="true"
			class="breadcrumb-link btn btn-unstyled dropdown-toggle"
			data-toggle="dropdown"
			id="breadcrumb2Dropdown2"
			type="button"
		>
			<svg
				class="lexicon-icon lexicon-icon-ellipsis-h"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#ellipsis-h"></use>
			</svg>
			<svg
				class="lexicon-icon lexicon-icon-caret-bottom"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-bottom"></use>
			</svg>
		</button>
		<ul aria-labelledby="breadcrumb2Dropdown2" class="dropdown-menu">
			<li><a class="dropdown-item" href="#1">Home</a></li>
			<li><a class="dropdown-item" href="#1">Components</a></li>
			<li>
				<a class="dropdown-item" href="#1"
					>Breadcrumbs and Paginations</a
				>
			</li>
		</ul>
	</li>
	<li class="breadcrumb-item">
		<a class="breadcrumb-link" href="#1" title="Page">
			<span class="breadcrumb-text-truncate">Page</span>
		</a>
	</li>
	<li class="breadcrumb-item">
		<a
			class="breadcrumb-link"
			href="#1"
			title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual"
		>
			<span class="breadcrumb-text-truncate"
				>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span
			>
		</a>
	</li>
	<li class="active breadcrumb-item">
		<span class="breadcrumb-text-truncate" title="Active">Active</span>
	</li>
</ol>