Docs layout
A documentation page in the site's frame: the pages, the article and its contents on a wide screen; on a phone the pages fold into a disclosure above the article.
Web only — React, from @krizaka/ui/docs-layout. Beta: its API may still change in a minor version.
When to use
- A documentation without a docs engine, or around one.
- Guides and references of a product.
When not to use
- For a reading page of a site without a list of pages.Use instead: Table of contents
- For a hub of entry points.Use instead: Link card
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { DocsLayout } from "@krizaka/ui/docs-layout";Examples
A documentation page
Pages, an article with two headings, its contents.
Pages of the documentation
Getting started
Install
npx orazaka install
Props
A documentation page: pages · article · contents, in the site's frame.
| Prop | Type | Default | Description |
|---|---|---|---|
sidebarrequired | ReactNode | — | The pages of the documentation (a nav of links, grouped). |
sidebarLabelrequired | string | — | On a phone the sidebar is folded: the words that open it (Pages of the documentation). |
toc | ReactNode | — | The page's table of contents (a Toc of
@krizaka /ui/toc): beside the article from xl. |
Accessibility
- The pages are your
nav; on a phone the same nav sits in a nativedetails. - The article is an
article; the contents aToc.
Keyboard
| Keys | Action |
|---|---|
| Enter / Space | On a phone, opens or closes the list of pages. |
Best practices
- The frame of the docs is wider (
--kz-page-max-docs): give the bar the same width on these pages. - Keep the article under 48rem; the contents list three to eight headings.
Related components
Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Detail layout
One object's page: the way back, its media, name, status, facts and actions, its tabs, the content and a side panel that goes under the content on a phone.
Marketing layout
A site's page: the link that skips to the content, the floating bar, the page made of a PageHero and Sections in one frame, the footer.