# 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).

<!-- START TOKEN(Autogenerated block API docs) -->
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
<!-- wp:navigation -->
<!-- /wp:navigation -->
```

## 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.

<!-- END TOKEN(Autogenerated block API docs) -->
