PrevNext

Usage

import { PrevNext, PrevNextLink } from '@hina-ui/vue'

PrevNext is the navigation landmark and the two-column container; PrevNextLink is one side of it. direction is required and takes prev or next, deciding which column the link falls in, which way the arrow points and the default caption.

The default slot is the title of the target page. The caption — “Previous page” or “Next page” — comes from the component according to direction and the interface language.

<script setup lang="ts">
  import { PrevNext, PrevNextLink } from '@hina-ui/vue'
</script>

<template>
  <PrevNext class="w-full max-w-2xl">
    <PrevNextLink direction="prev" href="#">Breadcrumb</PrevNextLink>
    <PrevNextLink direction="next" href="#">Splitter</PrevNextLink>
  </PrevNext>
</template>

Use it for neighbouring pages in a linear reading order, such as the previous and next articles in a guide or chapters in a novel. Paginating a filtered result set is a different job and not this component’s.

Examples

One side only

The first and last pages have only one direction to go, so a single PrevNextLink is enough. next always occupies the right column, so it stays on the right when it appears alone, in the same place as when both sides are present.

<script setup lang="ts">
  import { PrevNext, PrevNextLink, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack gap="lg" class="w-full max-w-2xl">
    <Stack gap="sm">
      <Text size="sm" tone="faint">Next only</Text>
      <PrevNext>
        <PrevNextLink direction="next" href="#">Chapter 1 The Summer Door</PrevNextLink>
      </PrevNext>
    </Stack>

    <Stack gap="sm">
      <Text size="sm" tone="faint">Previous only</Text>
      <PrevNext>
        <PrevNextLink direction="prev" href="#">Chapter 12 Finale</PrevNextLink>
      </PrevNext>
    </Stack>
  </Stack>
</template>

Captions

label on PrevNextLink overrides the caption; label on PrevNext overrides the landmark’s accessible name. Both have defaults in the interface language, so rewrite them to match the level of the content — “Previous volume” in place of “Previous page”, for instance.

<script setup lang="ts">
  import { PrevNext, PrevNextLink } from '@hina-ui/vue'
</script>

<template>
  <PrevNext label="Volume pagination" class="w-full max-w-2xl">
    <PrevNextLink direction="prev" label="Previous volume" href="#">Volume 2</PrevNextLink>
    <PrevNextLink direction="next" label="Next volume" href="#">Volume 4</PrevNextLink>
  </PrevNext>
</template>

Router links

as sets what the link renders as, defaulting to a. Pass a router component for client-side navigation and attributes such as to pass through.

<script setup lang="ts">
  import { NuxtLink } from '#components'
  import { PrevNext, PrevNextLink } from '@hina-ui/vue'

  const localePath = useLocalePath()
</script>

<template>
  <PrevNext class="w-full max-w-2xl">
    <PrevNextLink direction="prev" :as="NuxtLink" :to="localePath('/components/nav-link')">
      NavLink
    </PrevNextLink>
    <PrevNextLink direction="next" :as="NuxtLink" :to="localePath('/components/anchor')">
      Anchor
    </PrevNextLink>
  </PrevNext>
</template>

Behaviour

• One column on narrow screens, two columns from the sm breakpoint up.
• prev aligns to the left and next to the right, with the arrow on the outer side of the text.
• next always occupies the right column and never slides across when it appears alone.
• Links carry rel="prev" or rel="next", which search engines and browsers use to read the sequence.
• A ripple spreads from the point of contact on click.

Accessibility

• The wrapper is a nav landmark whose default accessible name follows the interface language (“Pagination” in English); label overrides it.
• Arrows carry aria-hidden; direction is carried by the caption rather than the glyph.
• A link’s accessible name covers both the caption and the target title, which screen readers announce together, so no extra description is needed.

API

PrevNext

PrevNextLink

Remaining attributes pass through to the rendered element, such as href or a router component’s to.