Sidebar

Holds persistent navigation in a 204px rail with a head, body, and foot.

Preview

In action

Rail

When to use

Use it for

A 204px rail for app or docs navigation with a head, groups of links, and a foot.
SidebarLabel to name each group of items.

Not for

Marketing sites; use NavigationMenu.
Collapsing it on desktop; the rail is the layout.

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 { Sidebar, SidebarFoot, SidebarHead, SidebarItem, SidebarLabel, SidebarNav } from "@noorddev/vlak-react";

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

2. Vendor the source

npx @noorddev/vlak-cli add sidebar

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/sidebar.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 { Sidebar, SidebarFoot, SidebarHead, SidebarItem, SidebarLabel, SidebarNav } from "@noorddev/vlak-react";

<Sidebar>
  <SidebarHead>Vlak</SidebarHead>
  <SidebarNav aria-label="Sidebar">
    <SidebarLabel>Go to</SidebarLabel>
    <SidebarItem href="/" current>Overview</SidebarItem>
    <SidebarItem href="/docs">Docs</SidebarItem>
    <SidebarItem href="/components">Components</SidebarItem>
  </SidebarNav>
  <SidebarFoot>0.3</SidebarFoot>
</Sidebar>

Props

Sidebar

One 204 module rail. Flush items, hairline edge.

Also accepts HTMLAttributes<HTMLElement>.

SidebarFoot

Also accepts HTMLAttributes<HTMLDivElement>.

SidebarHead

Also accepts HTMLAttributes<HTMLDivElement>.

SidebarItem

Prop	Type	Default	Description
`current`	`boolean`

Also accepts AnchorHTMLAttributes<HTMLAnchorElement>.

SidebarLabel

Also accepts HTMLAttributes<HTMLParagraphElement>.

SidebarNav

Prop	Type	Default	Description
`aria-label`	`string`	`"Sidebar"`	Landmark name; pages carry several navs.

Also accepts HTMLAttributes<HTMLElement>.

Keyboard

Keys	Does
`Tab`	Moves between the items
`Enter`	Follows the link

Accessibility

Sidebar is an <aside>; SidebarNav is a <nav> named by aria-label ("Sidebar" by default).
SidebarItem is an <a>; current sets aria-current="page".

Markup

<aside class="rs-sidebar"><div class="rs-sidebar-head">Vlak</div><nav class="rs-sidebar-nav"><p class="rs-sidebar-label">Go to</p><a class="rs-sidebar-item" aria-current="page">Overview</a><a class="rs-sidebar-item" href="#">Docs</a><a class="rs-sidebar-item" href="#">Components</a></nav><div class="rs-sidebar-foot">0.3</div></aside>

Classes

.rs-sidebar.rs-sidebar-head.rs-sidebar-nav.rs-sidebar-item.rs-sidebar-label.rs-sidebar-foot