Table of Contents

A navigation with a list of links to the main sections of the page.

Dependencies

• Smooth Scrolling

How to

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.

In the mobile ("collapsed") version, the navigation is replaced by a control (button). Pressing the button toggles the navigation visibility. To switch to the desktop ("static") version, use one of the .toc--static@{breakpoint} classes. Basically, you decide when the navigation layout should change, by targeting a breakpoint with the --static class modifier.

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 .position-sticky@md class applied to it.

Fixed Header #

If your page has a fixed element (e.g., a fixed header) and the TOC is sticky, part of your TOC element may be obscured.

To fix this issue, modify the top of the .toc element to be equal to the height of the fixed element: 

.toc--static {
  // style here

  &[class*="position-sticky"] {
    top: calc(var(--space-md) + 70px); // 70px -> height of the fixed element
    // additional style here
  }
}

You can use a CSS variable as well:

.toc--static {
  // style here

  &[class*="position-sticky"] {
    top: calc(var(--space-md) + var(--fixed-header-height)); 
    // additional style here
  }
}

In addition to changing the top position of the TOC element, you may want to set an offset for your content when scrolling so that it is not partially obscured when the page scrolls to it. 

Since the TOC uses the Smooth Scrolling component for the scrolling behaviour, refer to the Smooth Scrolling component Info page to see how to fix this issue.

Categories

• Navigation > Side Nav

Bug report & feedback

Component Github page ↗