Navigation

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

This block is available in the latest version of WordPress and does not require the Gutenberg plugin.

Category: Theme

For developers

Block Grammar & Markup

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

Context

Context is used to pass values from a block to a descendant block; for example, a query and post template passing the query ID to the inner blocks.

Documentation

Provides context. Optional. Type: Object.

{
  "textColor": "textColor",
  "customTextColor": "customTextColor",
  "backgroundColor": "backgroundColor",
  "customBackgroundColor": "customBackgroundColor",
  "overlayTextColor": "overlayTextColor",
  "customOverlayTextColor": "customOverlayTextColor",
  "overlayBackgroundColor": "overlayBackgroundColor",
  "customOverlayBackgroundColor": "customOverlayBackgroundColor",
  "fontSize": "fontSize",
  "customFontSize": "customFontSize",
  "showSubmenuIcon": "showSubmenuIcon",
  "openSubmenusOnClick": "openSubmenusOnClick",
  "style": "style",
  "maxNestingLevel": "maxNestingLevel"
}

Block Attributes

Optional. Type: Object.

Attributes provide the structured data needs of a block. They can exist in different forms when they are serialized, but they are declared together under a common interface.

Documentation

{
  "ref": {
    "type": "number"
  },
  "customTextColor": {
    "type": "string"
  },
  "rgbTextColor": {
    "type": "string"
  },
  "customBackgroundColor": {
    "type": "string"
  },
  "rgbBackgroundColor": {
    "type": "string"
  },
  "showSubmenuIcon": {
    "type": "boolean",
    "default": true
  },
  "openSubmenusOnClick": {
    "type": "boolean",
    "default": false
  },
  "overlayMenu": {
    "type": "string",
    "default": "mobile"
  },
  "icon": {
    "type": "string",
    "default": "handle"
  },
  "hasIcon": {
    "type": "boolean",
    "default": true
  },
  "__unstableLocation": {
    "type": "string"
  },
  "overlayBackgroundColor": {
    "type": "string"
  },
  "customOverlayBackgroundColor": {
    "type": "string"
  },
  "overlayTextColor": {
    "type": "string"
  },
  "customOverlayTextColor": {
    "type": "string"
  },
  "maxNestingLevel": {
    "type": "number",
    "default": 5
  },
  "templateLock": {
    "type": [
      "string",
      "boolean"
    ],
    "enum": [
      "all",
      "insert",
      "contentOnly",
      false
    ]
  },
  "layout": {
    "type": "object"
  }
}

Block Supports

Optional. Type: Object.

A set of options that enables or disables block controls in the editor, for example gradient colors or padding.

Documentation

{
  "align": [
    "wide",
    "full"
  ],
  "html": false,
  "inserter": true,
  "typography": {
    "fontSize": true,
    "lineHeight": true,
    "__experimentalFontStyle": true,
    "__experimentalFontWeight": true,
    "__experimentalTextTransform": true,
    "__experimentalFontFamily": true,
    "__experimentalLetterSpacing": true,
    "__experimentalTextDecoration": true,
    "__experimentalSkipSerialization": [
      "textDecoration"
    ],
    "__experimentalDefaultControls": {
      "fontSize": true
    }
  },
  "spacing": {
    "blockGap": true,
    "units": [
      "px",
      "em",
      "rem",
      "vh",
      "vw"
    ],
    "__experimentalDefaultControls": {
      "blockGap": true
    }
  },
  "layout": {
    "allowSwitching": false,
    "allowInheriting": false,
    "allowVerticalAlignment": false,
    "allowSizingOnChildren": true,
    "default": {
      "type": "flex"
    }
  },
  "__experimentalStyle": {
    "elements": {
      "link": {
        "color": {
          "text": "inherit"
        }
      }
    }
  },
  "interactivity": true
}