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 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 monochrome Attribute monochrome	If`true` , the breadcrumb group will display as black in the light theme, and white in the dark theme. type: boolean	false
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light"	"inherit"

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

Property

monochrome

Attribute

monochrome

Iftrue , the breadcrumb group will display as black in the light theme, and white in the dark theme.

type: boolean

Default: false

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light"

Default: "inherit"

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>

Theme

Interactive example

Web component

React

<ic-breadcrumb-grouptheme="dark">
<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>

<IcBreadcrumbGrouptheme="dark">
<IcBreadcrumbpageTitle="Home"href="#"/>
<IcBreadcrumbpageTitle="Beverages"href="#"/>
<IcBreadcrumb
current
pageTitle="Coffee"
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

Theme

Interactive example

With React Router

Interactive example