Sticky chapter navATOMIC
- Article Layout
- Table of Contentsroot
- Article Bodyslot
- Table of Contentsroot
Sticky chapter nav
Blog Post 1 pins Table of Contents beside the article body; heading branches and links are generated output.
Blog Post 1Table of Contents. track the scroll.
On-page navigation with heading discovery and active section state.
Root + 2 atoms / Accessible / Composable
Table of Contents · runtimeATOMIC
Looping preview · scroll-spy active heading
Why it's good
Behavior, handled.
Table of Contents owns the parts that are tedious and easy to get wrong – so you can focus on the layout and the brand.
- Heading discovery
- Scroll-spy active state
- Nested item structure
- Docs-ready navigation
Compositions
Table of Contents becomes patterns.
Different structures made from the same atoms.
Sidebar guideATOMIC
- Guide Layout
- Sidebar
- Table of Contentsroot
- Share Linksslot
- Table of Contentsroot
- Article Bodyslot
- Sidebar
Sidebar guide
Blog Post 2 places Table of Contents in a guide sidebar alongside ordinary article utilities.
Blog Post 2Horizontal chapter railATOMIC
- Magazine Layout
- Table of Contentsroot
- Article Sectionsslot
- Table of Contentsroot
Horizontal chapter rail
Blog Post 5 uses the same Table of Contents component in a magazine-style article layout.
Blog Post 5More UI Components
The rest of the family.
Accordion
Expandable sections with keyboard nav, ARIA, and animated panels.
i-layers / Root + 4 atomsView familyTabs
Tabbed panels with an optional responsive accordion fallback.
i-columns / Root + 4 atomsView familyDialog
Focus-trapped modal overlays with title, description, and close.
i-frame / Root + 5 atomsView family