Breadcrumbs

Library

Allium Design Systemweb-only

Repository

github.com/telus/allium-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

Loading...

<Breadcrumbs> <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item> <Breadcrumbs.Item href="/mobility">Mobility</Breadcrumbs.Item> <Breadcrumbs.Item href="/mobility/accessories">Accessories</Breadcrumbs.Item> </Breadcrumbs>

<Breadcrumbs>
  <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/mobility">Mobility</Breadcrumbs.Item>
  <Breadcrumbs.Item href="/mobility/accessories">Accessories</Breadcrumbs.Item>
</Breadcrumbs>

Introduction

import { Breadcrumbs } from '@telus-uds/ds-allium'

Breadcrumbs display a hierarchy of links, commonly used for navigation.

Guidance

• Breadcrumb links must link to internal pages at telus.com
• Use plain language to describe the page title
• We recommend the Breadcrumbs depth contain fewer than five links
• All links in the Breadcrumbs are clickable. The last Breadcrumbs.Item is not a link
• The Breadcrumbs appear as the 3rd tier of the navigation
• On desktop viewports, the Breadcrumbs should be displayed inline, without wrapping. If the Breadcrumbs need to wrap we recommend a maximum of 2 lines
• On mobile viewports, the Breadcrumbs can wrap a maximum of three lines

Using routes

Loading...

<Breadcrumbs routes={[ { path: '/', breadcrumbName: 'Home' }, { path: '/mobility', breadcrumbName: 'Mobility' }, { path: '/accessories', breadcrumbName: 'Accessories' } ]} />

<Breadcrumbs
  routes={[
    {
      path: '/',
      breadcrumbName: 'Home'
    },
    {
      path: '/mobility',
      breadcrumbName: 'Mobility'
    },
    {
      path: '/accessories',
      breadcrumbName: 'Accessories'
    }
  ]}
/>

Usage with React Router

caution

Versions of react router prior to 5 are not officially supported and their usage may cause unexpected issues.

React Router 5

To use Breadcrumb with react router v5 you can define an object containing all of your possible crumbs. You can then use location passed down from react-router to build a Breadcrumbs.Item array. You must also pass a reactRouterLinkComponent prop.

import { Link as ReactRouterLink } from 'react-router-dom'
import { Breadcrumbs } from '@telus-uds/components-allium-web'

const breadcrumbNameMap = {
  '/mobility': 'Mobility',
  '/mobility/accessories': 'Accessories',
  '/something/else': 'Something else'
}

const BreadcrumbNavigation = ({ location }) => {
  const crumbs = location.pathname.split('/').filter((i) => i)
  const extraBreadcrumbItems = crumbs.map((i, index) => {
    const url = `/${crumbs.slice(0, index + 1).join('/')}`
    return <Breadcrumbs.Item href={url}>{breadcrumbNameMap[url]}</Breadcrumbs.Item>
  })

  const breadcrumbItems = [
    <Breadcrumbs.Item key="home" href="/">
      Breadcrumbs.Item
    </Breadcrumbs.Item>
  ].concat(extraBreadcrumbItems)

  return <Breadcrumbs reactRouterLinkComponent={ReactRouterLink}>{breadcrumbItems}</Breadcrumbs>
}

Combining React Router Links with standard anchor links

If you need to combine both react-router-dom and UDS Link components, you can add a reactRouterLinkComponent prop to Breadcrumbs.Item where needed as shown below.

import { Link as ReactRouterLink } from 'react-router-dom'
import { Breadcrumbs } from '@telus-uds/components-allium-web'

const BreadcrumbNavigation = () => (
  <Breadcrumbs>
    <Breadcrumbs.Item href="/my-account">My TELUS</Breadcrumbs.Item>
    <Breadcrumbs.Item href="/my-account/services" reactRouterLinkComponent={ReactRouterLink}>
      Services
    </Breadcrumbs.Item>
    <Breadcrumbs.Item
      href="/my-account/services/internet"
      reactRouterLinkComponent={ReactRouterLink}
    >
      Internet
    </Breadcrumbs.Item>
  </Breadcrumbs>
)

Accessibility

No accessibility notes.

Platform considerations

This component is currently only supported on web.

Figma

Props

Name	Type	Default	Description
baseUrl	string		Base URL used to build structured data.
children	componentPropType('Item')		A list of Items to be used as an alternative to the 'routes' prop.
params	object	{}	React Router params.
reactRouterLinkComponent	func | object		React Router Link component. @deprecated please use 'LinkRouter' and 'linkRouterProps' instead
routes	Array<{ path: string, breadcrumbName: string }>		An array of routes to be displayed as breadcrumbs.

Variants

This component does not have any stylistic variants.

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support