Breadcrumb component

component for generating navigation breadcrumbs. navigation element that shows a user's current position within a hierarchical website structure.

componente per la generazione di breadcrumb di navigazione. elemento di navigazione che mostra la posizione corrente di un utente all'interno di una struttura gerarchica del sito web.

API Reference

Props

| Name | Type | Description | |:--------------------------|:-------------------|:--------------------------------------------------------------------------------------------------| | data-items | BreadcrumbItem[] | Required. Items list | | data-current-item-label | string | default is Selected item', used to help screen readers whle reading the current item in the list | | data-char-limit |number | Number of letters to show, truncates excess with '...' sequence. default is 70 | |data-aria-label |string` | breadcrumbs list aria label for accessibility |

BreadcrumbItem

type definiton for each item in data-items prop

| name | Type | Description | |:-----------------|:----------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | href | string | Required. url for item | | title | string | descriptive title for accessibility reasons | | name | string | Required. Displayed name of the breadcrumb item | | isCurrent | boolean | default false. states if this is the current item (usually the page we are on). | | rel | string | rel attribute for breadcrumb link. Possible values are alternate, author, bookmark, external, help, license, next, nofollow, noopener, noreferrer, opener, prev, search, tag | | referrerpolicy | string | referrerpolicy attribute for breadcrumb link. Possible values are no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url | | target | string | target attribute for breadcrumb link. Possible values are _blank ,_parent ,_self ,_top |

CSS variables

| Name | default | Description | |:---------------------------------------------|:------------|:--------------------------------------| | --breadcrumb-pt | 0px | .BreadcrumbCmp padding-top | | --breadcrumb-color | inherit | .BreadcrumbCmp color | | --breadcrumb-font-size | 1rem | .BreadcrumbCmp font-size | | --breadcrumb-menu-display | inherit | .menu display | | --breadcrumb-menu-mt | 0 | .menu margin-top | | --breadcrumb-menu-mr | 0 | .menu margin-right | | --breadcrumb-menu-mb | 0 | .menu margin-bottom | | --breadcrumb-menu-ml | 0 | .menu margin-left | | --breadcrumb-menu-pt | 0 | .menu padding-top | | --breadcrumb-menu-pr | 0 | .menu padding-right | | --breadcrumb-menu-pb | 0 | .menu padding-bottom | | --breadcrumb-menu-pl | 0 | .menu padding-left | | --breadcrumb-menu-item-content-mx | 7px | .menu-item::after margin-x | | --breadcrumb-menu-item-content | > | .menu-item::after content | | --breadcrumb-menu-item-py | 14px | .menu-link padding-y | | --breadcrumb-link-vertical-align | middle | .menu-link vertical-align | | --breadcrumb-link-hover-color | #000000 | .menu-link:hover color | | --breadcrumb-link-hover-text-decoration | underline | .menu-link:hover text-decoration | | --breadcrumb-link-aria-current-hover-color | #000000 | .menu-link[aria-current='true'] color |

Usage/Examples

<breadcrumb-cmp
  :data-current-item-label="'Current item'"
  :data-items="[
    {
      href: '#',
      title: 'title 1',
      name: 'name 1',
      rel: 'nofollow',
      isCurrent: false,
      referrerpolicy: 'no-referrer',
      target: '_self',
    },
    {
      href: '#',
      title: 'title 2',
      name: 'name 2',
      rel: 'nofollow',
      isCurrent: true,
      referrerpolicy: 'no-referrer',
      target: '_self',
    },
    {
      href: '#',
      title: 'title 3',
      name: 'name 3',
      rel: 'nofollow',
      isCurrent: false,
      referrerpolicy: 'no-referrer',
      target: '_self',
    },
  ]"
  :data-char-limit="40"
  :data-aria-label="'Aria label'"
/>

Screenshots