On this page
Overview
Each link shows its destination's title under the label Previous or Up next.
Show code, PreviousAndNext.tsx
Variants
The links alone
The previous and next links are parts of their own too, which make the same pair together and also stand alone.
Show code, ComposedParts.tsx
Anatomy
Pager
Link
Icon
Direction
Title
Show code, PagerAnatomy.tsx
Behaviour
Step through a guide
At either end of the sequence, leave out the missing destination: a single link stays centred.
Show code, StepThroughAGuide.tsx
Adapting to width
The links sit side by side while they fit.
- In less room each takes a centred row of its own.
- Titles wrap between words.
Show code, LongTitles.tsx
Rules
A link names its destination by its title, in the order the navigation lists the pages.
Use it when
- Links to the neighbouring pages of a guide, a handbook or release notes
- Moving on to the next page of reading, or back a page
Titles
Use the title as the page's heading reads it. Leave Next or Back out of it: the label already says the direction.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves focus to the previous link, then to the next link. |
| Enter | Follows the focused link. |