Navigation Beta

This page describes navigation components, including primary (top) and secondary (side) navigation.

SkipLinkNavigation REACT-ONLY BETA

This is the first navigation on almost every page, but a lot of customers will never see it, because here the so-called skip links are located. They are only revealed when navigated to using the Tab key. They give quick access to important areas of the page, by “jumping over” content that is in between the skip link and its target. Most of the time, clicking a skip link will bypass the primary navigation, and maybe even the secondary navigation (both are described further down on this page). In other words, these links take the customer directly to the main content, i.e. the focus will end up either at the Stripe title, or at a specific place after the secondary navigation. There is no limit to how many links may be added, but in reality it is usually one or two.

Loading demo…

PrimaryNavigation BETA

Open in Storybook Open in Figma

A large navigation is shown on tiers LG and above, while on MD and below we switch to a mobile-friendly compact variant.

Loading demo…

Rules For Copywriters

Overflow in the large navigation is handled in a specific way: The buttons on the left (first one excluded) might end up being truncated.

SecondaryNavigation

Open in Storybook Open in Figma

SecondaryNavigation is displayed on the left side and serves as a place for secondary items. The items can contain a Pill or a “New” Badge.

Loading demo…

Rules For Accessibility

Add an aria-label to the secondary navigation, so that the user can quickly differentiate between the individual types of navigation on the page, and their purpose.
Consider adding aria-current="page" to the selected item in the secondary navigation, to improve orientation in the menu.

Rules For Copywriters

You can find guide for menu items in the UI text section.

Nested items

SecondaryNavigation can be also used with two levels.

Loading demo…

Rules For Designers

This variant is used in George Business and in that case it should include icons.

Section headers

SecondaryNavigation can include non-interactive section headers.

Loading demo…

AnchorNavigation REACT-ONLY

Open in Storybook Open in Figma

Infinite scroll

The main purpose of the anchor Navigation is to provide quick links to month headings in transaction lists. As this type might result in a large number of anchors, AnchorNavigation can be instructed to show only a certain number of entries from the list.

Loading demo…

Rules For Developers

If maxItems is lower than the number of items provided, it will limit the displayed items, to prevent AnchorNavigation from growing too large in height. Up to two separators will be added to indicate missing items.
Setting maxItems to less than five is possible, AnchorNavigation will make sure to never exceed the corresponding maximum height. However, very soon the point where only the selected item can be rendered will be reached, reducing AnchorNavigation’s usefulness to a plain scroll indicator.

Static sections

In addition to transaction lists, there is a similar usage for Securities, where the number of entries is static.

Loading demo…

PaginationNavigation REACT-ONLY BETA

Open in Storybook Open in Figma

PaginationNavigation can be used to navigate through an ordered collection of pages. It should be placed at the bottom of each of these pages.

Loading demo…

BreadcrumbNavigation REACT-ONLY BETA

Open in Storybook Open in Figma

BreadcrumbNavigation serves for displaying the current position in a multilevel hierarchy and to navigate back to the top. It should be placed above the content.

Loading demo…