Layout · Gutenberg
One Page Navigation block for WordPress
Fixed dot navigation sidebar for single-page scrolling websites. Each dot links to a section by ID.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Fixed dot navigation sidebar for single-page scrolling websites. Each dot links to a section by ID.
Inspector panels on this block: Navigation Items, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Position” options: Right side, Left side; “Dot shape” options: Circle, Square, Diamond.
Where to find it
Gutenberg inserter → Layout → search “One Page Navigation” (block name `blockenberg/one-page-nav` in block.json). Style it in the sidebar after insert.
How to use One Page Navigation block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “One Page Navigation”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Navigation Items. Set “Label”, “Target ID (without #)”, “Position”, “Dot shape”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Label | Text field in the inspector. |
| Target ID (without #) | Text field in the inspector. |
| Position | Select control; the chosen value is saved on the block. Options: Right side; Left side. block.json default: right. Saved as `position`. |
| Dot shape | Select control; the chosen value is saved on the block. Options: Circle; Square; Diamond. block.json default: circle. Saved as `dotShape`. |
| Dot size (px) | Numeric range control in the inspector. Range 6–24. block.json default: 12. Saved as `dotSize`. |
| Gap between dots | Numeric range control in the inspector. Range 4–40. block.json default: 14. Saved as `dotGap`. |
| Edge offset (px) | Numeric range control in the inspector. Range 8–80. block.json default: 24. Saved as `edgeOffset`. |
| Scroll offset (px) | Numeric range control in the inspector. Range -200–200. block.json default: 0. Saved as `scrollOffset`. |
| Show tooltips | On/off toggle in the inspector. On by default. Saved as `showTooltips`. |
| Animate active dot | On/off toggle in the inspector. On by default. Saved as `animateDots`. |
| Show progress line | On/off toggle in the inspector. On by default. Saved as `progressLine`. |
| Dot color | Color control in the inspector. block.json default: #d1d5db. Saved as `dotColor`. |
| Active dot color | Color control in the inspector. block.json default: #6366f1. Saved as `activeDotColor`. |
| Hover dot color | Color control in the inspector. block.json default: #a5b4fc. Saved as `hoverDotColor`. |
| Progress line | Color control in the inspector. block.json default: #6366f1. Saved as `progressLineColor`. |
| Tooltip background | Color control in the inspector. block.json default: #1e1b4b. Saved as `tooltipBg`. |
| Tooltip text | Color control in the inspector. block.json default: #ffffff. Saved as `tooltipColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- Keyboard handlers move focus between items.
When this is the right block
- Fixed dot navigation sidebar for single-page scrolling websites. Each dot links to a section by ID — that is the job of One Page Navigation, not a generic content block.
- Use it when you need the editor control labeled “Label”, which exists on this block’s inspector.
- Inserter grouping: page structure, sections, and composition.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the One Page Navigation block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “One Page Navigation”. It sits under Layout. After insert, open Navigation Items and set “Label”, “Target ID (without #)”, “Position”, “Dot shape”.
What makes One Page Navigation different from other Blockenberg blocks?
Fixed dot navigation sidebar for single-page scrolling websites. Each dot links to a section by ID. Inspector labels on this block include “Label”, “Target ID (without #)”, “Position”, “Dot shape”.
Is the One Page Navigation Gutenberg block free?
Yes. One Page Navigation ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style One Page Navigation to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Navigation Items, Layout).
Related layout blocks
Bento Grid
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights.
Breadcrumbs
SEO-friendly navigation trail with Schema.org markup showing the current page hierarchy.
Content Menu
In-page anchor navigation that highlights the current section as the user scrolls — can float fixed on the left or right, or sit inline.
Dark Hero
Dark glassmorphism hero for AI, SaaS and tech sites. Features glow effects, gradient text, optional floating stat badges, badge pill, and rich button controls.
Gradient Hero
Full landing page hero with animated gradient/mesh background, badge, headline, CTA buttons, and social proof row.
Gradient Section
A full-width section with an animated CSS gradient background, headline, subtext, and dual call-to-action buttons.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert One Page Navigation from the Gutenberg inserter.