Navigation methods
Users should be able to navigate to each item using the stepper controls:
- Using a cursor — Click on the previous/next button or click on a specific indicator to jump directly to that item
- Using keyboard controls — Navigate to a button or to each indicator using Tab, then activate with Enter or Space
Navigation patterns
There are two different ways to display content using a stepper/carousel:
First to last
L to R: Next button active, Both buttons active and Previous button active
If a user is required to stop at the first or last item in a collection, then the corresponding icon button should be disabled.
- At first item: The previous button is disabled, the next button is active
- At last item: Next button is disabled, previous button is active
- Middle items: Both buttons are active
This pattern has a clear beginning and end, preventing users from wrapping around to the start.
Continuous loop
L to R: Buttons are always active to move forward and backward
Components that have no endpoint always display the start and end buttons as active.
- All positions: Both previous and next buttons remain active
- From the last item: The next button returns to the first item
- From the first item: The previous button goes to the last item
This pattern allows infinite browsing through the collection without reaching an end.
Visual indicators
- Each item in the collection is represented by a visual indicator (typically a dot or dash)
- The current item is highlighted with a distinct visual style (e.g., filled, larger, different colour)
- Indicators can be clicked/tapped to jump directly to that item
- The number of indicators matches the number of items (2-5)