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

Collapsed
Expanded

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

Use <span className="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.

Collapsed

<nav aria-label="Breadcrumb" class="breadcrumb-bar">
	<button
		class="breadcrumb-toggle btn btn-monospaced btn-xs"
		type="button"
		aria-expanded="false"
		aria-label="See full nested"
		title="See full nested"
	>
		<svg
			className="lexicon-icon lexicon-icon-angle-double-right"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#angle-double-right"></use>
		</svg>
	</button>
	<ol className="breadcrumb">
		<li className="breadcrumb-item">
			<a
				className="breadcrumb-link"
				href="#1"
				title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual"
			>
				<span className="breadcrumb-text-truncate"
					>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span
				>
			</a>
		</li>
		<li className="active breadcrumb-item">
			<span className="breadcrumb-text-truncate" title="Active"
				>Active</span
			>
		</li>
	</ol>
</nav>

Expanded

<nav aria-label="Breadcrumb" class="breadcrumb-bar">
	<button
		class="breadcrumb-toggle btn btn-monospaced btn-xs"
		type="button"
		aria-expanded="true"
		aria-label="See full nested"
		title="See full nested"
	>
		<svg
			className="lexicon-icon lexicon-icon-angle-double-left"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#angle-double-left"></use>
		</svg>
	</button>
	<ol className="breadcrumb">
		<li className="breadcrumb-item">
			<a className="breadcrumb-link" href="#1" title="Home">
				<span className="breadcrumb-text-truncate">Home</span>
			</a>
		</li>
		<li className="breadcrumb-item">
			<a className="breadcrumb-link" href="#1" title="Components">
				<span className="breadcrumb-text-truncate">Components</span>
			</a>
		</li>
		<li className="breadcrumb-item">
			<a
				className="breadcrumb-link"
				href="#1"
				title="Breadcrumbs and Paginations"
			>
				<span className="breadcrumb-text-truncate">
					Breadcrumbs and Paginations
				</span>
			</a>
		</li>
		<li className="breadcrumb-item">
			<a className="breadcrumb-link" href="#1" title="Page">
				<span className="breadcrumb-text-truncate">Page</span>
			</a>
		</li>
		<li className="breadcrumb-item">
			<a
				className="breadcrumb-link"
				href="#1"
				title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual"
			>
				<span className="breadcrumb-text-truncate">
					ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
				</span>
			</a>
		</li>
		<li className="active breadcrumb-item">
			<span className="breadcrumb-text-truncate" title="Active">
				Active
			</span>
		</li>
	</ol>
</nav>

Edit this page on GitHub

Contributors

Patrick Yeo, Matuzalém Teles

Last edited March 21, 2025 at 5:09:21 PM

Table of Contents

Collapsed
Expanded