PrevNext

Links to the pages before and after.

An interactive page: C# runs over a Blazor Server connection.

Previous and next links for the end of an article: two cards with the page titles, side by side from 32rem of width up (the previous one at the start, the next at the end), stacked below. Plain links with rel="prev" and rel="next", so it needs no script.

Usage

razor

<PrevNext PreviousHref="docs/install" PreviousTitle="Install"
          NextHref="docs/theming" NextTitle="Theming" />

Previous and next pages

Use PreviousHref and NextHref, each with its page's title, to end an article; leave out a side on the first or last page.

Preview Code

Preview

Code

Pages.razor

<PrevNext PreviousHref="docs/components/pagination" PreviousTitle="Pagination"
          NextHref="docs/components/stepper" NextTitle="Stepper" Grow />

Mode support

What works in each mode, PrevNext
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders a nav named "More pages" (Label) holding plain links.
Each link's name is its direction and the page title, as in "Next Theming"; a link needs its PreviousTitle or NextTitle.
With neither link it renders nothing, so there's no empty landmark.

Parameters

PrevNext parameters
Prop	Type	Default
`PreviousHref`The previous page's URL.	`string?`
`PreviousTitle`The previous page's title.	`string?`
`NextHref`The next page's URL.	`string?`
`NextTitle`The next page's title.	`string?`
`PreviousText`The small text above the previous page's title.	`string?`	`"Previous"`
`NextText`The small text above the next page's title.	`string?`	`"Next"`
`Label`The navigation landmark's name.	`string?`	`"More pages"`

Plus 16 item props and 4 common props.

Full API