On this page:
I’ve found out how to do a navigation block (a menu) for pages, at least, in WordPress (WP) block themes. I found out by looking in the block themes available in the WP directory. In one of your HTML files (in my-theme/templates/ or my-theme/parts), perhaps in the header, you need to add the following:
<!-- wp:navigation /-->
This will produce a very basic horizontal menu that supports sub-menus.
The following markup seems to pertain specifically to the navigation block (forgive the lack of sensible order and styling: it was too daunting to edit the raw HTML):
Key | Value |
---|---|
layout* | type justifyContent setCascadingProperties orientation |
orientation | horizontal vertical |
itemsJustification | center right |
type | flex |
justifyContent | center right left |
showSubmenuIcon | false |
overlayMenu | never always mobile |
setCascadingProperties | true |
isResponsive | true |
openSubmenusOnClick | true |
overlayBackgroundColor | <colour name> e.g. “dark”, “primary”, “background” |
overlayTextColor | <colour name> e.g. “white” |
__unstableLocation† | primary‡ |
navigationMenuId | <integer> e.g. 12 |
flexWrap | wrap |
__unstableSocialLinks† | social |
*The values of the layout markup keys are keys themselves; use them like this:
<!-- wp:navigation {"layout":{"type":"flex","justifyContent":"center}} /-->
†I don’t know what the significance of the initial double underscore is. I noticed it in the WeCodeArt and Stewart themes, amongst others.
‡I suspect this is the name of a menu position, but I’m not sure.
WP navigation link, WP navigation submenu
There’s also wp:navigation-link
and wp:navigation-submenu
:
Key | Value |
---|---|
label | <string> e.g. “Home”, “About”, “Blog”, “Privacy Policy” |
url | <url> |
kind | custom post-type |
isTopLevelLink | true false |
type | page |
title | <string> e.g. “Home”, “About”, “Blog”, “Privacy Policy” |
id | <integer> e.g. 223 |
Usage seems to be as follows, nested in the navigation block:
<!-- wp:navigation -->
<!-- wp:navigation-link {"label":"Home","url":"/about","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"About","url":"/about","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Blog","url":"/blog","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Contact","url":"/contact","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->
Notice that what is normally a tag with no explicit close tag has become a tag with an explicit close tag.
WP page list
There is also a wp:page-list
that can be styled using markup:
Key | Value |
---|---|
isNavigationChild | true |
showSubmenuIcon | true |
openSubmenusOnClick | true |
It also seems to be used inside the WP navigation block:
<!-- wp:navigation --><!-- wp:page-list /--><!-- /wp:navigation -->
Your guess is as good as mine as to what some of these keys and values do. Some of them seem obvious, but others are clouded in a little more mystique.