Navigation & shell

Owner rule

One bar for the whole family (NAV-SYS).

Size budget

227.9 kB gzip for the whole domain; it only goes down.

Entries

28 entries, 16 used by live products and sites. Experimental entries come last: they may change or go in any minor version.

• Page headerThe top of a page: a breadcrumb, the title, a description and the page's actions.26 files import it
• App frameBetaThe one signed-in frame of a Krizaka web product: the rail (a bottom tab bar on a phone), the family's top bar and the account menu, composed from data — sections, account and the primary action. The frame owns what must not differ between products: the account menu's content and order, the preferences living in the menu, a place being on the rail or under the avatar, never both.7 files import it
• App headerBetaThe 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 shellBetaThe 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).4 files import it
• Collection switcherBetaMoves between the collections of a workspace, flat or nested, with the default one marked and never removable; in entity mode, a compact switcher for a shop or a studio.
• CommandBetaA command palette on cmdk: a search input over a filtered list of commands, inline or in a dialog.3 files import it
• Dashboard layoutBetaA dashboard: the screen's heading with its actions and filters, then a responsive grid of widgets — one column on a phone, two from sm, four from xl — each a titled region that spans one to four columns.3 files import it
• Detail layoutBetaOne 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.5 files import it
• Grid and columnsBetaLayouts that choose their columns from the room they are given — compact, regular or expanded — never from a device name: a grid of equal cells that never gets narrower than minItemWidth, and columns that sit side by side or stack. Safe with right-to-left and with text at 200 %.
• HeaderBetaA screen's header: the bar under the status bar, and a large title that folds into it as the content scrolls.
• Language switchBetaThe one language control of the family: a globe and the current code (FR) that opens a short list of the languages, each named in its own language (Français · English), as links with hreflang to the same page.14 files import it
• List and detailBetaA list and the item open from it. One pane at a time on a phone — the list, then the item with the way back — and both side by side when the room holds them, decided by the width the layout is given, not by the device.
• Nav barBetaThe 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.18 files import it
• OnboardingBetaA first launch in a few slides: swipe or tap Next, Skip at any time, dots that say where you are.
• PaginationBetaMoves through a long list page by page: numbers with ellipses that fold into “Page 3 of 12” on a phone, or previous / next on a cursor.1 files import it
• Rail navBetaThe compact navigation of an application: a vertical rail of icons on a desktop — the product's mark on top, a tooltip on each icon, an accent bar on the current one, a footer for settings and the account — that becomes a bottom tab bar on a phone. Paired with AppHeader, which carries the product's name (and, on a phone, its mark).
• ScreenBetaA screen of the app — a header, the content (scrolling, rising with the keyboard, refreshing on a pull), a footer — and the templates built on it: app shell, dashboard, sign-in, profile, feed, chat, settings, a map, notifications.
• SegmentedBetaA segmented control that switches between views of a screen — the native counterpart of the web's segmented tabs.
• Settings layoutBetaSettings: the sections on the side, alone or in titled groups (a row of chips on a phone, one menu past five), an optional identity header and the current section's forms, as titled cards with their own save or, flat, as hairline-divided rows (SettingsRow).25 files import it
• Site footerBetaThe footer of a Krizaka site, one calm band: its own columns beside the family's — Products · Open source (GitHub with them) · Krizaka (our story, the blog, contact) — on the Krizaka sites (family={false} for an independent product), then one line: “A Krizaka company / product / open-source project”, the version, Montréal and the legal links. No site block, no link twice.13 files import it
• Split viewBetaA list and its open item: two panes on a desktop; on a phone one at a time, the open item with the way back — chosen by showDetail, from the address.1 files import it
• Step progressBetaThe head of a multi-step flow — a sign-up, a profile to fill: back, segments that fill, the position in words.2 files import it
• StepperBetaThe steps of a journey or a job: done steps checked, the current one traced by the Krizaka glyph (growing to its value), failures crossed, connectors that fill — and every state said in words.7 files import it
• Sticky actionBetaThe one action of a page held at the bottom edge of a phone's screen while it scrolls — pure CSS, not drawn from md up.1 files import it
• Tab barBetaThe 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.
• TabsBetaViews of the same page, one at a time: underlined sections, a segmented switch, pills or binder dividers that organise collections — one light glides from the active tab to the next.25 files import it
• Desktop windowExperimentalThe window of a Mac app (Tauri 2 on the system WebView): a sidebar, the content and an inspector in a three-pane split — resizable by pointer and keyboard, collapsible — under a toolbar that moves the window and clears the traffic lights, at the desktop's density with a native-feeling focus ring. Its commands are written once for the menu bar, the page's shortcuts and the palette.
• Form flowExperimentalA form told in steps on a screen: the step's question, its fields, the position in words, the main action pinned above the keyboard and clear of the home indicator, dimmed until the step is valid.