@frankhoodbs/breadcrumb-cmp v1.2.8
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 | --fh-base-font-size | .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'"
/>
Screenshots
1 day ago
1 day ago
2 days ago
6 days ago
19 days ago
22 days ago
23 days ago
23 days ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago