PageLinks

Previous and next navigation for a reading sequence, with explicit destinations or SSG-derived neighbors.

PageLinks

View source ยท API reference

A guided reading sequence

Each link has a directional relationship and an accessible label.

<PageLinks
  :previous="{title:'Grid',url:'/components/layout/grid/'}"
  :next="{title:'Panel',url:'/components/layout/panel/'}"
/>

One available direction

An incomplete link object is ignored. Supplying an empty object suppresses the inherited neighbor for this example.

<PageLinks :previous="{}" :next="{title:'Explore the library',url:'/components/'}" />

Behavior and accessibility

Only links with both title and url render. Omitted props fall back to the page navigation context. Both directions missing removes the whole component. The root is a nav labelled Adjacent pages.

API reference

PageLinks contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

previous

PageNavigationLink
Default
context.navigation.pageLinks.previous

Previous page object with title and url. An explicit object takes precedence over context.

next

PageNavigationLink
Default
context.navigation.pageLinks.next

Next page object with title and url. An explicit object takes precedence over context.

Composition

No slots. Register definePageLinksComponents with Grid, Flex, BtnLink and Icon. SSG context is required, even when links are explicit.