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'

Attributes

Property	Type	Default	Description
`label`	`string`	`''`	The label of the breadcrumb.
`inverted`	`boolean`	`false`	Inverted color style
`mobile`	`boolean`	`false`	Mobile version of the breadcrumb

Slots

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

Events

No custom events available.

CSS Parts

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

Components

Breadcrumb item

<dap-ds-breadcrumb-item/>

Attributes

Property	Type	Default	Description
`href`	`string`, `undefined`		The URL of the breadcrumb item.
`target`	`'_blank'`, `'_self'` , `'_parent'` , `'_top'`		The target of the breadcrumb item.
`rel`	`string`	`'noreferrer noopener'`	The rel of the breadcrumb item link.
`disabled`	`boolean`	`false`	Whether the breadcrumb item is disabled.
`inverted`	`boolean`	`false`	Whether the breadcrumb item has inverted style.

Slots

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

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main breadcrumb item container. The li element.
`link`	The link of the breadcrumb item. The dap-ds-link component.
`link-base`	The base part of the link part. The dap-ds-link components base part.
`item-nolink`	The item of the breadcrumb item without a link. The span element.