@frankhoodbs/breadcrumb-cmp NPM

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.

Version License

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-linkaria-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'"
/>