Crumb bar

Keeps the current path visible while scrolling. Fixed at 72px with a 1px bottom rule when active.

Preview

In action

Bar

Transparent at rest. On scroll it gains paper and a hairline.

When to use

Use it for

The fixed top bar of a long page: transparent over the cover, paper and a hairline once scrolled.
A root mark plus the trail of the current page.

Not for

Pages without a cover; use Breadcrumbs in the flow.
Bars that hold actions or search; this one holds the trail only.

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 { CrumbBar } from "@noorddev/vlak-react";

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

2. Vendor the source

npx @noorddev/vlak-cli add crumb-bar

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

3. Through shadcn

npx shadcn add https://vlak.dev/r/crumb-bar.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 { CrumbBar } from "@noorddev/vlak-react";

<CrumbBar
  root={{ label: "Renato Valdés Olmos", href: "/" }}
  rootShort="RVO"
  trail={[{ label: "Components", href: "/components" }, { label: "Switch" }]}
  threshold={110}
/>

Props

CrumbBar

The fixed top bar of the house chrome. Transparent at rest; once the page cover scrolls away it gains the paper background and its bottom hairline, and the breadcrumbs fade in. While hidden the trail is inert and invisible, so nothing focuses into an unseen link.

Prop	Type	Default	Description
`trail`required	`CrumbBarItem[]`
`threshold`	`number`	`110`	Pixels of scroll before the bar solidifies and the crumbs fade in.
`root`	`CrumbBarItem`		Root crumb, held in the TOC column from 900px.
`rootShort`	`ReactNode`		Abbreviated root shown on phones in place of the full label.

Also accepts HTMLAttributes<HTMLElement>.

Keyboard

Keys	Does
`Tab`	Moves to the root link, then the trail links once the bar is scrolled in
`Enter`	Follows the link

Accessibility

Renders <nav aria-label="Breadcrumb">; the trail is an ordered list with aria-current="page" on the last item.
While the bar is transparent the trail is inert, so nothing focuses into an invisible link.

Markup

<nav class="rs-crumb-bar rs-crumb-bar-scrolled"><div class="rs-crumb-bar-inner"><a class="rs-crumb-root" href="/"><span class="rs-crumb-root-full">Vlak</span><span class="rs-crumb-root-short">rs</span></a><p class="rs-crumbs"><span>Docs</span><span class="rs-crumbs-sep">/</span><span class="rs-crumbs-here">Components</span></p></div></nav>

Classes

.rs-crumb-bar.rs-crumb-bar-scrolled.rs-crumb-bar-inner.rs-crumb-root.rs-crumb-root-full.rs-crumb-root-short.rs-crumb-crumbs.rs-crumb-crumbs-on.rs-crumb-item.rs-crumb-here.rs-crumb-link.rs-crumb-sep

Depends on

/breadcrumbs