Breadcrumb

BETA

Component demo

Interactive example

Web component

React

<ic-breadcrumb-group>
<ic-breadcrumbpage-title="Home"href="#"></ic-breadcrumb>
<ic-breadcrumbpage-title="Beverages"href="#"></ic-breadcrumb>
<ic-breadcrumb
current="true"
page-title="Coffee"
href="#"
>
</ic-breadcrumb>
</ic-breadcrumb-group>

<IcBreadcrumbGroup>
<IcBreadcrumbpageTitle="Home"href="#"/>
<IcBreadcrumbpageTitle="Beverages"href="#"/>
<IcBreadcrumb
current
pageTitle="Coffee"
href="#"
/>
</IcBreadcrumbGroup>

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property pageTitle Attribute page-title	The title of the breadcrumb. Required type: string
Property current Attribute current	If`true` , aria-current will be set on the breadcrumb. type: boolean	false
Property href Attribute href	The URL that the breadcrumb link points to. type: string

Property

pageTitle

Attribute

page-title

The title of the breadcrumb.

Required

type: string

Property

current

Attribute

current

Iftrue , aria-current will be set on the breadcrumb.

type: boolean

Default: false

Property

href

Attribute

href

The URL that the breadcrumb link points to.

type: string

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot icon	Content will be rendered to the left of the breadcrumb page title.

Methods

Name	Description	Signature
Method setFocus	Sets focus on the breadcrumb.	setFocus() => Promise<void>

Method

setFocus

Sets focus on the breadcrumb.

setFocus() => Promise<void>

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property appearance Attribute appearance	The appearance of the breadcrumb group. type: IcThemeForeground - "dark" \| "default" \| "light"	"default"
Property backBreadcrumbOnly Attribute back-breadcrumb-only	If`true` , display only a single breadcrumb for the parent page with a back icon. type: boolean	false
Property collapsed Attribute collapsed	If`true` , all breadcrumbs between the first and last breadcrumb will be collapsed. type: boolean	false

Property

appearance

Attribute

appearance

The appearance of the breadcrumb group.

type: IcThemeForeground - "dark" | "default" | "light"

Default: "default"

Property

backBreadcrumbOnly

Attribute

back-breadcrumb-only

Iftrue , display only a single breadcrumb for the parent page with a back icon.

type: boolean

Default: false

Property

collapsed

Attribute

collapsed

Iftrue , all breadcrumbs between the first and last breadcrumb will be collapsed.

type: boolean

Default: false

Variants

Back

Interactive example

Web component

React

<ic-breadcrumb-groupback-breadcrumb-only="true">
<ic-breadcrumbpage-title="Home"href="#"></ic-breadcrumb>
<ic-breadcrumbpage-title="Beverages"href="#"></ic-breadcrumb>
<ic-breadcrumb
current="true"
page-title="Coffee"
href="#"
>
</ic-breadcrumb>
</ic-breadcrumb-group>

<IcBreadcrumbGroupbackBreadcrumbOnly>
<IcBreadcrumbpageTitle="Home"href="#"/>
<IcBreadcrumbpageTitle="Beverages"href="#"/>
<IcBreadcrumb
current
pageTitle="Coffee"
href="#"
/>
</IcBreadcrumbGroup>

With icons

Interactive example

Web component

React

<ic-breadcrumb-group>
<ic-breadcrumbpage-title="Home"href="#">
<svg
slot="icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
fill="currentColor"
/>
</svg>
</ic-breadcrumb>
<ic-breadcrumbpage-title="Beverages"href="#">
<svg
slot="icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"
fill="currentColor"
/>
</svg>
</ic-breadcrumb>
<ic-breadcrumb
current="true"
page-title="Coffee"
href="#"
>
<svg
slot="icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.5 3H6c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 3 18.5 3zM16 5v3H6V5h10zm2.5 3H18V5h.5c.83 0 1.5.67 1.5 1.5S19.33 8 18.5 8zM4 19h16v2H4v-2z"
fill="currentColor"
/>
</svg>
</ic-breadcrumb>
</ic-breadcrumb-group>

<IcBreadcrumbGroup>
<IcBreadcrumbpageTitle="Home"href="#">
<SlottedSVG
slot="icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
fill="currentColor"
/>
</SlottedSVG>
</IcBreadcrumb>
<IcBreadcrumbpageTitle="Beverages"href="#">
<SlottedSVG
slot="icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"
fill="currentColor"
/>
</SlottedSVG>
</IcBreadcrumb>
<IcBreadcrumb
pageTitle="Coffee"
current
href="#"
>
<SlottedSVG
slot="icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.5 3H6c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 3 18.5 3zM16 5v3H6V5h10zm2.5 3H18V5h.5c.83 0 1.5.67 1.5 1.5S19.33 8 18.5 8zM4 19h16v2H4v-2z"
fill="currentColor"
/>
</SlottedSVG>
</IcBreadcrumb>
</IcBreadcrumbGroup>

Collapsed

Interactive example

Web component

React

<ic-breadcrumb-groupcollapsed="true">
<ic-breadcrumbpage-title="Home"href="#"></ic-breadcrumb>
<ic-breadcrumbpage-title="Beverages"href="#"></ic-breadcrumb>
<ic-breadcrumb
current="true"
page-title="Coffee"
href="#"
>
</ic-breadcrumb>
</ic-breadcrumb-group>

<IcBreadcrumbGroupcollapsed>
<IcBreadcrumbpageTitle="Home"href="#"/>
<IcBreadcrumbpageTitle="Beverages"href="#"/>
<IcBreadcrumb
pageTitle="Coffee"
current
href="#"
/>
</IcBreadcrumbGroup>

With React Router

Interactive example

React

<MemoryRouterinitialEntries={["/"]}>
<IcBreadcrumbGroup>
<IcBreadcrumbpageTitle="Home">
<IcLink>
<NavLinkslot="router-item"to="/">Home</NavLink>
</IcLink>
</IcBreadcrumb>
<IcBreadcrumbpageTitle="Beverages">
<IcLink>
<NavLinkslot="router-item"to="/">Beverages</NavLink>
</IcLink>
</IcBreadcrumb>
<IcBreadcrumbpageTitle="Coffee"current>
<IcLink>
<NavLinkto="/"slot="router-item">Coffee</NavLink>
</IcLink>
</IcBreadcrumb>
</IcBreadcrumbGroup>
</MemoryRouter>

Last reviewed 31 May 2024 .

Component demo

Interactive example

Breadcrumb details

Props

Slots

Methods

Breadcrumb group details

Props

Variants

Back

Interactive example

With icons

Interactive example

Collapsed

Interactive example

With React Router

Interactive example