SubNavigation

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

<SubNavigation items={[ { id: 'one', label: 'Page one', href: '/allium-design-system/components/components/sub-navigation' }, { id: 'two', label: 'Page two', href: '/allium-design-system/components/components/sub-nav-pages/page2' }, { id: 'three', label: 'Page three', href: '/allium-design-system/components/components/sub-nav-pages/page3' } ]} pageId="one" />

<SubNavigation
  items={[
    {
      id: 'one',
      label: 'Page one',
      href: '/allium-design-system/components/components/sub-navigation'
    },
    {
      id: 'two',
      label: 'Page two',
      href: '/allium-design-system/components/components/sub-nav-pages/page2'
    },
    {
      id: 'three',
      label: 'Page three',
      href: '/allium-design-system/components/components/sub-nav-pages/page3'
    }
  ]}
  pageId="one"
/>

Introduction

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

caution

Deprecated for NavigationBar

As of ds-allium version 1.11.0, the SubNavigation component is deprecated and should not be used.

NavigationBar should be used instead.

Sites that use SubNavigation should begin to replace SubNavigation with NavigationBar.

Use SubNavigation to display a horizontal menu of links to distinct web pages.

SubNavigation is built on the Tabs component and has similar behaviours including left and right buttons that appear if there are too many items to fit in the available space.

Guidance

• Use SubNavigation for links that direct to another page.
• If the links should control content within the same page, including via hash links, use Tabs instead.
• Recommend to use labels that are 35 characters or fewer
• The items array should be identical between each SubNavigation in each page in a set. Consider defining it in its own file and importing it into each appropriate page.

Accessibility

• If a user is using tabbed navigation and horizontal scrolling is required, tabbing through links scrolls them into view automatically
• Scrolling methods other than the scroll buttons may also be used, such as touchscreen swipes and touchpad or mousewheel scrolling
• Consider using a URL parameter for subnav links which, when the target page loads, sets the initial focus within the content below the SubNavigation component

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'
items	Array<{ label: string, href: string, id: string, LinkRouter, linkRouterProps }>		Array detailing the items in this SubNavigation. Since this will be shared between multiple SubNavigation-based pages, and should be identical between each page in the SubNavigation, it is usually a good idea to define it in one file and import that into each page. Each 'item' object must contain: - 'label' - 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.
LinkRouter	withLinkRouters? .LinkRouter
linkRouterProps	withLinkRouters? .linkRouterProps
onChange	func	() => {}	Optional function to be called on pressing a link
pageId*	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