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.
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.
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.
Rules For Accessibility
- Add an
aria-labelto 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.
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.
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.
Rules For Developers
- If
maxItemsis 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
maxItemsto 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.
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.
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.