Navigation Bar - Usage

Example

Basic Guidelines

The Navigation Bar is used for:

• Page navigation (directing users to a different page), or
• In-page navigation via anchor links (moving to a different section on the current page)
• As a Tab-style component to conditionally render content (this is a development specific requirement).

Behaviour

One Nav-item is always active at any one time. A Nav-item cannot be unselected when it’s clicked on.

When the Navigation Bar is used for anchor links, it will stick to the top with the content scrolling behind. The selected nav item will update based on the users’ scroll position.

If the Navigation Bar is too wide for the viewport, the text will be clipped and the bar becomes scrollable. For devices that don’t support horizontal scrolling (i.e. Windows machines), a native scrollbar will be shown to enable the users to navigate through all items.

Variants Usage

The OnScroll variant is turned on when the Navigation Bar is used for anchor links. The Navigation Bar will stick to the top of the screen, with the content scrolling behind it.

Content Guidance

Keep labels clear and short, ideally just one or two words long. A second line of text can be used if it helps clarity.

Alignment

The Navigation Bar is set to span the whole viewport and margins are built in. The items stretch depending on their content. The Navigation Bar usually sits centre aligned on a page.

Content overflow in Figma

The Navigation-Bar is centre-aligned by default, assuming that all content fits the viewport. If the content is wider than the viewport, the content overflow variant should be used to align the Nav-Items to the left hand side.

The Navigation-Bar is already set up to scroll horizontally in prototypes. The component frame needs to be set to the width of the viewport for the scrolling to work in a prototype.

Colour Usage

The trim should always remain the default colour, and should not be changed to any other brand colour.

Icon Usage

Icons are supported within Nav-items and sit centre-aligned above the text label. If Icons are used, they need to be used on every Nav-item for consistency.

Notes on Accessibility

Keyboard interaction

When a Nav-item receives focus, the user needs to select "enter" to activate the link with the Nav-item. The focus will remain on the selected Nav-item.

Within the list of Nav-items, the left and right arrow keys are used to move to the next or the previous item. On Windows keyboards, the Home key can be used to jump to the first item, and the End key can be used to jump to the last one.

Screen reader interaction

Unlike the Tabs component, content associated with the Navigation bar can be rendered conditionally. This means, the content is not necessarily directly available to screen reader users, but requires an action first.

Screen reader output will differ based on the usage and the required attributes —

Example 1 — Navigation Bar used for page navigation

Example 2 — Navigation Bar used for in-page navigation