DÁP Design System - Breadcrumb webcomponent

Breadcrumb

Breadcrumb component is a navigation element that allows the user to keep track of their location within the website or application.

Design system docs

Examples

Default breadcrumb

<dap-ds-breadcrumb aria-label="Page navigation">
<dap-ds-breadcrumb-item href="https://services.gov.hu/design-system/komponensek">
  Design System
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item href="https://services.gov.hu/design-system/komponensek/breadcrumb">
  Breadcrumb
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item>
  Current page
</dap-ds-breadcrumb-item>
</dap-ds-breadcrumb>

Custom separator

You can customize the separator between breadcrumb items by setting any element to the separator slot. You even can set it on items.

<dap-ds-stack>
<dap-ds-breadcrumb aria-label="Navigation">
  <dap-ds-breadcrumb-item href="https://services.gov.hu/design-system/komponensek">
    Design System
  </dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item href="https://services.gov.hu/design-system/komponensek/breadcrumb">
    Breadcrumb
  </dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item>
    Current page
  </dap-ds-breadcrumb-item>

  <svg
    slot="separator"
    width="32"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor">
    <path d="M2 11H4V13H2V11ZM6 11H18V13H6V11ZM20 11H22V13H20V11Z"></path>
  </svg>
</dap-ds-breadcrumb>

<dap-ds-breadcrumb aria-label="Navigation">
  <dap-ds-breadcrumb-item>First page nohref </dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item href="one">Second page</dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item href="two"
    >Third page
    <svg
      slot="separator"
      width="32"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor">
      <path
        d="M2 11H4V13H2V11ZM6 11H18V13H6V11ZM20 11H22V13H20V11Z"></path>
    </svg>
  </dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item>Current Page</dap-ds-breadcrumb-item>
</dap-ds-breadcrumb>
</dap-ds-stack>

Mobile breadcrumb

By setting the mobile attribute, the breadcrumb will be displayed in a mobile-friendly way. On mobile devices, only the root and the current page are displayed.

<dap-ds-breadcrumb mobile aria-label="Navigation">
<dap-ds-breadcrumb-item href="https://services.gov.hu/design-system/komponensek">
  Design System
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item>
  Components
</dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item>
  Inner page
</dap-ds-breadcrumb-item>
<dap-ds-breadcrumb-item>
  Current page
</dap-ds-breadcrumb-item>
</dap-ds-breadcrumb>

Inverted style

By setting the inverted attribute, the breadcrumb will be displayed in an inverted style.

<div style={{ backgroundColor: 'var(--dds-background-brand-base-inverted)' }}>
<dap-ds-breadcrumb inverted aria-label="Navigation label">
  <dap-ds-breadcrumb-item href="/design-system/komponensek">
    Design System
  </dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item href="https://services.gov.hu/design-system/komponensek/breadcrumb">
    Breadcrumb
  </dap-ds-breadcrumb-item>
  <dap-ds-breadcrumb-item>
    Current page
  </dap-ds-breadcrumb-item>
</dap-ds-breadcrumb>
</div>

Importing

import { DapDSBreadcrumb } from 'dap-design-system/dist/dds'

Importing React

import { DapDSBreadcrumbReact } from 'dap-design-system/dist/react'

Attributes

Property	Type	Default	Description
`inverted`	`boolean`	`false`	Inverted color style
`variant`	`string`	`'normal'`
`mobile`	`boolean`	`false`	Mobile version of the breadcrumb
`ariaLabelledBy`	`string`, `undefined`		The aria-labelledby of the breadcrumb

Slots

Name	Description
`(default)`	The content of the breadcrumb.
`separator`	The separator between breadcrumb items. Default is '/'.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main breadcrumb container.
`separator`	The separator of the breadcrumb.

CSS Custom Properties

Property Name	Description
`--dds-breadcrumb-width`	The width of the breadcrumb container. Default is 100%.
`--dds-breadcrumb-overflow-x`	The horizontal overflow behavior of the breadcrumb. Default is auto.
`--dds-breadcrumb-transition`	The transition property for the breadcrumb. Default is 'all 0.2s ease-in-out'.
`--dds-breadcrumb-list-display`	The display property of the breadcrumb list. Default is flex.
`--dds-breadcrumb-list-flex-wrap`	The flex-wrap property of the breadcrumb list. Default is nowrap.
`--dds-breadcrumb-list-align-items`	The align-items property of the breadcrumb list. Default is center.
`--dds-breadcrumb-list-min-width`	The minimum width of the breadcrumb list. Default is max-content.

Components

Breadcrumb item

<dap-ds-breadcrumb-item/>