Breadcrumbs

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

Code

Breadcrumb bar

Home Item Disabled item Active

Toggle dark mode

Certara UI

packages/certara-ui/src/components/breadcrumb/breadcrumb.tsx

<certara-breadcrumb>
  <certara-breadcrumb-item href="/">
    <certara-icon name="house" size="12" 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>

certara-breadcrumb

Properties

Property	Attribute	Description	Type	Default
ariaLabel	aria-label		string	'Breadcrumb'

---

HTML

1. Home
2. Item
3. Disabled Item
4. Active

Toggle dark mode

<nav aria-label="breadcrumb" id="breadcrumb">
<ol class="breadcrumb">
  <li class="breadcrumb-item">
    <a class="breadcrumb__link" href="/"><svg class="icon icon-12" aria-hidden="true"><use xlink:href="/assets/svg/regular.svg#house"></use></svg> Home</a>
  </li>
  <li class="breadcrumb-item"><a class="breadcrumb__link" href="#">Item</a></li>
  <li class="breadcrumb-item">
    <span class="breadcrumb__link">Disabled Item</span>
  </li>
  <li class="breadcrumb-item active" aria-current="location">Active</li>
</ol>
</nav>

Twirl

app/views/components/breadcrumb.scala.html, app/views/components/breadcrumbItem.scala.html

@breadcrumb() {
    @breadcrumbItem() { @Messages("Item") }
    @breadcrumbItem() { <a class="breadcrumb__link" href="@routes.Accounts.users()">@Messages("Item")</a> }
    @breadcrumbItem(isActive = true) { @Messages(userForm("name").value.orElse("Active")) }
}

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