@wordpress/block-library

# Navigation block 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](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/) - **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/) - **Block Type:** [Hybrid](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (static save + server enhancements) - **Keywords:** `menu`, `navigation`, `links` ## Block Relationships **[Allowed](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#allowed-blocks) inner blocks:** - [`core/navigation-link`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-navigation-link/) - [`core/search`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-widgets/core-block-search/) - [`core/social-links`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-widgets/core-block-social-links/) - [`core/page-list`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-widgets/core-block-page-list/) - [`core/spacer`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-spacer/) - [`core/home-link`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-home-link/) - [`core/icon`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-media/core-block-icon/) - [`core/site-title`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/core-block-site-title/) - [`core/site-logo`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/core-block-site-logo/) - [`core/navigation-submenu`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-navigation-submenu/) - [`core/loginout`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/core-block-loginout/) - [`core/buttons`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-buttons/) ## Attributes _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._ | Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description | |-----------|------|---------|-------------| | `ref` | `number` | — | — | | `textColor` | `string` | — | — | | `customTextColor` | `string` | — | — | | `rgbTextColor` | `string` | — | — | | `backgroundColor` | `string` | — | — | | `customBackgroundColor` | `string` | — | — | | `rgbBackgroundColor` | `string` | — | — | | `showSubmenuIcon` | `boolean` | `true` | — | | `submenuVisibility` | `string` | `"hover"` | [Enum](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#enum-validation): `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](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#enum-validation): `all`, `insert`, `contentOnly`, `false` | ## Supports _Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._ - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true` - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`, `"full"` - [`ariaLabel`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#arialabel): `true` - [`contentRole`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#contentrole): `true` - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false` - [`inserter`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#inserter): `true` - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography): - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true` - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true` - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing): - `blockGap`: `true` - `units`: `["px","em","rem","vh","vw"]` - [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout): - [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false` - [`allowInheriting`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowinheriting): `false` - [`allowVerticalAlignment`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowverticalalignment): `false` - [`allowSizingOnChildren`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowsizingonchildren): `true` - [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex"}` - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity): `true` - [`renaming`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#renaming): `false` ## Context _Defined via the [`usesContext` and `providesContext`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/) 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**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering. ```html   ``` ## Source - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/)) - [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation/) — browse `edit.js`, `save.js`, `index.php`, and more.