Table of Contents Plugin (Toc)
Introduction
This plugin generates a table of contents based off the headings on your page.
How does it work?
The plugin creates the table of contents from your H1, H2, H3, H4, H5, H6 tags. These tags are applied as part of styles in your Bubble app.
Features
- Supports smooth scrolling animations
- Supports dynamic scroll highlighting
- Supports dynamic scroll show/hide effects
- Supports page extender option to make sure a page is big enough to scroll to all table of content items
Sub-headings
Support H1, H2, H3, H4, H5,H6 subheading menus
How do I setup a floating Table of Contents menu?
Look at how this page has been designed.
https://bubble.io/page?name=index&id=table-of-contents-plugin-v2&test_plugin=1677949691945x314741345187004400_current&tab=tabs-1
It utilises a Floating Group to hold the Table of Contents. And a left Group to hold body in place. When the page size <= 768 they both collapse and are hidden.
https://bubble.io/page?name=index&id=table-of-contents-plugin-v2&test_plugin=1677949691945x314741345187004400_current&tab=tabs-1
It utilises a Floating Group to hold the Table of Contents. And a left Group to hold body in place. When the page size <= 768 they both collapse and are hidden.
Will you add X feature?
I made it for my requirements - contact me in the forum @lindsay_knowcode I like to get suggestions for enhancements - I make the plugins for my personal requirements, I don't know yours - tell me 🙂
In a near release I will add the options to style the ToC. But I personally don't need that for now.
In a near release I will add the options to style the ToC. But I personally don't need that for now.
Something not working as expected?
Contact me in the forum @lindsay_knowcode I like to get suggestions for enhancements - I make the plugins for my personal requirements.
I'm using a Floating Group header - how do I set the scroll offset?
See the property of the Plugin called "Heading Offset" - it defaults to 0 but put in the height of your heading if you have one. This page has a floating group header that is 67 high for example.
My menu is too long to fit on a page
One approach to solve this is to allow the menu to scroll within a Group
What about Responsiveness?
That is something you need to work out with the design of your Bubble page. Maybe you want to hide the Table of Contents, or fix the Table of Content at the top of the page. A Table of Contents is always going to need some width.
I hide the Table of Contents on small devices.
I hide the Table of Contents on small devices.
Does it help with SEO?
Absolutely! A table of contents is considered good practice for improving your SEO.
This Plugin sets (and overwrites) any element Id's of H1 .. H6 tags
If you rely on putting Id's onto H1 to H6 text elements - be warned - this plugin automatically gives a dynamically generated id. It needs to do this to create internal page anchors to scroll to.
Rich Text Edited Content
If you have rich text on your page does it work? Yes but you need to put some things into your workflows so that the ToC is refreshed after the page is fully loaded, and if you want to dynamically change the ToC as the contents of the page changes.
Here is the rendered Rich Text Content
What to put in your workflows if you have content rendered after page load.
In this example app you will see that the Rich Text Content is reset on every page load. Accordingly there is a ToC refresh. You probably don't need this - this app does needs it because of the way it is resetting the Rich Text content on every page load.
You probably don't need a refresh button - but here is an example of how you would manually refresh the ToC.
Use cases
I needed it to summarise a lengthy plugin page. I organise things into sections already so generating content from H1, H2 H3 tags works well for the way organise content.
Trouble shooting
Dynamic content headings are not being detected.
The plugin works by scanning the page for H1, H2 etc headings.
If your content does not contain heading tags then the plugin will not detect these headings. Some Rich Text Editors may not put in the Heading tags.
This is also going to a problem for your SEO - Google uses the heading tags to understand your page content - https://www.knowcode.tech/blog/how-to-create-seo-friendly-blog-articles-in-bubble
If your content does not contain heading tags then the plugin will not detect these headings. Some Rich Text Editors may not put in the Heading tags.
This is also going to a problem for your SEO - Google uses the heading tags to understand your page content - https://www.knowcode.tech/blog/how-to-create-seo-friendly-blog-articles-in-bubble
Why did I build the plugin?
I needed it! and I couldn't find any plugin that did it.
Why not make it a free plugin?
There are already too many half baked, unsupported plugins. Purchase of the plugin comes with reasonable support to get you up and running.
If you are a Good Person and doing Good Things and deserve charity I may offer you a free license. Get in touch.
If you are a Good Person and doing Good Things and deserve charity I may offer you a free license. Get in touch.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Plan B - Bubble Backups
https://planbackups.io
My Bubble Profile & Plugins
https://bubble.io/contributor/knowcode-1595426107417x822993085097189100
Pleased to say all 5* reviews.
My Coaching
https://nocodeguides.io/profile/lindsaysmith book a quick expert consultancy session
My Youtube Channel - about my plugins.
https://www.youtube.com/c/LindsaySmithRocks
My Freelancing Website
https://www.knowcode.tech
My Bubble Profile & Plugins
https://bubble.io/contributor/knowcode-1595426107417x822993085097189100
Pleased to say all 5* reviews.
My Coaching
https://nocodeguides.io/profile/lindsaysmith book a quick expert consultancy session
My Youtube Channel - about my plugins.
https://www.youtube.com/c/LindsaySmithRocks
My Freelancing Website
https://www.knowcode.tech