Layout · Gutenberg
Side Menu block for WordPress
Hierarchical vertical navigation with collapsible sections for docs, wikis, and multi-section pages.
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
Hierarchical vertical navigation with collapsible sections for docs, wikis, and multi-section pages.
Inspector panels on this block: Menu Items, Options, Appearance. Those titles come from index.js, not from a shared template.
Behavior controls: “Level” options: Level 0 — Section heading, Level 1 — Nav item, Level 2 — Nested item; “Options — Style” options: Default, Pills, Bordered, Minimal.
Where to find it
Gutenberg inserter → Layout → search “Side Menu” (block name `blockenberg/side-menu` in block.json). Style it in the sidebar after insert.
How to use Side Menu block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Side Menu”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Menu Items. Set “Label”, “URL”, “Level”, “Badge Text”.
- 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 |
|---|---|
| Label | Text field in the inspector. |
| URL | Text field in the inspector. |
| Level | Select control; the chosen value is saved on the block. Options: Level 0 — Section heading; Level 1 — Nav item; Level 2 — Nested item. |
| Badge Text | Text field in the inspector. |
| Divider Before | On/off toggle in the inspector. |
| Show Heading | On/off toggle in the inspector. On by default. Saved as `showHeading`. |
| Heading Text | Text field in the inspector. block.json default: Documentation. Saved as `headingText`. |
| Options — Style | Select control; the chosen value is saved on the block. Options: Default; Pills; Bordered; Minimal. block.json default: default. Saved as `menuStyle`. |
| Collapsible Sections | On/off toggle in the inspector. On by default. Saved as `collapsible`. |
| Default Expanded | On/off toggle in the inspector. On by default. Saved as `defaultExpanded`. |
| Show Icons | On/off toggle in the inspector. On by default. Saved as `showIcons`. |
| Show Badges | On/off toggle in the inspector. On by default. Saved as `showBadges`. |
| Show Dividers | On/off toggle in the inspector. On by default. Saved as `showDividers`. |
| Menu Width (px) | Numeric range control in the inspector. Range 160–480. block.json default: 260. Saved as `width`. |
| Item Padding Vertical | Numeric range control in the inspector. Range 4–24. block.json default: 8. Saved as `itemPaddingV`. |
| Item Padding Horizontal | Numeric range control in the inspector. Range 8–32. block.json default: 14. Saved as `itemPaddingH`. |
| Border Radius | Numeric range control in the inspector. Range 0–24. block.json default: 8. Saved as `borderRadius`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingBottom`. |
| Page Background | Color control in the inspector. Saved as `bgColor`. |
| Menu Background | Color control in the inspector. block.json default: #ffffff. Saved as `menuBg`. |
| Menu Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `menuBorder`. |
| Heading Text | Color control in the inspector. block.json default: #9ca3af. Saved as `headingColor`. |
| Item Text | Color control in the inspector. block.json default: #374151. Saved as `itemColor`. |
| Item Hover Background | Color control in the inspector. block.json default: #f3f4f6. Saved as `itemHoverBg`. |
| Active Item Background | Color control in the inspector. block.json default: #ede9fe. Saved as `activeItemBg`. |
| Active Item Text | Color control in the inspector. block.json default: #6366f1. Saved as `activeItemColor`. |
| Active Indicator | Color control in the inspector. block.json default: #6366f1. Saved as `activeIndicatorColor`. |
| Section Heading | Color control in the inspector. block.json default: #111827. Saved as `sectionHeadingColor`. |
| Divider | Color control in the inspector. block.json default: #e5e7eb. Saved as `dividerColor`. |
| Badge Background | Color control in the inspector. block.json default: #6366f1. Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #ffffff. Saved as `badgeColor`. |
| Arrow Icon | Color control in the inspector. block.json default: #9ca3af. Saved as `arrowColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Hierarchical vertical navigation with collapsible sections for docs, wikis, and multi-section pages — that is the job of Side Menu, not a generic content block.
- Use it when you need the editor control labeled “Label”, which exists on this block’s inspector.
- It matches pages about navigation, menu, sidebar.
- 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 Side Menu block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Side Menu”. It sits under Layout. After insert, open Menu Items and set “Label”, “URL”, “Level”, “Badge Text”.
What makes Side Menu different from other Blockenberg blocks?
Hierarchical vertical navigation with collapsible sections for docs, wikis, and multi-section pages. Inspector labels on this block include “Label”, “URL”, “Level”, “Badge Text”.
Is the Side Menu Gutenberg block free?
Yes. Side Menu ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Side 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 Items, Options, Appearance).
Related layout blocks
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.
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.
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.
Sticky Sidebar
Two-column layout with a rich sticky sidebar — perfect for articles, docs, pricing pages, and long-form content.
Breadcrumbs
SEO-friendly navigation trail with Schema.org markup showing the current page hierarchy.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Side Menu from the Gutenberg inserter.