Breadcrumb

Design guidelines

Breadcrumbs are a navigation system used to show a user’s location in the app.

Code

Framework

HTML

React

Angular

Default

Home Item Disabled item Active

Toggle dark mode

<certara-breadcrumb>
  <certara-breadcrumb-item href="/">
    <certara-icon icon="house" role="presentation"></certara-icon>
    Home
  </certara-breadcrumb-item>
  <certara-breadcrumb-item href="/">Item</certara-breadcrumb-item>
  <certara-breadcrumb-item href="/" disabled>Disabled item</certara-breadcrumb-item>
  <certara-breadcrumb-item active>Active</certara-breadcrumb-item>
</certara-breadcrumb>

import { CertaraBreadcrumb, CertaraBreadcrumbItem, CertaraIcon } from '@certara/certara-ui-react';

<CertaraBreadcrumb>
  <CertaraBreadcrumbItem href="/">
    <CertaraIcon icon="house" role="presentation" />
    Home
  </CertaraBreadcrumbItem>
  <CertaraBreadcrumbItem href="/">Item</CertaraBreadcrumbItem>
  <CertaraBreadcrumbItem href="/" disabled>Disabled item</CertaraBreadcrumbItem>
  <CertaraBreadcrumbItem active>Active</CertaraBreadcrumbItem>
</CertaraBreadcrumb>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-breadcrumb>
  <certara-breadcrumb-item href="/">
    <certara-icon icon="house" role="presentation"></certara-icon>
    Home
  </certara-breadcrumb-item>
  <certara-breadcrumb-item href="/">Item</certara-breadcrumb-item>
  <certara-breadcrumb-item href="/" disabled>Disabled item</certara-breadcrumb-item>
  <certara-breadcrumb-item active>Active</certara-breadcrumb-item>
</certara-breadcrumb>

Background color

Home Active

Toggle dark mode

<certara-breadcrumb background-color="transparent">
  <certara-breadcrumb-item href="/">
    <certara-icon icon="house" role="presentation"></certara-icon>
    Home
  </certara-breadcrumb-item>
  <certara-breadcrumb-item active>Active</certara-breadcrumb-item>
</certara-breadcrumb>

import { CertaraBreadcrumb, CertaraBreadcrumbItem, CertaraIcon } from '@certara/certara-ui-react';

<CertaraBreadcrumb backgroundColor="transparent">
  <CertaraBreadcrumbItem href="/">
    <CertaraIcon icon="house" role="presentation" />
    Home
  </CertaraBreadcrumbItem>
  <CertaraBreadcrumbItem active>Active</CertaraBreadcrumbItem>
</CertaraBreadcrumb>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-breadcrumb background-color="transparent">
  <certara-breadcrumb-item href="/">
    <certara-icon icon="house" role="presentation"></certara-icon>
    Home
  </certara-breadcrumb-item>
  <certara-breadcrumb-item active>Active</certara-breadcrumb-item>
</certara-breadcrumb>

Plain

Home Active

Toggle dark mode

<certara-breadcrumb variant="plain">
  <certara-breadcrumb-item href="/">
    <certara-icon icon="house" role="presentation"></certara-icon>
    Home
  </certara-breadcrumb-item>
  <certara-breadcrumb-item active>Active</certara-breadcrumb-item>
</certara-breadcrumb>

import { CertaraBreadcrumb, CertaraBreadcrumbItem, CertaraIcon } from '@certara/certara-ui-react';

<CertaraBreadcrumb variant="plain">
  <CertaraBreadcrumbItem href="/">
    <CertaraIcon icon="house" role="presentation" />
    Home
  </CertaraBreadcrumbItem>
  <CertaraBreadcrumbItem active>Active</CertaraBreadcrumbItem>
</CertaraBreadcrumb>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-breadcrumb variant="plain">
  <certara-breadcrumb-item href="/">
    <certara-icon icon="house" role="presentation"></certara-icon>
    Home
  </certara-breadcrumb-item>
  <certara-breadcrumb-item active>Active</certara-breadcrumb-item>
</certara-breadcrumb>

certara-breadcrumb

Properties

backgroundColor

Attribute	background-color
Type	string
Default	undefined
Required	false
Description

variant

Attribute	variant
Type	"default" | "plain"
Default	'default'
Required	false
Description	Visual variant of the breadcrumb. plain removes the background and bottom border.

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	Description
	The default slot

certara-breadcrumb-item

Framework

HTML

React

Angular

Default

Default item

Toggle dark mode

<certara-breadcrumb>
  <certara-breadcrumb-item href="/">Default item</certara-breadcrumb-item>
</certara-breadcrumb>

import { CertaraBreadcrumb, CertaraBreadcrumbItem } from '@certara/certara-ui-react';

<CertaraBreadcrumb>
  <CertaraBreadcrumbItem href="/">Default item</CertaraBreadcrumbItem>
</CertaraBreadcrumb>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-breadcrumb>
  <certara-breadcrumb-item href="/">Default item</certara-breadcrumb-item>
</certara-breadcrumb>

Active

Active item

Toggle dark mode

<certara-breadcrumb>
  <certara-breadcrumb-item href="/" active-type="page" active>Active item</certara-breadcrumb-item>
</certara-breadcrumb>

import { CertaraBreadcrumb, CertaraBreadcrumbItem } from '@certara/certara-ui-react';

<CertaraBreadcrumb>
  <CertaraBreadcrumbItem href="/" activeType="page" active>Active item</CertaraBreadcrumbItem>
</CertaraBreadcrumb>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-breadcrumb>
  <certara-breadcrumb-item href="/" active-type="page" active>Active item</certara-breadcrumb-item>
</certara-breadcrumb>

Disabled

Disabled item

Toggle dark mode

<certara-breadcrumb>
  <certara-breadcrumb-item href="/" disabled>Disabled item</certara-breadcrumb-item>
</certara-breadcrumb>

import { CertaraBreadcrumb, CertaraBreadcrumbItem } from '@certara/certara-ui-react';

<CertaraBreadcrumb>
  <CertaraBreadcrumbItem href="/" disabled>Disabled item</CertaraBreadcrumbItem>
</CertaraBreadcrumb>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-breadcrumb>
  <certara-breadcrumb-item href="/" disabled>Disabled item</certara-breadcrumb-item>
</certara-breadcrumb>

Properties

active

Attribute	active
Type	boolean
Default	false
Required	false
Description	Indicates whether the item is the active item. There can be only one of these per page

activeType

Attribute	active-type
Type	"date" | "location" | "page" | "step" | "time" | boolean
Default	undefined
Required	false
Description	The type of the active item, used in aria-current.
If not specified, defaults to ‘page’.

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description	If disabled, the item will render as a <span> element instead of an <a> element

href

Attribute	href
Type	string
Default	undefined
Required	false
Description	The URL the item points to. If not specified, the item will not be a link.

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	Description
	The default slot

Breadcrumbs are a navigation system used to show a user’s location in the app.

Design guidelines

Breadcrumb bar

Home Item Disabled item Active

Toggle dark mode

In practice

Using breadcrumbs

Use breadcrumbs for nested navigation, with each item acting as a link. They show the hierarchical progress from the highest item level to the lowest, one step at a time. This typically starts with the product landing page and goes to the current page or content.

• Place breadcrumbs at the top left corner of the screen, above the page title.
• In product, avoid using the topmost level of the hierarchy unless the navigation sidebar is collapsed.

Accessibility

• Add aria-current="location" on the last breadcrumb item so screen readers can state the current page.
• Make sure your breadcrumb items reflect the page or product section titles exactly for screen readers.

Design resources

View component in Figma