Modules Section Dots
Section Dots & Back to Top
Dots at the edge of the screen show where you are on a long page and take you to any section. A back-to-top button appears as you scroll, its ring filling with your progress. Built for keyboards and screen readers, and calm for visitors who prefer reduced motion.
→ Look at the right edge: the current section is labelled. Scroll down and the back-to-top button appears at the bottom right.
Live demo · Free · Section 2 / 6
One dot per section
Mark a row in its Kinetic tab → Section Dots, give it a label, and it gets a dot. The dot of the section crossing 40% of the screen is the current one, larger and labelled. Click a dot to glide there.
Live demo · Free · Section 3 / 6
Made for the keyboard
The dots are a labelled navigation list of real links. Press Tab to reach them, then:
- ↑↓ move between dots
- HomeEnd first and last
- Enter jump: focus moves to the section
Live demo · Free · Section 4 / 6
Labels from your content
This row's label is connected to a custom field of the page (km_dot_label) with Beaver Themer field connections, so on a Themer layout every post can name its own sections. The navigation name and the back-to-top label take connections too.
custom field km_dot_label
Live demo · Free · Section 5 / 6
Back to top, with progress
No label on this row, so the dot uses the row's first heading. The button at the bottom right appears after 500 px; its ring is the scroll progress of the whole page. It is a real link: it returns you and your keyboard focus to the start of the page.
Live demo · Free · Section 6 / 6
Calm when asked
Visitors who prefer reduced motion jump straight to a section instead of gliding, and nothing animates. Dots carry a light ring so they stay visible on light and dark sections alike, and every target is at least 24 px.
How to use it
Where to find it
- Add the Section Dots & Back to Top module anywhere on the page, or once in a Themer layout for the whole site. It sits at the edge of the screen, not where you drop it.
- Choose the sections: rows marked in their Kinetic tab, every row with an ID, or every top-level row. Header and footer layouts are never included.
- Mark a row in its Kinetic tab → Section Dots and give it a label, typed or connected to a field. Without a label the row's first heading is used.
- Labels: on hover and keyboard focus, for the current section, always, or for screen readers only. Style: dots, lines or numbers, on the right or left.
- Back to top: label as a tooltip or next to the arrow, a progress ring, when it appears and where.
With the free Smooth anchor links switch on, the dots use its glide time and header offset. In the builder the module shows a sample of the dots and the button in place.
Accessibility
- A labelled
<nav>with a list of real links - The current section is announced (aria-current)
- Arrow keys, Home and End; focus moves to the section
- Reduced motion: instant jumps, no transitions
Good to know
- Free, in the core plugin
- Rows without an ID get one automatically
- Hidden when the page has fewer than two sections
- Dots per device: shown on desktop and tablet here
Kinetic Modules
Make your Beaver Builder sites move.
Start with the free plugin. Add Pro when a project needs the big effects.