Relume
Log in

Community forum for knowledge and support

Updated 6 months ago

Creating a responsive table of contents with a side-opening hamburger menu

At a glance

The community member is looking for tips on how to create a Table of Contents (ToC) that opens from the side like a hamburger menu, and the main wrapper should be responsive and shrink when the ToC is open. Another community member suggests using the Finsweet ToC attributes without rich text, by placing the contents attribute on a div block to collect all the headings into links. They also mention that the community member may need to use JavaScript or ChatGPT to get the exact interaction they want.

Useful resources
GGinko
·

Hey! Does anyone have any tips on how to make a Table of Contents (Not for rich text), that opens from the side like a hamburger menu for an article? To clarify I want the main wrapper to be responsive and shrink when the ToC opens so that the user can leave it open as desires for ease of skimming.

M
1 comment
MMatt Johnson

you can still use the Finsweet TOC attributes without Rich text. just put the contents attribute on any div block and it will collect all of the headings into links. You can then style those links however you want into a menu or an accordion or whatever display you'd like.

It sounds like you may need to use JS/ChatGPT to get the exact interaction you want.
https://finsweet.com/attributes/table-of-contents

Add a reply
Sign up and join the conversation on Slack