Skip to main content Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Skip to page content Show navigation section

Breadcrumb

Guidance Code Accessibility

Component demo

Interactive example

Web component React
StackBlitz
Show full code 
<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>

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

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

type: boolean - boolean | undefined
false
Property href
Attribute href

The URL that the breadcrumb link points to.

type: string - string | undefined
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 - boolean | undefined
Default: false
Property href
Attribute href

The URL that the breadcrumb link points to.

type: string - string | undefined

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.

Read more about slots .


Name Description
Slot icon
Content will be rendered to the left of the breadcrumb page title.
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

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

type: boolean - boolean | undefined
false
Property collapsed
Attribute collapsed

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

type: boolean - boolean | undefined
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 - boolean | undefined
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" | undefined
"inherit"
Property backBreadcrumbOnly
Attribute back-breadcrumb-only

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

type: boolean - boolean | undefined
Default: false
Property collapsed
Attribute collapsed

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

type: boolean - boolean | undefined
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 - boolean | undefined
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" | undefined
Default: "inherit"

Variants

Back

Interactive example

Web component React
StackBlitz
Show full code 
<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>

With icons

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Collapsed

Interactive example

Select to view collapsed breadcrumbs Collapsed breadcrumbs
Web component React
StackBlitz
Show full code 
<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>

Theme

Interactive example

Web component React
StackBlitz
Show full code 
<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>

With React Router

Interactive example

Home Beverages
React
StackBlitz
Show full code 
<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"href="/"current/>
</IcBreadcrumbGroup>
</MemoryRouter>
Last reviewed 31 May 2024 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website
Navigated to Breadcrumb - Intelligence Community Design System