This tutorial is going to walk you through how easy it is to add a table of contents to a website created with the Bricks Builder using tocbot js library
Why add a table of contents to the Bricks Builder?
There are several reasons why a TOC can be helpful in a Bricks Builder website. First, it provides an easy way for readers to see what topics are covered in the document. Second, it helps readers find specific information quickly and easily. Third, it can give you an SEO boost.
In short, adding a TOC to the Bricks Builder website can be a great way to improve its usability and functionality. So if you’re not already using one, we encourage you to give it a try!
How To Add A Table Of Contents To Bricks Builder
We are going to use a js library called Tocbot, Tocbot builds a table of contents (TOC) from headings in an HTML document.
Step 1: in bricks builder add a div where you want to render the table of content. for me, I’ll add it to the aside column.
and give it a class of ‘.toc‘ then add a class of ‘.toc-content‘ to the div where the post content is.
then give it a position sticky and top:40px
Step 2: add a code block element after the div and add this snippet to it.
<!-- css CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
<!-- JS CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
<!-- JS -->
<script>
window.addEventListener('load', (event) => {
tocbot.init({
// Where to render the table of contents.
tocSelector: '.toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.toc-content',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h1, h2',
// For headings inside relative or absolute positioned containers within content.
hasInnerContainers: false,
});
});
</script>One Important note: for toc links to work properly you need to add an ID for each heading in your post document, and you can do so by selecting the heading and in block settings in wp choose advanced then HTML anchor and add a unique name for it
but there is a fix for this with js, just add this snippet to the code block. so now you don’t have to do HTML anchor each post for each heading (works for h2s only, you need to adjust it to your needs)
document
.querySelectorAll('h2')
.forEach(function(el, i) {
el.id = i
})the toc comes with basic styles out of the box like below
to override these styles, you need to adjust these classes
[toc-list, toc-link::before, toc>.toc-list li, is-active-li, is-active-link::before ]
this how my final component looks like
and this is my CSS for it
just add it after CDN links in the code element
<style>
.toc-list {
margin: 0;
padding-left: 0px;
background-color: #f8fafc;
width: 280px;
display: flex;
flex-direction: column;
border: 1px solid gray;
padding: 0px;
}
.toc-link::before {
width: 2px;
margin-top: -8px;
}
.toc>.toc-list li {
padding: 12px 44px;
}
.is-active-li {
color: #0f2bb4;
}
.is-active-link::before {
background-color: #0f2bb4;
margin-top: 0px;
}
</style>
so the final code element should be like this
<!-- css CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
<!-- JS CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
<!-- custom css -->
<style>
.toc-list {
margin: 0;
padding-left: 0px;
background-color: #f8fafc;
width: 280px;
display: flex;
flex-direction: column;
border: 1px solid gray;
padding: 0px;
}
.toc-link::before {
width: 2px;
margin-top: -8px;
}
.toc>.toc-list li {
padding: 12px 44px;
}
.is-active-li {
color: #0f2bb4;
}
.is-active-link::before {
background-color: #0f2bb4;
margin-top: 0px;
}
</style>
<!-- JS -->
<script>
window.addEventListener('load', (event) => {
document.querySelectorAll('h2').forEach(function(el, i) {
el.id = i
})
tocbot.init({
// Where to render the table of contents.
tocSelector: '.toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.toc-content',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h1, h2',
// For headings inside relative or absolute positioned containers within content.
hasInnerContainers: false,
});
});
</script>Conclusion
In conclusion, a table of contents (TOC) can be easily created in Bricks Builder by following the steps outlined in this article. By taking the time to create a TOC, you can make your document more organized and easier to navigate.
As always, if you have any questions about adding a table of contents to your Bricks Builder website, feel free to reach out in the comments.
and feel free to check out more Bricks Tutorials here.
