Layout · Gutenberg
Content Menu block for WordPress
In-page anchor navigation that highlights the current section as the user scrolls — can float fixed on the left or right, or sit inline.
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
In-page anchor navigation that highlights the current section as the user scrolls — can float fixed on the left or right, or sit inline.
Inspector panels on this block: Menu Settings, Links. Those titles come from index.js, not from a shared template.
Behavior controls: “Position” options: Inline (inside content), Fixed — Left, Fixed — Right; “Menu Settings — Style” options: Pills (rounded buttons), List (left accent line), Tabs (underline), Dots (compact).
Where to find it
Gutenberg inserter → Layout → search “Content Menu” (block name `blockenberg/content-menu` in block.json). Style it in the sidebar after insert.
How to use Content Menu block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Content Menu”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Menu Settings. Set “Position”, “Menu Settings — Style”, “Show Icons”, “Show Numbers”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Position | Select control; the chosen value is saved on the block. Options: Inline (inside content); Fixed — Left; Fixed — Right. block.json default: inline. Saved as `position`. |
| Menu Settings — Style | Select control; the chosen value is saved on the block. Options: Pills (rounded buttons); List (left accent line); Tabs (underline); Dots (compact). block.json default: pills. Saved as `menuStyle`. |
| Show Icons | On/off toggle in the inspector. On by default. Saved as `showIcons`. |
| Show Numbers | On/off toggle in the inspector. Off by default. Saved as `showNumbers`. |
| Smooth Scroll on Click | On/off toggle in the inspector. On by default. Saved as `animateScroll`. |
| Vertical Position (vh %) | Numeric range control in the inspector. Range 10–90. block.json default: 50. Saved as `fixedTop`. |
| Edge Offset (px) | Numeric range control in the inspector. Range 8–80. block.json default: 24. Saved as `fixedOffset`. |
| Menu Width (px) | Numeric range control in the inspector. Range 100–320. block.json default: 180. Saved as `menuWidth`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 0. Saved as `paddingBottom`. |
| Label | Text field in the inspector. |
| Anchor ID (no #) | Text field in the inspector. |
| Menu Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Link Text | Color control in the inspector. block.json default: #374151. Saved as `linkColor`. |
| Active Background | Color control in the inspector. block.json default: #6366f1. Saved as `activeBg`. |
| Active Text | Color control in the inspector. block.json default: #ffffff. Saved as `activeColor`. |
| Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Accent | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| Link Text (Typo Link) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoLink`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- In-page anchor navigation that highlights the current section as the user scrolls — can float fixed on the left or right, or sit inline — that is the job of Content Menu, not a generic content block.
- Use it when you need the editor control labeled “Position”, which exists on this block’s inspector.
- It matches pages about anchor, navigation, toc.
- 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 Content Menu block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Content Menu”. It sits under Layout. After insert, open Menu Settings and set “Position”, “Menu Settings — Style”, “Show Icons”, “Show Numbers”.
What makes Content Menu different from other Blockenberg blocks?
In-page anchor navigation that highlights the current section as the user scrolls — can float fixed on the left or right, or sit inline. Inspector labels on this block include “Position”, “Menu Settings — Style”, “Show Icons”, “Show Numbers”.
Is the Content Menu Gutenberg block free?
Yes. Content Menu ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Content Menu 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: Menu Settings, Links).
Related layout blocks
Side Menu
Hierarchical vertical navigation with collapsible sections for docs, wikis, and multi-section pages.
Sticky Header
A fully-styled site header with logo (image or text), navigation links, and an optional CTA button. Sticks to the top on scroll with a shrink animation. Supports light, dark, glass, and gradient style variants.
Mega Menu
Full-width mega menu navigation with column groups, icons, images, CTAs and rich hover panels.
Page List
A styled list of pages or links with optional icons, hierarchy, and rich color controls.
Scroll To Top
Fixed scroll-to-top button that appears after scrolling down the page.
Sticky Sidebar
Two-column layout with a rich sticky sidebar — perfect for articles, docs, pricing pages, and long-form content.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Content Menu from the Gutenberg inserter.