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>
  <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>
    <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>
    <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>
  <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>
    <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'

Slots

Name	Description
`(default)`	The content of the breadcrumb.

Attributes

Property	Type	Default	Description
`label`	`string`	`''`	The label of the breadcrumb.
`inverted`	`boolean`	`false`
`mobile`	`boolean`	`false`

Events

No custom events available.

CSS Parts

No CSS parts available.