Pagination

Overview

Pagination is helm-native: it implements its own presentation directly, with no Navius primitive underneath. ZitsPagination is a nav landmark; ZitsPaginationContent and ZitsPaginationItem are plain list wrappers; ZitsPaginationLink renders a page-number link styled with the button variants (outline when active, ghost otherwise), and ZitsPaginationPrevious/ZitsPaginationNext each compose a default-size ZitsPaginationLink with a chevron and label. ZitsPaginationEllipsis is a non-interactive marker for skipped pages.

Install

navius add pagination --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsPagination>
    <ZitsPaginationContent>
        <ZitsPaginationItem><ZitsPaginationPrevious Href="?page=1" /></ZitsPaginationItem>
        <ZitsPaginationItem><ZitsPaginationLink Href="?page=1" IsActive="true">1</ZitsPaginationLink></ZitsPaginationItem>
        <ZitsPaginationItem><ZitsPaginationLink Href="?page=2">2</ZitsPaginationLink></ZitsPaginationItem>
        <ZitsPaginationItem><ZitsPaginationEllipsis /></ZitsPaginationItem>
        <ZitsPaginationItem><ZitsPaginationNext Href="?page=2" /></ZitsPaginationItem>
    </ZitsPaginationContent>
</ZitsPagination>

Parts and props

ChildContent and Attributes pass through unchanged on ZitsPagination, ZitsPaginationContent, and ZitsPaginationItem.

ZitsPaginationLink adds:

Prop	Type	Default	Description
IsActive	bool	false	Renders the outline (active) variant instead of ghost, and sets aria-current="page".
Size	string	"icon"	One of default, sm, lg, icon.
Href	string?	"#"	The link target.

ZitsPaginationPrevious/ZitsPaginationNext add:

Prop	Type	Default	Description
Href	string?	"#"	The link target, forwarded to the composed ZitsPaginationLink.

ZitsPaginationEllipsis takes no props of its own beyond Attributes.

Styling surface

Attributes on every part is merged with that part’s base class set via Cn.Class, with the caller’s classes applied last.

Parameter	Values
Size (Link)	default · sm · lg · icon

Data attribute hooks

Pagination emits no data-* state hooks; active-page state is expressed through aria-current="page" on ZitsPaginationLink rather than a data attribute.

Accessibility mechanism

The root renders role="navigation" with aria-label="pagination". ZitsPaginationLink sets aria-current="page" when IsActive is true. ZitsPaginationEllipsis carries aria-hidden="true" plus a visually-hidden “More pages” label, and ZitsPaginationPrevious/ZitsPaginationNext set aria-label on their composed link.