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.

WebBetaNavigation

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

When to use

  • 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.

When not to use

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

Installation

Install

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

Styles

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

Import

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

Examples

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.

PropTypeDefaultDescription
labelrequiredstring—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.

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

NavBarLink

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

PropTypeDefaultDescription
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.

PropTypeDefaultDescription
childrenrequiredReactNode—The menu's links (NavBar.MenuLink), laid out in a panel; columns sets the grid.
labelrequiredstring—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.

PropTypeDefaultDescription
titlerequiredstring—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.

PropTypeDefaultDescription
closeLabelrequiredstring—The toggle's name when open (“Close the menu”) — passed translated.
openLabelrequiredstring—The toggle's name when closed (“Open the menu”) — passed translated.

NavBarMobileLink

A link of the mobile panel.

PropTypeDefaultDescription
activeboolean—The current page.
asChildboolean—Renders your router's <Link>.

Accessibility

  • 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.

Keyboard

KeysAction
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.

Best practices

  • 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.

Generated from the code of @krizaka/ui 2.3.0: its meta.ts, its examples and its types.Edit this documentation on 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.

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components