Navigation menu

Moves between primary destinations. Horizontal links; the current page is full ink.

Preview

In action

When to use

Use it for

  • The main links of a site in one row.
  • current on the item for the page you are on.

Not for

  • Nested menus; keep the row flat and use a Sidebar for depth.
  • Actions; use Button.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { NavigationMenu } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/navigation-menu.

2. Vendor the source

npx @noorddev/vlak-cli add navigation-menu

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/navigation-menu.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { NavigationMenu } from "@noorddev/vlak-react";

<NavigationMenu
  aria-label="Primary"
  items={[
    { label: "Overview", href: "/", current: true },
    { label: "Docs", href: "/docs" },
    { label: "Changelog", href: "/changelog" },
  ]}
/>

Props

NavigationMenu

Links in a row; the current page is ink.

PropTypeDefaultDescription
itemsrequired{ label: ReactNode; href: string; current?: boolean; }[]
aria-labelstring"Primary"Landmark name; pages carry several navs.

Also accepts HTMLAttributes<HTMLElement>.

Keyboard

KeysDoes
TabMoves between the links
EnterFollows the link

Accessibility

Markup

<nav class="rs-nav"><a href="#" aria-current="page">Overview</a><a href="#">Docs</a><a href="#">Changelog</a></nav>

Classes

.rs-nav.rs-nav-link