Canvas viewport
Static recipe preview of a canvas-first workbench.
The central surface keeps document context, route tabs, and page tools visible while side panels carry hierarchy and properties.
Navigation
navbar, sidebar, stepper, nav_progress — Top nav, side nav, multi-step indicators, and loading bars.
Navigation Progress
CSS-only progress bar fixed to the viewport top. Animates automatically on
body.htmx-request. Use outside app_shell (which has its
own built-in bar). Place once in your base layout.
Contained preview. In production: position:fixed; top:0; width:100%.
Navbar
Sidebar
Sidebar with sections. Use with grid(cols=2) for sidebar + main content layout.
Dense Object Navigation
Contract-first dense chrome recipes: global commands, object context, local route views, and page tools stay separate.
Access policy
6
groups
2
keys
1
staged
Rail To Drawer Navigation
Application chrome recipe: persistent broad navigation on desktop and a drawer fallback on phones using existing primitives.
Production workspace
Persistent rail on wide viewports, drawer fallback on phones, route tabs remain link-native.
Cloud Console Navigation
Control-plane recipe: scope switcher, service menu, favorites quickbar, resource search, object-local tabs, and deployment tools.
api-gateway
42
deployments
3
regions
1
error
Suite Work Hub Navigation
Product-suite recipe: top utilities, mode navigation, personal shortcuts, customizable sidebar sections, project tabs, and saved views.
Ops Console Navigation
Observability recipe: command-first dashboard search, operational sidebar, time range controls, signal tabs, and alert counts.
Keyboard-First Tracker Navigation
Tracker recipe: favorites, team views, shortcut-labeled command launch, route-backed issue views, and compact display controls.
Knowledge Workspace Navigation
Knowledge recipe: workspace switcher, nested linked pages, team/private boundaries, collapsed breadcrumbs, page tabs, and nearby-topic discovery.
Editor Workbench Navigation
Editor recipe: compact file menu, tool navigation, file tree, canvas context, route-backed comments/prototype views, and inspector panel.
Checkout canvas
8
frames
26
components
4
prototypes
Inspector
Selected layer properties
Payment panel
3
auto layout
5
variants
2
constraints
6
Open comments
Conversation route stays separate from canvas tools.
Business Object Console Navigation
Business object recipe: app launcher, global object search, resource sidebar, saved searches, object ID context, and object-local tabs.
Collaboration Inbox Navigation
Collaboration recipe: workspace switcher, unread sidebar, jump-to-conversation, activity/later surfaces, and conversation-local routes.
Developer Platform Navigation
Developer platform recipe: project/group scope, search-or-go-to, context sidebar, workflow nav, project route tabs, and list filters.
Reference Docs Navigation
Reference recipe: workflow IA, docs search, persistent left nav, collapsed breadcrumbs, page controls, and nearby-topic discovery.
Stepper
Multi-step forms: current=2 shows step 2 active, step 1 completed.
Command Bar
Route Tabs
Route-backed subsection tabs with aria-current support. Each tab navigates to a new URL.
Nav Tree
Hierarchical navigation tree using native <details> for expand/collapse. Ideal for docs sidebars and admin nav.
With show_icons=true:
Link-first branches for server-controlled section trees:
Nav Link
SPA-style links with HTMX boost for smooth page transitions without full reloads.
Pagination
HTMX-powered page navigation with ellipsis for large page counts.
Command Palette
Cmd+K search overlay using native <dialog>. Results load via HTMX.