OLYSENSE Design System

See the Breadcrumb component documentation for more detailed information on using breadcrumbs in OLYSENSE.

Breadcrumb Items are used inside breadcrumbs to represent different links.

Procedures

Colonoscopy

Patient

<ods-breadcrumb>
  <ods-breadcrumb-item>Procedures</ods-breadcrumb-item>
  <ods-breadcrumb-item>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';

const Example = () => {
  return (
    <OdsBreadcrumb>
      <OdsBreadcrumbItem>Procedures</OdsBreadcrumbItem>
      <OdsBreadcrumbItem>Colonoscopy</OdsBreadcrumbItem>
      <OdsBreadcrumbItem>Patient</OdsBreadcrumbItem>
    </OdsBreadcrumb>
  )
}

export default Example;

Importing

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

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)	The breadcrumb item's label.
prefix	An optional prefix, usually an icon or icon button.
suffix	An optional suffix, usually an icon or icon button.

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	Type	Default
href	string \| undefined
target	'_blank' \| '_parent' \| '_self' \| '_top' \| undefined
rel	string	'noreferrer noopener'

Parts

Name	Description
base	The component's base wrapper.
label	The breadcrumb item's label.
prefix	The container that wraps the prefix.
suffix	The container that wraps the suffix.

Breadcrumb Item

Examples

Importing

Slots

Properties

Parts