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. Tag your headings
MokuToc reads the h2 and h3 headings on the page. In Framer, a heading is a text layer whose text style has its Tag set to:
Heading 2 or Heading 3
There is nothing to name. MokuToc finds your article on its own, by taking the part of the page that holds the most headings.
To limit it to one specific layer, type that layer name 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
Open the page in preview: MokuToc prints the reason next to the rail. On a site that is already published, add ?mokutoc-check=1 to the URL to see the same note. Your readers never see it.
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.