Link and list styling

Combining a few of our components and CSS classes you can create a responsive and accessible table of contents.

Style links without underline (until hovered or focused) with the .bf-title-link class.

<a className="bf-title-link" href="#heading_id">
  Link to Heading
</a>

Style the <ol> list as a TOC with the .bf-toc class.

<ol className="bf-toc">
  <li>
    <a className="bf-title-link" href="#heading_id">
      Link to Heading
    </a>
  </li>
</ol>

Nested lists will inherit the TOC styling. Combined with links it will look something like this:

Scroll to a page section

Native HTML anchors allow you to link to a page section.

<a href="#my-heading">This link will scroll to</a>
<h3 id="my-heading">The element with matching `id`</h3>

Highlight active heading

Optionally wrap the content in an element with .bf-hightlight-target to highlight the currently active header.

<article className="bf-highlight-target">
  <a href="#my-heading">This link will scroll to</a>
  <h3 id="my-heading">The element with matching `id`</h3>
</article>

Responsive components

Depending on the width required for your page content, you can probably placed the table of contents on the right hand side in a sticky container, replaced by an accordion for small screens.

1. Sticky box for desktop

We provide a <Sticky> component to create a box that follows scrollable content, then sticks to the top.

<Sticky>
  <ol className="bf-toc">...</ol>
</Sticky>

2. Accordion for mobile

For mobile screens, we don't have sufficient space for the sticky box, instead we can use a full-width <Accordion> preceding the content.

<Accordion>
  <Accordion.Item title="On this page">
    <ol className="bf-toc">...</ol>
  </Accordion.Item>
</Accordion>

3. Breakpoint CSS

Since we don't want to show all of these elements for all screens, we can use some breakpoint classes.

• .to-medium for mobile-only elements; the accordion
• .from-medium on desktop-only elements; the sticky box

The medium keyword breaks at 960px viewport width.

4. All of the above

Here we've also added an "On this page" header in the sticky box.

const toc = (
  <ol className='bf-toc'>
    <li>
      <a className="bf-title-link">Link</a>
    </li>
    {/* more items... */}
  </ol>
);

// placed in a right-hand column layout
<Sticky className='from-medium'>
  <header className='bfc-base-2 bf-medium bf-strong'>On this Page</header>
  {toc}
</Sticky>

// placed preceding content
<Accordion className="to-medium">
  <Accordion.Item title="On this page">{toc}</Accordion.Item>
</Accordion>

Live demo

Try resizing your window to see mobile/desktop version.