Table of Contents
A navigation with a list of links to the main sections of the page.
A navigation with a list of links to the main sections of the page.
All components are based on CodyFrame.
If you're using this component, you should also include the SCSS/JS of the following components:
The Table of Contents component is used to display a secondary navigation. It includes links to the main sections of the page. It's often referred to as "on this page", or "content" navigation.
The TOC becomes visible past the 'medium' breakpoint. To modify this behavior, edit the [email protected]
utility class applied to the component.
To connect each navigation link to the appropriate section, make sure the href value of the link is equal to the ID of the target section.
The TOC in the demo is sticky because of the .toc--sticky
class applied to it. The class sets position: sticky for the component, so that is doesn't scroll with the content.
If your page has a fixed element (e.g., a fixed header), part of your TOC element may be obscured.
To fix this issue, modify the top of the .toc--sticky
element to be equal to the height of the fixed element:
.toc--sticky {
top: calc(var(--space-md) + 70px); // 70px -> height of the fixed element
}
You can use a CSS variable as well:
.toc--sticky {
top: calc(var(--space-md) + var(--fixed-header-height));
}
Report a bug + changelog on Github ↗ | Suggest new components ↗
📢 We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.