Navigation
Sidebar navigation
Filterable, accessible navigation for growing AI workspaces.
Starts when it scrolls into view
NORD FROST · DARK · RADIUS 6/10 · BASE 16PX · SHADOW
- Type
SidebarNav- Source
sidebar_nav.rs- Story
sidebar-nav- Demo height
- 476 px
- Events
- SidebarNavEvent
Code
Cut from the gallery story this page runs, so it stays true.
let nav = cx.new(|cx| SidebarNav::new("creamery", window, cx));
nav.update(cx, |nav, cx| {
nav.set_sections(creamery_sidebar_sections(), cx);
nav.set_active_item("all-orders", cx);
});
Events and ownership
- Who owns the state
- SidebarNav renders state supplied by the application; it does not own durable work.
- What it emits
- Interactive intent is reported through the typed SidebarNavEvent contract and stable application IDs.
- What it means
- Filterable, accessible navigation for growing AI workspaces.
- Overflow and motion
- Growing content remains reachable in a bounded vertical surface; reduced motion preserves a useful state.
Event types
- SidebarNavEvent
What the demo does and does not show
The demo above is the same Rust as the native component, compiled to WebAssembly and drawn on a WebGPU canvas — not a mock-up, a recording, or a re-implementation. What it paints is what the component paints: layout, colour from the live theme, and motion.
The live browser specimen requires WebGPU; the native component remains the authoritative runtime.
A canvas cannot stand in for the platform, so treat everything that goes through the operating system as unproven here: keyboard handling and shortcuts, screen reader semantics, text input and IME, the clipboard, file drops, and the frame rate you would get on your own GPU. Judge those in a native build. If your browser has no WebGPU, the frame says so rather than showing an empty box.