Breadcrumbs

Breadcrumbs are a navigation element indicating the user's current position in the site's hierarchy.

Demo

API

Tag

Name	Description
`<s-breadcrumbs>`	Custom HTML tag, no content

Attributes

Name	Value	Required	Description
`navitems`	String		Stringified JSON array of breadcrumb objects. See Guidelines below.
`i18n`	string		A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Properties

Name	Value	Description
`navItems`	Array	Array of breadcrumb objects. See Guidelines below.
`navHandler`	NavHandler function	Function to handle in-app navigation, see Guidelines below.
`i18n`	object	A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Demo

API

Tag

Name
`<SBreadcrumbs>`

Props

Name	Value	Description
`navItems`	Array of objects	Array of breadcrumb objects. See Guidelines above for required object structure.
`navHandler`	NavHandler function	Function to handle in-app navigation, see Guidelines below.
`i18n`	object	A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Skylab React links

General information about using our React package

Typescript

Exported types

// Object provided (in array) to navItems prop export type BreadcrumbItem = { label: string; url?: string; dataRef?: string; emitNavEvent?: boolean };

i18n Strings

ID	Description	Default value
`"breadcrumbs.ariaLabel.morePages"`	The aria-label used for the 'more pages' button.	More pages

Guidelines

Creating breadcrumb items

The breadcrumb items (individual links) within the Breadcrumbs component are set via an array of objects.

const breadcrumbItems = [ { "label": string, // required "url": string, // required for every breadcrumb item except the last (current page) "dataRef": string, "emitNavEvent": boolean // see guidelines below }, ]; const bc = document.querySelector("s-breadcrumbs"); bc.navItems = breadcrumbItems;

To pass the nav items to the s-breadcrumbs component, you can either set the navItems property equal to your array of objects, as in the code sample above, or you can stringify your array and set the navitems attribute.

Current page breadcrumb is not a link

The breadcrumb for the current page (the last item in the JSON array) will be rendered as static text. All other breadcrumbs in the list will be links.

Nav handler

You can provide a navHandler function to manage routing. On any click of an <a> tag in <s-breadcrumbs>, the navHandler will be invoked with two arguments: the mouse click event and the value of the href attribute in the associated <a> tag.

The typical implementation will include a conditional to determine if the URL is within the consumer's SPA and invocation of that SPA's router function (e.g. history.push in react-router) if so.

Sample usage is shown below:

function handleNavigation(nativeMouseEvent, url) { // handle Navigation here } document.querySelector('s-breadcrumbs').navHandler = handleNavigation;

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com