Sidebar Navigation

Two sidebar patterns: classic nav-rail and collapsible doc-sidebar-*.

Classes

.nav-rail · .nav-link · .doc-sidebar-group · .doc-sidebar-toggle · .doc-sidebar-children

Workspace Lens

Primary chrome for switching cognitive mode (Flow vs Artifacts) in Lenses Studio. Classes: .ks-workspace-lens and children. Popover can use <details> (showcase) or React state (app).

Workspace Lens Flow

Workspace Lens

Your choice is saved in this browser for next visit.

Follow the path from idea to release

Your choice is saved in this browser for next visit.

Browse the workspace by asset type

Stylesheet

css/workspace-lens.css (loaded as assets/workspace-lens.css in the showcase)

Flow Diagram (Pure CSS)

Horizontal step indicators using .forge-flow.

Spark Spec Build Review Ship

Classes

.forge-flow · .forge-flow-node · .node-active · .forge-flow-arrow

Sticky section dock

Section 1

Scroll to collapse titles into dock.

Section 2

Scroll to collapse titles into dock.

Section 3

Scroll to collapse titles into dock.

Section 4

Scroll to collapse titles into dock.

Expected behavior

ks-nav-dock

Scroll collapses section titles into swimlane dock (ForgeSectionSwimlanes).

Scroll-spy TOC

Introduction

Scroll spy highlights matching ToC link.

Governance

Scroll spy highlights matching ToC link.

Verification

Scroll spy highlights matching ToC link.

Expected behavior

ks-scroll-spy-toc

ToC links highlight active section on scroll.

Breadcrumb depth

Expected behavior

ks-breadcrumb-depth

Current crumb lifted with depth shadow.

Mobile nav sheet

Expected behavior

ks-mobile-nav-sheet

Bootstrap offcanvas nav with depth panel shadow.

Mega menu

Expected behavior

ks-mega-menu

Expandable multi-column panel; Escape closes.

Anchor jump menu

Overview

Anchor target section.

Features

Anchor target section.

Pricing

Anchor target section.

Expected behavior

ks-anchor-jump

Horizontal sticky bar with scroll-spy active state.

Tab swimlane sync

Discover

Synced with tab swimlane.

Design

Synced with tab swimlane.

Deliver

Synced with tab swimlane.

Expected behavior

ks-tab-swimlane

Tabs scroll to sections; swimlane dock tracks lanes.