Navigation

PostNavigation

Previous/next links for paging between adjacent pages of content.

html
<UiPostNavigation :surround="..." />

Surround

required

surround 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.

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

Prop
Type
Default
Description
surroundrequired
(PostNavigationLink | null | undefined)[]
Two entries: `[previous, next]`. Pass `null` (or leave an entry out) for a side with no page.
string
'Previous'
Shown under the previous page's title when it has no `description`.
string
'Next'
Shown under the next page's title when it has no `description`.

Types

ts
interface PostNavigationLink {
    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;
}