Components / Navigation
Navigation
Navigation in Champagne Paper is architectural — structured, minimal, directional. The navbar floats above content. Tabs organize content horizontally. Accordions compress content vertically. Each pattern has one job.
Docs Sidebar
The collapsible sidebar navigation used across this design system site. Sticky at top-14, full viewport height, with active-link detection and section collapsing.
Active page content...
Tabs & Accordion
Accordion
Tabs
The Institute is the scholarly core — academic programs, certifications, and knowledge frameworks.
Usage Guidelines
✓ Tabs for peer-level content
Tabs organize content of equal importance. If one tab is always visited first, it may not be a tab pattern — it may be a page.
✓ Accordion for FAQ patterns
Accordions are ideal for FAQ lists, feature detail tables, and content that most users scan but few read in full.
✗ Nested tabs
Tabs within tabs create disorienting multi-level navigation. Flatten the information architecture instead.
✗ Accordion for primary content
If the content is critical, it should not be hidden in an accordion. Accordions are for supplementary detail.