Krizaka
Documentation

Nav bar

The Krizaka navigation bar: a floating pill that tightens as the page scrolls, 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.

WebBêtaNavigation

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

Quand l’utiliser

  • The top navigation of a site or a product: a brand, a few links, one or two menus, actions on the right.
  • A section bar inside an app (floating={false}): videos, earnings, auctions.

Quand ne pas l’utiliser

  • To switch views inside a page without changing the address.À la place : Tabs
  • For a list of actions on one object.À la place : Dropdown menu
  • For search and commands across the app.À la place : Command

Installation

Installer

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

Styles

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

Importer

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

Exemples

A site's bar

Brand, a Products menu, links, a call to action, a mobile panel — hover the items: one light glides between them.

Krizaka

A rich menu

Two columns of links with icons whose node lights up, the current page tinted.

Krizaka

Inside an app

floating={false}: a full-width bar with a hairline, for an app's sections.

Studio

Props

NavBarRoot

The bar. Place it in a sticky top-3 (floating) or sticky top-0 wrapper — or let it scroll.

PropTypeDéfautDescription
labelrequisstring—The accessible name of the navigation (“Main”) — passed translated.
compactAfternumber | false24Pixels of scroll after which the bar tightens (denser, lower, lifted). false: never.
floatingbooleantrueA floating pill (the Krizaka bar) or a full-width bar with a hairline under it.

NavBarBrand

The brand: a mark and a name, linking home.

PropTypeDéfautDescription
asChildboolean—Renders your link (a router <Link>) with the brand's look.

NavBarLink

A link of the bar. asChild renders your router's <Link>.

PropTypeDéfautDescription
activeboolean—The current page: aria-current="page", and the light rests on it.

NavBarMenu

A menu of the bar: its trigger, and its links in a panel that opens under the bar.

PropTypeDéfautDescription
childrenrequisReactNode—The menu's links (NavBar.MenuLink), laid out in a panel; columns sets the grid.
labelrequisstring—The trigger's words (“Products”) — passed translated.
activeboolean—The current page is inside this menu: the light rests on its trigger.
columns1 | 21Columns of the panel.

NavBarMenuLink

A link inside a menu: an icon, a name and a line of text.

PropTypeDéfautDescription
titlerequisstring—The link's name — passed translated.
activeboolean—The current page.
descriptionstring—One line under it — passed translated.
iconReactNode—An icon (a signature icon of @krizaka/icons: its node lights up on hover).

NavBarMobile

Below md: a toggle, and a panel under the bar with its links (NavBar.MobileLink). A disclosure: Escape and a click on a link close it, the focus returns to the toggle.

PropTypeDéfautDescription
closeLabelrequisstring—The toggle's name when open (“Close the menu”) — passed translated.
openLabelrequisstring—The toggle's name when closed (“Open the menu”) — passed translated.

NavBarMobileLink

A link of the mobile panel.

PropTypeDéfautDescription
activeboolean—The current page.
asChildboolean—Renders your router's <Link>.

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.

Clavier

TouchesAction
TabMoves between the brand, the items and the actions; leaving an open menu closes it.
Enter / Space / ↓Opens a menu and moves into it.
↑ / ↓ · Home / EndWalks the links of an open menu.
← / →Moves between the items of the bar.
EscCloses the menu or the mobile panel and returns the focus to its trigger.

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.

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

Command

A command palette on cmdk: a search input over a filtered list of commands, inline or in a dialog.

Segmented

A segmented control that switches between views of a screen — the native counterpart of the web's segmented tabs.

Sur cette page

Quand l’utiliserInstallationExemplesPropsAccessibilitéBonnes pratiquesComposants liés