Skip to main content
TermRock
GitHub
ComponentsNavigation

Component · Navigation

Sidebar

Primary application navigation with sections, hierarchy, badges, status, and rail/drawer collapse. Route state is distinct from keyboard focus.

Kind
widget
Input
interactive
Canvas
120×40

Live preview

Loading terminal preview.

Static terminal poster. Choose Run live to start the Rust demo.

Ghosttysidebar/settings
Loading terminal poster…
○ loading posterNo input — rendered state only
Sidebar · exact mounted Rust story
01 · Purpose
What it is for
Primary application navigation with sections, hierarchy, badges, status, and rail/drawer collapse. Route state is distinct from keyboard focus.
Best fit: Navigation · navigation · widget
02 · Behavior
What the mounted story proves
  1. 01
    Sidebar
    Representative 120×40 terminal state.
  2. 02
    Passive paint
    No keyboard or pointer action is claimed by this representative story.
  3. 03
    Evidence stays explicit
    5 covered · 8 partial · 4 missing axes.
03 · Implement
Install, then start from exact code
Install
cargo add termrock --git https://github.com/tailrocks/termrock.git --rev 5283c2acf9154d0cfcd37b1ffe821c00faf90ea2
Add TermRock once. Keep domain effects in the host application.
Minimal implementation
Exact Rust setup used by sidebar/settings.
Open to load code.
04 · Adapt
Variants and composition
Variants
Use the preview Variant menu when alternate registered stories exist. Each selection mounts a fresh configuration.
Composition
Navigation · navigation · widget
05 · Reference
API, tokens, accessibility
API
SidebarOpen source ↗
Tokens
DesignSystemInspect exact story code for roles and capability projection.
Accessibility
Input contract mountedNo input claim in the representative story.
Contract
Evidence in progress5/23 axes covered
06 · Go deeper
Advanced guidance
Authored implementation guidance
Purpose. AppShell start-dock navigation. Route (active destination) is
separate from focus (keyboard cursor). Host owns real routing and expansion
projection.



Core list: sections, groups, badges, status, filter (/), expand hooks,
contextual actions, optional command ids for semantic commands.



Chrome around NavigationList: panel title, rail toggle ([), width auto-rail,
drawer/palette outcomes for narrow shells.


Examples


    

  • example_settings_nav
    • 

  • example_database_nav
    • 

  • example_agent_workbench_nav
    • 



AppShell


Paint into AppShellSlots start/sidebar region from layout_app_shell.
Ownership boundary
TermRock owns reusable terminal rendering and interaction state. The host owns domain data, policy, persistence, authorization, and side effects.
Evidence status
5 covered, 8 partial, and 4 missing contract axes. Missing evidence is not a behavior claim.
Segmented Control
View mode List/Grid/Table exclusive segments.
Slash Command Menu
SlashCommandMenu is the exact public paint owner for navigation terminal UI.