Breadcrumb

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

Show design guidelines

Code

Framework HTML React Angular

Default

Home

Item

Disabled item

Active

Toggle dark mode

MDX may have transformed content. Use example prop instead on ComponentPreview.

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

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

<CertaraBreadcrumb>
  <CertaraBreadcrumbItem href="/">
    <CertaraIcon name="house" role="presentation" />
    <p>Home</p>
  </CertaraBreadcrumbItem>
  <CertaraBreadcrumbItem href="/">
    <p>Item</p>
  </CertaraBreadcrumbItem>
  <CertaraBreadcrumbItem href="/" disabled>
    <p>Disabled item</p>
  </CertaraBreadcrumbItem>
  <CertaraBreadcrumbItem active={true}>
    <p>Active</p>
  </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 name="house" role="presentation"></certara-icon>
    <p>Home</p>
  </certara-breadcrumb-item>
  <certara-breadcrumb-item href="/">
    <p>Item</p>
  </certara-breadcrumb-item>
  <certara-breadcrumb-item href="/" disabled>
    <p>Disabled item</p>
  </certara-breadcrumb-item>
  <certara-breadcrumb-item active="true">
    <p>Active</p>
  </certara-breadcrumb-item>
</certara-breadcrumb>

Background color

Home

Active

Toggle dark mode

MDX may have transformed content. Use example prop instead on ComponentPreview.

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

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

<CertaraBreadcrumb background-color="transparent">
  <CertaraBreadcrumbItem href="/">
    <CertaraIcon name="house" role="presentation" />
    <p>Home</p>
  </CertaraBreadcrumbItem>
  <CertaraBreadcrumbItem active={true}>
    <p>Active</p>
  </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 name="house" role="presentation"></certara-icon>
    <p>Home</p>
  </certara-breadcrumb-item>
  <certara-breadcrumb-item active="true">
    <p>Active</p>
  </certara-breadcrumb-item>
</certara-breadcrumb>

certara-breadcrumb

Properties

backgroundColor

Attribute	background-color
Type	string
Default	undefined
Required	false
Description

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

There are no slots available for this component

certara-breadcrumb-item

Framework HTML React Angular

Default

Default item

Toggle dark mode

MDX may have transformed content. Use example prop instead on ComponentPreview.

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

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

<CertaraBreadcrumb>
  <CertaraBreadcrumbItem href="/">
    <p>Default item</p>
  </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="/">
    <p>Default item</p>
  </certara-breadcrumb-item>
</certara-breadcrumb>

Active

Active item

Toggle dark mode

MDX may have transformed content. Use example prop instead on ComponentPreview.

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

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

<CertaraBreadcrumb>
  <CertaraBreadcrumbItem href="/" active-type="page" active={true}>
    <p>Active item</p>
  </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="true">
    <p>Active item</p>
  </certara-breadcrumb-item>
</certara-breadcrumb>

Disabled

Disabled item

Toggle dark mode

MDX may have transformed content. Use example prop instead on ComponentPreview.

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

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

<CertaraBreadcrumb>
  <CertaraBreadcrumbItem href="/" disabled>
    <p>Disabled item</p>
  </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>
    <p>Disabled item</p>
  </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

There are no slots available for this component