@frankhoodbs/breadcrumb-cmp

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