Crumb bar
Fixed top bar. Transparent at rest; on scroll it gains the paper background and a bottom hairline, and the breadcrumbs fade in.
Install
npx raster add crumb-bar
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">Raster</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>
React
import { CrumbBar } from "@/components/raster/crumb-bar";
<CrumbBar
root={{ label: "Renato Valdés Olmos", href: "/" }}
rootShort="RVO"
trail={[
{ label: "Components", href: "/components" },
{ label: "Switch" },
]}
/>Classes
.rs-crumb-bar.rs-crumb-bar-scrolled.rs-crumb-bar-inner.rs-crumb-root.rs-crumb-root-full.rs-crumb-root-short