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.

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

CSS Selectors

Defined via the selectors property in block.json.

• css: .wp-block-navigation:not(.wp-block-navigation__container)

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 the edit and save source files, index.php, and more.