Navigation

The Navigation block is a container block for the collection of blocks that allow visitors to get around your site. See also the Navigation Link block and Navigation Submenu block.

CSS Classes

The structural CSS for the navigation block targets generic classnames across menu items of multiple types including those automatically generated by the Page List block. Here are some of the notable classnames and what they are used for:

• .wp-block-navigation__submenu-container is applied to submenus to main menu items.
• .wp-block-navigation-item is applied to every menu item.
• .wp-block-navigation-item__content is applied to the link inside a menu item.
• .wp-block-navigation-item__label is applied to the innermost container around the menu item text label.
• .wp-block-navigation-item__description is applied to the innermost container around the menu item description.
• .wp-block-navigation__submenu-icon is applied to the submenu indicator (chevron).

A collection of blocks that allow visitors to get around your site.

• Name: core/navigation
• Category: theme
• API Version: 3
• Block Type: Hybrid (static save + server enhancements)
• Keywords: menu, navigation, links

Block Relationships

Allowed inner blocks:
– core/navigation-link
– core/search
– core/social-links
– core/page-list
– core/spacer
– core/home-link
– core/icon
– core/site-title
– core/site-logo
– core/navigation-submenu
– core/loginout
– core/buttons

Attributes

Defined via the attributes property in block.json.

Attribute	Type	Default	Description
ref	number	—	—
textColor	string	—	—
customTextColor	string	—	—
rgbTextColor	string	—	—
backgroundColor	string	—	—
customBackgroundColor	string	—	—
rgbBackgroundColor	string	—	—
showSubmenuIcon	boolean	true	—
submenuVisibility	string	"hover"	Enum: hover, click, always
overlayMenu	string	"mobile"	—
overlay	string	—	—
icon	string	"handle"	—
hasIcon	boolean	true	—
__unstableLocation	string	—	—
overlayBackgroundColor	string	—	—
customOverlayBackgroundColor	string	—	—
overlayTextColor	string	—	—
customOverlayTextColor	string	—	—
maxNestingLevel	number	5	—
templateLock	string \| boolean	—	Enum: all, insert, contentOnly, false

Supports

Defined via the supports property in block.json.

• anchor: true
• align: "wide", "full"
• ariaLabel: true
• contentRole: true
• html: false
• inserter: true
• typography:
  • fontSize: true
  • lineHeight: true
• spacing:
  • blockGap: true
  • units: ["px","em","rem","vh","vw"]
• layout:
  • allowSwitching: false
  • allowInheriting: false
  • allowVerticalAlignment: false
  • allowSizingOnChildren: true
  • default: {"type":"flex"}
• interactivity: true
• renaming: false

Context

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

Provides context:

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

Block Markup

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

<!-- wp:navigation -->
<!-- /wp:navigation -->

Source

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