NavigationVisual draft 0.1
Sidebar
Provides persistent navigation for complex product areas.
PatternComposed patternHTML first
01 / Preview
The current Angle direction.
02 / Decision
What this component must preserve.
Angle component decision
Keep location obvious, group by user intent, and collapse without destroying access to labels or focus.
03 / Anatomy
Parts with a specific job.
Identity
01Groups
02Links
03Active state
04Footer
0504 / States
The happy path is only one state.
01Default
02Hover
03Active
04Focus
05Disabled
06Loading
07Success
08Error
05 / Guidance
Use the contract, not the screenshot.
Do
Keep location obvious, group by user intent, and collapse without destroying access to labels or focus.
Avoid
Do not copy the demonstration as a fixed screen. Preserve the interaction contract while composing for the product context.