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

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