Breadcrumb

Example

    <vega-breadcrumb max-items="5" />

        document.querySelector('vega-breadcrumb').items = [
            { label: 'Home', href: '' },
            { label: 'level2', href: '' },
            { label: 'level3', href: '' },
            { label: 'level4', href: '' },
            { label: 'level5', href: '', tooltip: 'level 5 tooltip' },
        ];

Usage

Breadcrumbs are a navigational tool on complex websites that help users find their way through the site. They are useful for users who may have arrived at a page through a search or other means, and may not know the context of the page within the architecture of the site. Breadcrumbs are typically shown at the top of the page, under the navigation bar.

Properties

Item property types

export type VegaBreadcrumbCollapsedThresholdType = number | 'none';
export type VegaBreadcrumbItemType = {
    label: string,
    href: string,
    tooltip?: string,
};

Event

vegaClick

When an item has been clicked, if it has a set href property, the window location will be changed to the set value. If this property is not set, a vegaClick event will be emitted.

Notes

• On a desktop, if the length of the items is set to be larger than maxItems, the breadcrumbs will collapse and render only the first and last items.
• If maxItems is set to none, all items will be displayed.
• The miniumum value of max-items is 4. If this is set to less than 4, the collapsed function will not work.
• if you set the value of the tooltip key for an individual item property, the set value will be displayed as a tooltip.

Accessibility

• Elements must only use allowed ARIA attributes.
• Required ARIA attributes must be provided.
• ARIA roles used must conform to valid values.
• ARIA attributes must conform to valid values.
• ARIA attributes must conform to valid names.
• Elements must have sufficient color contrast.
• id attribute value must be unique.
• Links must have discernible text.
• Interactive controls must not be nested.