Breadcrumbs component for the NICE Design System
-
@nice-digital/nds-breadcrumbs
- Installation - Usage - React - Routing - Props - Breadcrumbs - children - Breadcrumb - to - elementType - children - SCSS - HTML
Install Node, and then:
npm i @nice-digital/nds-breadcrumbs --save
Import the Breadcrumbs
and Breadcrumb
components from the package and use within JSX:
import React from "react";
import { Breadcrumbs, Breadcrumb } from "@nice-digital/nds-breadcrumbs";
<Breadcrumbs>
<Breadcrumb to="https://www.nice.org.uk">NICE</Breadcrumb>
<Breadcrumb to="/">CKS</Breadcrumb>
<Breadcrumb>Topics</Breadcrumb>
</Breadcrumbs>;
Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.
To use breadcrumbs with custom routing like React Router or Reach Router you can pass in a tag prop. For example to use the Link
component from Gatsby, you can do:
import React from "react";
import { Link } from "gatsby";
import { Breadcrumbs, Breadcrumb } from "@nice-digital/nds-breadcrumbs";
<Breadcrumbs>
<Breadcrumb to="https://www.nice.org.uk">NICE</Breadcrumb>
<Breadcrumb to="/" tag={Link}>
CKS
</Breadcrumb>
<Breadcrumb>Topics</Breadcrumb>
</Breadcrumbs>;
- Type:
Breadcrumb
,Array<Breadcrumb>
The indvidual breadcrumb items
Any additional props will be spread across the containing nav
, including any additional classNames
- Type:
string
The URL the breadcrumb links to
- Type:
null
,React.ElementType
- Default:
"a"
A custom tag type. Defaults to a normal HTMLAnchorElement. Use this prop to use custom routing.
- Type:
string
- Default:
href
The method of activating the link. By default a link is an anchor with href
attribute for the destination. Other routers may use another prop, such as to
. This allows you to stipulate any possible required attribute name. If no method
is provided and the elementType
is an anchor (or an elementType
is not supplied) then the method
will default to href
. If the elementType
is not an anchor and no method is supplied, the method
will default to to
.
- Type:
React.ReactNode
The text of the breadcrumb. Can accept any valid React node, but should be limited to a string to conform with the design system.
- Type:
string
Any additional className will be merged on to the container
If you're not using React, then import the SCSS directly into your application by:
@forward '@nice-digital/nds-breadcrumbs/scss/breadcrumbs';
If you're not using React, then include the SCSS as above and use the HTML:
<nav aria-label="Breadcrumbs" role="navigation">
<ol class="breadcrumbs">
<li class="breadcrumbs__crumb">
<a href="https://www.nice.org.uk">NICE</a>
</li>
<li class="breadcrumbs__crumb">
<span>CKS</span>
</li>
</ol>
</nav>