Navigation et cadre

Règle du responsable

Une seule barre pour toute la famille (NAV-SYS).

Budget de taille

227.9 kB gzip pour tout le domaine ; il ne fait que baisser.

Entrées

28 entrées, dont 16 utilisées par des produits et sites en production. Les entrées expérimentales viennent en dernier : elles peuvent changer ou disparaître à toute version mineure.

• Page headerThe top of a page: a breadcrumb, the title, a description and the page's actions.26 fichiers l'importent
• App frameBêtaThe 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 fichiers l'importent
• App headerBêtaThe 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 shellBêtaThe 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 fichiers l'importent
• Collection switcherBêtaMoves 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.
• CommandBêtaA command palette on cmdk: a search input over a filtered list of commands, inline or in a dialog.3 fichiers l'importent
• Dashboard layoutBêtaA 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 fichiers l'importent
• Detail layoutBêtaOne 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 fichiers l'importent
• Grid and columnsBêtaLayouts 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 %.
• HeaderBêtaA screen's header: the bar under the status bar, and a large title that folds into it as the content scrolls.
• Language switchBêtaThe 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 fichiers l'importent
• List and detailBêtaA 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 barBêtaThe 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 fichiers l'importent
• OnboardingBêtaA first launch in a few slides: swipe or tap Next, Skip at any time, dots that say where you are.
• PaginationBêtaMoves 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 fichiers l'importent
• Rail navBêtaThe 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).
• ScreenBêtaA 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.
• SegmentedBêtaA segmented control that switches between views of a screen — the native counterpart of the web's segmented tabs.
• Settings layoutBêtaSettings: 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 fichiers l'importent
• Site footerBêtaThe 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 fichiers l'importent
• Split viewBêtaA 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 fichiers l'importent
• Step progressBêtaThe head of a multi-step flow — a sign-up, a profile to fill: back, segments that fill, the position in words.2 fichiers l'importent
• StepperBêtaThe 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 fichiers l'importent
• Sticky actionBêtaThe 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 fichiers l'importent
• Tab barBêtaThe 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.
• TabsBêtaViews 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 fichiers l'importent
• Desktop windowExpérimentalThe 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 flowExpérimentalA 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.