OLYSENSE Design System

Examples

By default, breadcrumb items are rendered as buttons so you can use them to navigate single-page applications. In this case, you’ll need to add event listeners to handle clicks.

<ods-breadcrumb id="breadcrumb-button-example">
  <ods-breadcrumb-item id="overflow">
    <ods-dropdown>
      <ods-icon-button slot="trigger" size="small" label="More options" name="more-horiz" variant="ghost"></ods-icon-button>
      <ods-menu>
        <ods-menu-item>Procedures</ods-menu-item>
        <ods-menu-item>Colonoscopy</ods-menu-item>
      </ods-menu>
    </ods-dropdown>
  </ods-breadcrumb-item>
  <ods-breadcrumb-item>Procedures</ods-breadcrumb-item>
  <ods-breadcrumb-item>Colonoscopy</ods-breadcrumb-item>
  <ods-breadcrumb-item>Patient</ods-breadcrumb-item>
</ods-breadcrumb>

<script>
  const breadcrumbItem = document.getElementById('breadcrumb-button-example');

  breadcrumbItem.addEventListener('click', (event) => {
    console.log(`${event.target.textContent} breadcrumb item clicked!`);
  });
</script>

/* eslint-disable @typescript-eslint/no-explicit-any */
import { OdsBreadcrumb } from '@ods/components/react.breadcrumb';
import { OdsBreadcrumbItem } from '@ods/components/react.breadcrumb-item';
import { OdsDropdown } from '@ods/components/react.dropdown';
import { OdsIconButton } from '@ods/components/react.icon-button';
import { OdsMenu } from '@ods/components/react.menu';
import { OdsMenuItem } from '@ods/components/react.menu-item';

const Example = () => {
  const breadcrumbItemClicked = (event: any) => {
    console.log(`${event.target.textContent} breadcrumb item clicked!`);
  };

  return (
    <OdsBreadcrumb onClick={breadcrumbItemClicked}>
      <OdsBreadcrumbItem id="overflow">
        <OdsDropdown>
          <OdsIconButton slot="trigger" size="small" label="More options" name="more-horiz" variant="ghost" />
          <OdsMenu>
            <OdsMenuItem>Procedures</OdsMenuItem>
            <OdsMenuItem>Colonoscopy</OdsMenuItem>
          </OdsMenu>
        </OdsDropdown>
      </OdsBreadcrumbItem>
      <OdsBreadcrumbItem>Procedures</OdsBreadcrumbItem>
      <OdsBreadcrumbItem>Colonoscopy</OdsBreadcrumbItem>
      <OdsBreadcrumbItem>Patient</OdsBreadcrumbItem>
    </OdsBreadcrumb>
  )
}

export default Example;

For websites, you’ll probably want to use links instead. You can make any breadcrumb item a link by applying an href attribute to it. Now, when the user activates it, they’ll be taken to the corresponding page — no event listeners required.

Procedures

Colonoscopy

Procedures

Colonoscopy

Patient

<ods-breadcrumb>
  <ods-breadcrumb-item id="overflow">
    <ods-dropdown>
      <ods-icon-button slot="trigger" size="small" label="More options" name="more-horiz" variant="ghost"></ods-icon-button>
      <ods-menu>
        <ods-menu-item>Procedures</ods-menu-item>
        <ods-menu-item>Colonoscopy</ods-menu-item>
      </ods-menu>
    </ods-dropdown>
  </ods-breadcrumb-item>
  <ods-breadcrumb-item href="https://example.com/procedures">Procedures</ods-breadcrumb-item>
  <ods-breadcrumb-item href="https://example.com/colonoscopy">Colonoscopy</ods-breadcrumb-item>
  <ods-breadcrumb-item>Patient</ods-breadcrumb-item>
</ods-breadcrumb>

import { OdsBreadcrumb } from '@ods/components/react.breadcrumb';
import { OdsBreadcrumbItem } from '@ods/components/react.breadcrumb-item';
import { OdsDropdown } from '@ods/components/react.dropdown';
import { OdsIconButton } from '@ods/components/react.icon-button';
import { OdsMenu } from '@ods/components/react.menu';
import { OdsMenuItem } from '@ods/components/react.menu-item';

const Example = () => {
  return (
    <OdsBreadcrumb>
      <OdsBreadcrumbItem id="overflow">
        <OdsDropdown>
          <OdsIconButton slot="trigger" size="small" label="More options" name="more-horiz" variant="ghost" />
          <OdsMenu>
            <OdsMenuItem>Procedures</OdsMenuItem>
            <OdsMenuItem>Colonoscopy</OdsMenuItem>
          </OdsMenu>
        </OdsDropdown>
      </OdsBreadcrumbItem>
      <OdsBreadcrumbItem href="https://example.com/procedures">Procedures</OdsBreadcrumbItem>
      <OdsBreadcrumbItem href="https://example.com/colonoscopy">Colonoscopy</OdsBreadcrumbItem>
      <OdsBreadcrumbItem>Patient</OdsBreadcrumbItem>
    </OdsBreadcrumb>
  )
}

export default Example;

Importing

import '@ods/components/web.breadcrumb';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Slots

Name	Description
(default)	One or more breadcrumb items to display.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Reflects	Type	Default
label		string	''
overflowSize overflow-size		'small' \| 'medium' \| 'large'	'medium'

Parts

Name	Description
base	The component's base wrapper.

Dependencies

This component automatically imports the following dependencies.

ods-dropdown
ods-icon
ods-popup

Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Use breadcrumbs within the Page Header to help orient user
Use the same terminology as shown in Side Nav
Allow user to navigate backwards through page hierarchy using breadcrumbs

Use breadcrumbs as primary navigation - use Side Nav for this.
Use different terms than what is used in primary navigation
Change the separator chevron to any other separator icon like slashes

Breadcrumb

Examples

Basic

Importing

Slots

Properties

Parts

Dependencies

Usage

Do

Dont

Breadcrumb

Examples

Basic

Breadcrumb Links

Importing

Slots

Properties

Parts

Dependencies

Usage

Do

Dont