MokuToc
Powered by Mokujiro Studio
Instructions
Add MokuToc to any long-form Framer page in a few minutes.
1. Add MokuToc
Place the MokuToc component at the page level, outside your article frame.
Set:
Position: Absolute
Left: 0
Top: 0
Width: 24px
Height: 100%
2. Name your content layer
Rename the frame containing your article to:
Docs Content
MokuToc automatically reads the h2 and h3 headings inside this frame.
To use a different name, enter it under:
Setup > Content layer
3. Check overflow
Set Overflow to Visible on every parent frame between MokuToc and the page.
If the rail scrolls away with the article, one of its parent frames is set to Hidden.
4. Match your header
Under Setup, adjust:
Edge gap: distance from the window edge
Header height: height of your fixed header
Scroll margin: space above headings after navigation
That's it. Scroll the page and confirm that the active section changes.
Mobile
MokuToc automatically replaces the rail with a compact navigation bar below the Mobile breakpoint.
If the bar appears behind your header, increase the z-index of MokuToc.
Advanced settings
Use the properties panel to customize:
Label read out by screen readers
Heading levels
Rail width and spacing
Active and hover states
Popover appearance
Light and dark colours
Sidebar layer to hug instead of the window edge
Mobile breakpoint and spacing
Troubleshooting
MokuToc does not appear
Check the content layer name and confirm that it contains h2 or h3 headings.
The rail scrolls away
Set all parent frames to Overflow: Visible.
Headings stop behind the header
Adjust Header height and Scroll margin under Setup.
Support
Need help? Email us at
You can also reach us through the MokuToc Marketplace listing.