BumblebeeBumblebee

Primary navigation

Contents

Live demoDesignCode

Live demo

Design

Usage

The Navigation bar is to be used as the primary mode of navigating through the platform.

Users should be able to easily understand in which section they are in and which sections are available to them.

As default the first section would be selected upon access to the platform.

As per requirements of out personas, we are only going to be providing a solution for XL and L viewports. The M, S and XS will have a hidden navigation and will be a separate component.

Specs

The Navigation bar is made up of a Primary-base background with the Shieldpay logo at the top. This is fixed to the left at 264px at XL to L and shrinks on smaller viewports.

The components within the navigation bar are the navigation buttons that span the full width of the bar at 264px. The navigation buttons are all 48px in height and sit flush to each other with the first button being 40px from the logo.

The states of the buttons are as follows:
Default, Hover, Focus, Selected, Selected focus, Disabled

Please refer to Components and Specs for examples

Behaviour

The interactivity of the Nav buttons are as follows:

  • Default - idle state, no interaction
  • Hover - user hovers over the button
  • Focus - user tabs over a default button
  • Selected - this button indicates the page you are on
  • Selected focus - user tabs over a selected button
  • Disabled - button is inactive, no hover or focus states

Transition between states should be set to a 0.25 ease (To be reviewed in browser)

Focus states should animate just like buttons

Placement

The components within the navigation bar are the navigation buttons that span the full width of the bar at 264px. Please refer to Placement for examples of this.

Accessibility

Use the appropriate ARIA attributes for screen readers where applicable.

Code

import { PrimaryNav } from '@shieldpay/bumblebee/primary-nav';

<PrimaryNav>
  <PrimaryNav.Item to="/">Current page</PrimaryNav.Item>
  <PrimaryNav.Item disabled to="/forbidden">
    Forbidden page
  </PrimaryNav.Item>
</PrimaryNav>;