Page index

A book's index for a documentation or a catalogue: groups, entries, a dotted leader and the page number at the end of the line; the current entry marked in the margin.

Web · ✓Mobile · n/aDesktop · ✓BetaNavigation

import { PageIndex } from "@krizaka/ui/page-index";

Web only — React, from @krizaka/ui/page-index. Beta: its API may still change in a minor version.

Mobile · n/a. A documentation sidebar; an app's navigation is its tab bar and lists. → List

Why it is here. The Cahier (ADR-004): the index of ui.krizaka.com's components, numbered like a reference book.

When to use

The sidebar of a documentation: the components of a group, numbered as the pages of a reference book.
The table of a catalogue or a long read, where a number helps the reader find a page again.

When not to use

The sections of the page being read.Use instead: Table of contents
The navigation of an application.Use instead: Rail nav

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { PageIndex } from "@krizaka/ui/page-index";

Examples

A documentation's index

Two groups, the current entry marked, the page numbers aligned.

Props

A book's index: headings, entries, a dotted leader and the page number; the current entry marked in the margin.

Prop	Type	Default	Description
`groups`required	`readonly IndexGroup[]`	—	The groups, in reading order.
`label`	`string`	`Index`	The accessible name of the navigation.
`linkAs`	`LinkComponent`	—	The app's router link (Next's `Link`), so internal entries prefetch.

Accessibility

A nav named by label (« Index »); each group a heading and a list of links.
The current entry carries aria-current="page"; the margin's arrow and the dotted leader are decorative.

Best practices

Numbers are the reader's landmarks: keep them stable (a component keeps its number across versions).
Group titles are short and typed in lower case; three to eight entries per group.
Pass the router link as linkAs so internal entries prefetch.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub