NavigationBar

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

Introduction

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

Use NavigationBar to allow customers to consistently navigate across a group of pages, such as key pages within a specific product line.

Guidance

• Place NavigationBar directly under the main navigation whenever possible
• NavigationBar heading should carry the page's h1 tag (used by default whenever the heading prop is provided)
• NavigationBar converts to a dropdown in smaller screen sizes (M, S, & XS breakpoints)
• Item labels should not be full sentences or sales messaging
• It's recommended to use headings and labels that are 35 characters or fewer
• Be considerate of other languages & label lengths when writing
• It's advised to limit the number items to 7 in total
• Item dropdowns should have no more than 5 items
• NavigationBar should always live on a white background (ie. it should not blend into the content of the page)
• A grey/other colored background should be used for the element (e.g. hero or category banner) directly below the NavigationBar
• A page can use either a NavigationBar or an on-page navigation, not both
• If the links should control content within the same page, including via hash links, use Tabs instead
• The items array should be identical between each NavigationBar in each page in a set. Consider defining it in its own file and importing it into each appropriate page
• Provide a marketing/creative led headline in the hero banner; render as <h2>
• Avoid full sentences or sales messaging

Loading...

<> <NavigationBar heading="Title for whole section" selectedId="3.1" onChange={(id, event) => console.log(`Selected id ${id}`, event)} items={[ { id: '1', label: 'Page in section', href: '#' }, { id: '2', label: 'Another page', href: '#' }, { id: '3', label: 'Group of pages', onClick: (event) => console.log('Click event', event), items: [ { id: '3.1', label: 'Page in group', href: '#' }, { id: '3.2', label: 'Another in group', href: '#' } ] } ]} /> <Spacer space={11} /> <Spacer space={{ xs: 11, lg: 0 }} /> </>

<>
  <NavigationBar
    heading="Title for whole section"
    selectedId="3.1"
    onChange={(id, event) => console.log(`Selected id ${id}`, event)}
    items={[
      {
        id: '1',
        label: 'Page in section',
        href: '#'
      },
      {
        id: '2',
        label: 'Another page',
        href: '#'
      },
      {
        id: '3',
        label: 'Group of pages',
        onClick: (event) => console.log('Click event', event),
        items: [
          {
            id: '3.1',
            label: 'Page in group',
            href: '#'
          },
          {
            id: '3.2',
            label: 'Another in group',
            href: '#'
          }
        ]
      }
    ]}
  />

  <Spacer space={11} />
  <Spacer space={{ xs: 11, lg: 0 }} />
</>

Accessibility

NavigationBar is designed to be accessible to users navigating by keyboard:

• Pressing "space" or "enter" keys open and close dropdown menus while their control button is focused.
• Items within a dropdown menu are focused next on pressing the "tab" key.
• After tabbing through the dropdown menu, focus goes to the next item in the main menu.
• Pressing "esc" key while any dropdown menu item is focused closes the dropdown menu.

Platform considerations

This component is currently only supported on web.

For a similar navigation pattern in native apps, use Tabs with an appropriate navigation function passed to its onChange prop.

Props

Name	Type	Default	Description
accessibilityRole		'navigation'
heading	string	undefined	Common navigation bar heading.
headingLevel	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'	'h1'
items*	Array<{ label: string, href: string, id: string, onClick: func, selected: bool, LinkRouter, linkRouterProps, items: arrayOf }>		NavigationBar pages Each 'item' object must contain: - 'heading' - user-facing text in the tab link - 'href' - the URL of the page linked to. Do not use hash links, for content within a page, use 'Tabs'. - 'id' - a stable, unique identifier of the page within the set. Not written into the HTML.
onChange	func	() => {}	Optional function to be called on pressing a link
selectedId*	string		Matches the 'id' property of the item in 'items' corresponding to the current page

Figma

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