Nav bar

Web uniquement — React, depuis @krizaka/ui/nav-bar. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Used by Orazaka, krizaka.com.

Installation

Installer

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

Styles

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

Importer

import { NavBar } from "@krizaka/ui/nav-bar";

Exemples

Props

Accessibilité

• A nav named by label, a list of links and menu triggers (Radix NavigationMenu): aria-expanded and aria-controls on each trigger.
• The mobile panel is a disclosure (no focus trap): its toggle is named by openLabel / closeLabel and says aria-expanded.
• The light, the chevron and the tightening do not move under prefers-reduced-motion; the current page is tinted before scripts load.
• The family is its own nav named by labels.family; its chevron is a button with the same name, aria-expanded and aria-controls. Each group is a list named by its heading, the current site says aria-current="true" and “You are here”, a site not released says its status in words.
• NavBar.Repo is an icon link named by label; NavBar.Badge is plain text (DEV · v1.2.3), hidden below sm.

Clavier

Bonnes pratiques

• Five items at most on the bar; group the rest in a menu, each link with a name and one line (NavBar.MenuLink).
• Mark the current page with active: the light rests on it, aria-current="page" says it.
• Use your router's link with asChild on NavBar.Link, NavBar.MenuLink and NavBar.MobileLink.
• One primary action at most in NavBar.Actions (a Button size="sm" shape="pill").
• Wrap it in a sticky top-3 (floating) or sticky top-0 container to keep it on screen.
• Three zones on every Krizaka site: who I am (NavBar.Brand + NavBar.Family current="<site>", then NavBar.Badge with the version or DEV · v1.2.3), this site (at most four sections, never a link to another site), tools (search when there is something to search, NavBar.Repo, theme, language, one primary action).
• Place a second NavBar.Family as the last child of NavBar.Mobile: below md the family is the panel's last group.
• Pass the family's words translated: labels={familyLabels[locale]} from @krizaka/ui/sites.

Composants liés

• SitesThe Krizaka family as data: every site (the company, the products, the open-source projects, GitHub) with its address, kind, status, mark and repository, and the family's words in English and French — read by the bar's family switcher and the common footer.
• Site footerThe footer shared by every site of the Krizaka family: the site's mark and line, its own columns, the family in columns (from @krizaka/ui/sites), and the signature line — “A Krizaka company / product / open-source project” — with the version and Montréal.
• TabsViews of the same page, one at a time: underlined sections, a segmented switch or pills — one light glides from the active tab to the next, in every variant.
• Dropdown menuA menu of actions opened from a trigger: items with icons, checkbox items, labels, separators, a destructive item.
• CommandA command palette on cmdk: a search input over a filtered list of commands, inline or in a dialog.
• ButtonThe action: six looks, three sizes, three shapes (rounded, pill, the Krizaka cut corners) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub