Navigation
SiblingNavigation
Previous/next links for paging between adjacent pages of content.
<UiSiblingNavigation :surround="..." />Options
One block per prop — what it does, and what it looks like set.
Surround
requiredsurround is a two-entry array, [previous, next]. Pass null for a side with no page — the first and last pages of a sequence each lose one, and the component lays out around the gap.
Previous label
previousLabel is shown under the previous page's title when that page has no description of its own — a fallback, so the card never has an empty second line.
Next label
nextLabel is the same, on the other side.
Examples
The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.
With descriptions
A link carrying its own description uses it in place of the previous/next label — worth doing when the titles alone don't say much.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
surroundrequired(SiblingNavigationLink | null | undefined)[]Types
interface SiblingNavigationLink {
title: string;
to: string;
/**
* Replaces the direction label under the title.
*
* Worth setting when the destination's name doesn't say what it is — a component called `Kbd`
* or `Info` tells the reader nothing on its own, and one line of what they'd find there is
* more use than being told a second time which way they're going. The arrow and the side of the
* row already carry the direction, so this isn't losing anything.
*/
description?: string;
}