@nice-digital/nds-breadcrumbs
TypeScript icon, indicating that this package has built-in type declarations

4.0.8 • Public • Published

@nice-digital/nds-breadcrumbs

Breadcrumbs component for the NICE Design System

Installation

Install Node, and then:

npm i @nice-digital/nds-breadcrumbs --save

Usage

React

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.

Routing

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>;

Props

Breadcrumbs
children
  • Type: Breadcrumb, Array<Breadcrumb>

The indvidual breadcrumb items

rest

Any additional props will be spread across the containing nav, including any additional classNames

Breadcrumb
to
  • Type: string

The URL the breadcrumb links to

elementType
  • Type: null, React.ElementType
  • Default: "a"

A custom tag type. Defaults to a normal HTMLAnchorElement. Use this prop to use custom routing.

method
  • 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.

children
  • 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.

className
  • Type: string

Any additional className will be merged on to the container

SCSS

If you're not using React, then import the SCSS directly into your application by:

@forward '@nice-digital/nds-breadcrumbs/scss/breadcrumbs';

HTML

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>

Readme

Keywords

Package Sidebar

Install

npm i @nice-digital/nds-breadcrumbs

Weekly Downloads

67

Version

4.0.8

License

MIT

Unpacked Size

11.7 kB

Total Files

8

Last publish

Collaborators

  • wongcheming
  • johndavey72
  • barkertron
  • martingallagher1980
  • ditprogrammatic
  • ediblecode
  • josealmeida
  • mark-nice
  • nansenst
  • colin.mazurkiewicz
  • imranazad
  • eleanormollett