Rail nav

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

• Mobile · n/a. On a phone the rail is already a bottom tab bar; a native app uses the TabBar. → Tab bar

Why it is here. Used by Orazaka, Yomizaka, Akinaza.

Installation

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

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

import { RailNav } from "@krizaka/ui/rail-nav";

Examples

Props

Accessibility

• A nav named by label; the current item carries aria-current="page".
• The shortcuts are a group named by shortcutsLabel (its heading, visible once the rail is expanded); the arrows walk through them like the other items.
• Each item is named by its label (and badgeLabel): the tooltip and the caption repeat it, they never replace it.
• The focus ring is the Krizaka signature (focus-ring-inset), kept inside the rail's edge so it is never clipped.
• A tab is at least 56 px tall, clear of the home indicator (env(safe-area-inset-bottom)); the motion of the width respects prefers-reduced-motion.
• Exactly one brand mark is visible at every width: the rail's mark below md is hidden and AppHeader's mark is shown there, and the reverse above.

Keyboard

Best practices

• Five main items at most: on a phone they are the tabs (the footer's items follow them in the same bar, so keep both short).
• Give every item an icon and a word: the icon is all a desktop shows, the word is the tooltip, the tab's caption and the accessible name.
• Put the product's mark in mark and its name in AppHeader: the mark is shown once, in the rail on a desktop and in the header on a phone. Never draw it in both.
• Render your router's links with RailNav.Item asChild; set current from the route.
• Scope the product's colours with accent (orazaka, yomizaka…) or let the page's brand class do it.
• expandable is for apps whose users know the icons less well: it widens the rail to show the words. Uncontrolled and without defaultExpanded, it is expanded from 1280 px (the words fit there) until the person toggles it.
• shortcuts (with shortcutsLabel, « Raccourcis ») holds the product's quick ways in — a saved view, a frequent client, « New invoice » — above the footer; two to four, never a second navigation. Desktop only: a phone's tab bar keeps its destinations.

Related components

• App headerThe family's top bar beside a RailNav: the product's name as text, optional status chips, then the session's controls in a fixed order — search (⌘K), language, the host's actions, messages and notifications with their unread counts, the primary action, the account with its name. Every slot is the host's; an empty one draws nothing.
• App shellThe shell of an application screen: a sidebar of sections that collapses to its icons on a desktop and opens as a drawer on a phone, a sticky header with the screen's title, a search that opens the command palette and its actions, the content — and the keyboard shortcuts a console lives by (⌘B, ⌘K, g then a letter).
• Nav barThe Krizaka navigation bar, the same on every site of the family: a floating pill that tightens as the page scrolls, the family switcher on the brand, one light that glides to the item under the pointer or the focus and rests on the current page, accessible menus with rich links, and a mobile panel.
• TooltipA short label shown on hover and on keyboard focus, next to its trigger.
• Tab barThe app's main sections at the bottom of the screen: an icon and a word each, a badge for what is new, clear of the home indicator.

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