Breadcrumbs

Breadcrumbs are a navigation system used to show a user's location in a site or app.

Default

The default form of breadcrumbs.

import React from 'react';

import Breadcrumbs from '@atlaskit/breadcrumbs/breadcrumbs';
import { BreadcrumbsCurrentItem } from '@atlaskit/breadcrumbs/breadcrumbs-current-item';
import { BreadcrumbsItem } from '@atlaskit/breadcrumbs/breadcrumbs-item';

const BreadcrumbsDefaultExample = (): React.JSX.Element => {
	return (
		<Breadcrumbs>
			<BreadcrumbsItem href="/item" text="Item 1" />
			<BreadcrumbsItem href="/item" text="Item 2" />
			<BreadcrumbsItem href="/item" text="Item 3" />
			<BreadcrumbsItem href="/item" text="Item 4" />
			<BreadcrumbsItem href="/item" text="Item 5" />
			<BreadcrumbsItem href="/item" text="Item 6" />
			<BreadcrumbsItem href="/item" text="Item 7" />
			<BreadcrumbsCurrentItem href="/item" text="Item 8" />
		</Breadcrumbs>
	);
};

export default BreadcrumbsDefaultExample;

Long breadcrumbs

When a breadcrumb contains more than eight items, the breadcrumb auto-collapses and uses ellipses to indicate more information. The first and last items are shown by default. Users expand the breadcrumb by selecting the ellipsis.

import React from 'react';

import Breadcrumbs, { BreadcrumbsItem } from '@atlaskit/breadcrumbs';
import { BreadcrumbsCurrentItem } from '@atlaskit/breadcrumbs/breadcrumbs-current-item';

const BreadcrumbsLongExample = (): React.JSX.Element => {
	return (
		<Breadcrumbs>
			<BreadcrumbsItem href="/item" text="Item 1" />
			<BreadcrumbsItem href="/item" text="Item 2" />
			<BreadcrumbsItem href="/item" text="Item 3" />
			<BreadcrumbsItem href="/item" text="Item 4" />
			<BreadcrumbsItem href="/item" text="Item 5" />
			<BreadcrumbsItem href="/item" text="Item 6" />
			<BreadcrumbsItem href="/item" text="Item 7" />
			<BreadcrumbsItem href="/item" text="Item 8" />
			<BreadcrumbsItem href="/item" text="Item 9" />
			<BreadcrumbsCurrentItem href="/item" text="Item 10" />
		</Breadcrumbs>
	);
};

export default BreadcrumbsLongExample;

Max items

You can customise the maximum number of breadcrumbs using the maxItems prop. When there are more than the maximum number of nested links, the breadcrumb auto-collapses with an ellipses in between the items. Select the ellipses to reveal the hidden items.

import React from 'react';

import Breadcrumbs, { BreadcrumbsItem } from '@atlaskit/breadcrumbs';
import { BreadcrumbsCurrentItem } from '@atlaskit/breadcrumbs/breadcrumbs-current-item';

const BreadcrumbsMaxItemsExample = (): React.JSX.Element => {
	return (
		<Breadcrumbs maxItems={3}>
			<BreadcrumbsItem href="/item" text="Item 1" />
			<BreadcrumbsItem href="/item" text="Item 2" />
			<BreadcrumbsItem href="/item" text="Item 3" />
			<BreadcrumbsItem href="/item" text="Item 4" />
			<BreadcrumbsItem href="/item" text="Item 5" />
			<BreadcrumbsCurrentItem href="/item" text="Item 6" />
		</Breadcrumbs>
	);
};

export default BreadcrumbsMaxItemsExample;

Expanded overflow

When expanded, breadcrumbs that exceed the page width will overflow to the next line.

import React from 'react';

import Breadcrumbs, { BreadcrumbsItem } from '@atlaskit/breadcrumbs';
import { BreadcrumbsCurrentItem } from '@atlaskit/breadcrumbs/breadcrumbs-current-item';

const BreadcrumbsExpandedExample = (): React.JSX.Element => {
	return (
		<div
			style={{
				maxWidth: '500px',
			}}
		>
			<Breadcrumbs maxItems={5}>
				<BreadcrumbsItem href="/item" text="Item" />
				<BreadcrumbsItem href="/item" text="Another item" />
				<BreadcrumbsItem href="/item" text="A third item" />
				<BreadcrumbsItem href="/item" text="A fourth item with a very long name" />
				<BreadcrumbsItem href="/item" text="Item 5" />
				<BreadcrumbsCurrentItem href="/item" text="A sixth item" />
			</Breadcrumbs>
		</div>
	);
};

export default BreadcrumbsExpandedExample;

Items before or after collapse

The number of items shown before or after auto-collapse can be customized. This is useful when people need more information on the breadcrumb hierarchy to be aware of their location within the app.

To reduce screen clutter, it's recommended to only display the first and last items when collapsing.

import React from 'react';

import Breadcrumbs, { BreadcrumbsItem } from '@atlaskit/breadcrumbs';
import { BreadcrumbsCurrentItem } from '@atlaskit/breadcrumbs/breadcrumbs-current-item';
import { Box } from '@atlaskit/primitives/compiled';

const BreadcrumbsBeforeAfterCollapseExample = (): React.JSX.Element => {
	return (
		<Box>
			<Breadcrumbs itemsBeforeCollapse={3} itemsAfterCollapse={2}>
				<BreadcrumbsItem href="/item" text="Item 1" />
				<BreadcrumbsItem href="/item" text="Item 2" />
				<BreadcrumbsItem href="/item" text="Item 3" />
				<BreadcrumbsItem href="/item" text="Item 4" />
				<BreadcrumbsItem href="/item" text="Item 5" />
				<BreadcrumbsItem href="/item" text="Item 6" />
				<BreadcrumbsItem href="/item" text="Item 7" />
				<BreadcrumbsItem href="/item" text="Item 8" />
				<BreadcrumbsItem href="/item" text="Item 9" />
				<BreadcrumbsCurrentItem href="/item" text="Item 10" />
			</Breadcrumbs>
		</Box>
	);
};

export default BreadcrumbsBeforeAfterCollapseExample;

Controlled

Set isExpanded to true to expand the breadcrumbs. Use the onExpand prop to expand the breadcrumbs, when a user interacts with the ellipsis button.

import React, { useState } from 'react';

import Breadcrumbs, { BreadcrumbsItem } from '@atlaskit/breadcrumbs';
import { BreadcrumbsCurrentItem } from '@atlaskit/breadcrumbs/breadcrumbs-current-item';
import Button from '@atlaskit/button/default/button';
import { Box } from '@atlaskit/primitives/compiled';

const BreadcrumbsControlledExample = (): React.JSX.Element => {
	const [isExpanded, setExpanse] = useState(false);
	return (
		<Box>
			<Breadcrumbs isExpanded={isExpanded} onExpand={() => setExpanse(!isExpanded)}>
				<BreadcrumbsItem href="/item" text="Item 1" />
				<BreadcrumbsItem href="/item" text="Item 2" />
				<BreadcrumbsItem href="/item" text="Item 3" />
				<BreadcrumbsItem href="/item" text="Item 4" />
				<BreadcrumbsItem href="/item" text="Item 5" />
				<BreadcrumbsItem href="/item" text="Item 6" />
				<BreadcrumbsItem href="/item" text="Item 7" />
				<BreadcrumbsItem href="/item" text="Item 8" />
				<BreadcrumbsItem href="/item" text="Item 9" />
				<BreadcrumbsCurrentItem href="/item" text="Item 10" />
			</Breadcrumbs>
			<Button appearance="primary" onClick={() => setExpanse(!isExpanded)}>
				Toggle
			</Button>
		</Box>
	);
};

export default BreadcrumbsControlledExample;

Breadcrumbs with icon

Icon before

Use iconBefore to display an icon before the breadcrumb.

import React from 'react';

import Breadcrumbs, { BreadcrumbsItem } from '@atlaskit/breadcrumbs';
import { BreadcrumbsCurrentItem } from '@atlaskit/breadcrumbs/breadcrumbs-current-item';
import ImageIcon from '@atlaskit/icon/core/image';

const BreadcrumbsItemIconBeforeExample = (): React.JSX.Element => {
	return (
		<Breadcrumbs>
			<BreadcrumbsItem elemBefore={<ImageIcon label="" />} text="Icon before" />
			<BreadcrumbsCurrentItem href="/current-page" text="Current page" />
		</Breadcrumbs>
	);
};

export default BreadcrumbsItemIconBeforeExample;

Icon after

Use iconAfter to display an icon after the breadcrumb.

import React from 'react';

import Breadcrumbs, { BreadcrumbsItem } from '@atlaskit/breadcrumbs';
import { BreadcrumbsCurrentItem } from '@atlaskit/breadcrumbs/breadcrumbs-current-item';
import ImageIcon from '@atlaskit/icon/core/image';

const BreadcrumbsItemIconAfterExample = (): React.JSX.Element => {
	return (
		<Breadcrumbs>
			<BreadcrumbsItem iconAfter={<ImageIcon label="" />} text="Icon after" />
			<BreadcrumbsCurrentItem href="/current-page" text="Current page" />
		</Breadcrumbs>
	);
};

export default BreadcrumbsItemIconAfterExample;

Truncation width

When a truncationWidth is specified, long item names will truncate and a tooltip containing the full item name will appear on hover. If unspecified, truncation only happens when an item cannot fit alone on a line.

import React from 'react';

import Breadcrumbs, { BreadcrumbsItem } from '@atlaskit/breadcrumbs';
import { BreadcrumbsCurrentItem } from '@atlaskit/breadcrumbs/breadcrumbs-current-item';

const BreadcrumbsItemTruncationExample = (): React.JSX.Element => {
	return (
		<Breadcrumbs>
			<BreadcrumbsItem text="Confluence" />
			<BreadcrumbsItem
				truncationWidth={100}
				text="The new Confluence experience will soon be on for everyone"
			/>
			<BreadcrumbsCurrentItem href="/current-page" text="Current page" />
		</Breadcrumbs>
	);
};

export default BreadcrumbsItemTruncationExample;

Was this page helpful?

We use this feedback to improve our documentation.