Submenu

Add a submenu to your navigation.

Name: core/navigation-submenu
Category: design
API Version: 3
Block Type: Hybrid (static save + server enhancements)

Block Relationships

Parent blocks (direct):
– core/navigation

Attributes

Defined via the attributes property in block.json.

Attribute	Type	Default	Description
`label`	`string`	—	Role: `content`
`type`	`string`	—	—
`description`	`string`	—	—
`rel`	`string`	—	—
`id`	`number`	—	—
`opensInNewTab`	`boolean`	`false`	—
`url`	`string`	—	Role: `content`
`title`	`string`	—	—
`kind`	`string`	—	—
`isTopLevelItem`	`boolean`	—	—
`isParentSubmenu`	`boolean`	`true`	—

Supports

Defined via the supports property in block.json.

anchor: true
reusable: false
html: false
typography:
- fontSize: true
- lineHeight: true
interactivity:
- clientNavigation: true

Context

Defined via the usesContext and providesContext properties in block.json.

Uses context:

textColor
customTextColor
backgroundColor
customBackgroundColor
overlayTextColor
customOverlayTextColor
overlayBackgroundColor
customOverlayBackgroundColor
fontSize
customFontSize
showSubmenuIcon
maxNestingLevel
openSubmenusOnClick
submenuVisibility
style

Provides context:

core/isInsideSubmenu attribute isParentSubmenu

Block Markup

This is a hybrid block. It saves static markup that the server may enhance during rendering.

<!-- wp:navigation-submenu {"label":"A fine submenu","isTopLevelItem":true} -->
<!-- wp:navigation-link {"label":"WordPress","url":"https://wordpress.org/"} -->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-submenu -->

Source

block.json (reference)
Source directory — browse edit.js, save.js, index.php, and more.

In this article