Components
Docs nav
The pages of a documentation in quiet groups: each group folds, the one holding the current page is open, only the current page is marked.
import { DocsNav } from "@krizaka/ui/docs-nav";Web only — React, from @krizaka/ui/docs-nav. Beta: its API may still change in a minor version.
- Mobile · n/a. Documentation is read on the sites, not inside an app.
- Desktop · n/a. A public site's page, not a window of the Mac app.
Why it is here. Groups the pages in the documentation sidebar.
When to use
- The
sidebarof aDocsLayoutorDocsArticlePage. - A documentation with two or more audiences (a guide, a reference) that must not be mixed.
When not to use
- For the sections of one page.Use instead: Table of contents
- For the site's main navigation.Use instead: Nav bar
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { DocsNav } from "@krizaka/ui/docs-nav";Examples
A guide and a reference
Two groups, the second page current.
Props
The pages of the documentation in groups; the group of the current page is open, the others fold.
| Prop | Type | Default | Description |
|---|---|---|---|
groupsrequired | readonly DocsNavGroup[] | — | The groups, in order. |
labelrequired | string | — | The navigation's accessible name (Documentation). |
current | string | — | The href of the page being read. |
linkAs | LinkComponent | — | The app's link component (Next's Link). |
Accessibility
- A
navnamed bylabel; the current page carriesaria-current="page". - Groups are native
details: they work without script.
Keyboard
| Keys | Action |
|---|---|
| Enter / Space | Opens or closes a group. |
| Tab | Walks the links of the open groups. |
Best practices
- Titles of one line: shorten them, the page's own title says the rest.
- No icon and no emoji: the active page is the only thing that stands out.
Related components
Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub