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.
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
The interactivity of the Nav buttons are as follows:
Transition between states should be set to a 0.25 ease (To be reviewed in browser)
Focus states should animate just like buttons
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.
Use the appropriate ARIA attributes for screen readers where applicable.
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>;