App navigation & pickers

Bottom navigation, navigation rail, calendar grid, and vertical stepper — zero JS, platform primitives only. Back to the component demo.

Bottom navigation

A 56px glass bar of 3–5 top-level destinations for phone-width layouts. Static here inside a frame; add .bottom-nav-fixed to pin it to the real viewport.

Inbox

Content stub. The active destination gets a pill indicator behind its icon; the others take a hover wash.

Navigation rail

The 72px compact companion to the sidebar for tablet/desktop: primary action up top, destinations stacked, .rail-bottom pushed to the end.

Board

Content area. The rail is the compact form of the sidebar — swap between them at a breakpoint rather than showing both.

Calendar

Presentational month grid — date math and selection state come from app JS or server rendering. The zero-JS path for actually picking a date is the native <input type="date"> (.date-field).

August 2026

Su Mo Tu We Th Fr Sa

August 2026

Su Mo Tu We Th Fr Sa

Vertical stepper

Left: class-controlled <ol> flavor (app/server renders state, content shown via .expanded). Right: <details> flavor — natively expandable with zero JS.

  1. 1 Project details

    Name and key chosen.

  2. 2 Permissions Optional

    Choose who can view and edit this project.

  3. 3 Invite team
1 Create account

Done on sign-up.

2 Verify email We sent a link to you@example.com

Click the link in the email, then refresh this page.

3 Set up workspace

Pick a name and invite teammates.

Menu bar

File/Edit-style cascading menus — popovers all the way down. The Export item opens a nested submenu; every leaf item closes the chain. Arrow keys work when /lozenge-sprinkle.js is loaded (it is here).