Navigation Block
Quick Definition
The Navigation block is the block-based menu system in WordPress that lets you build, style, and manage your site navigation directly in the editor — replacing the classic Appearance > Menus system.
What Is the Navigation Block?
The Navigation block is how WordPress handles menus in block themes. Introduced in WordPress 5.9, it replaces the classic Appearance > Menus system with a visual, block-based approach. Instead of configuring menus in a separate admin screen, you build and edit your navigation directly in the block editor or Site Editor — with a live preview of exactly how it will look.
The Navigation block works like any other block: you add it to a template part (typically the header), then fill it with nested blocks that represent your menu items:
- Page Link — Links to an existing page on your site
- Custom Link — Links to any URL you specify
- Submenu — Creates a dropdown with nested items
- Other blocks — You can add a Site Logo, Search, Social Icons, and more
You can manage the menu structure in two ways. In the editor canvas, click the + button inside the Navigation block to add items. In the sidebar List View, drag and drop items to reorder them — drag right to nest an item as a submenu. This is more intuitive than the classic menu system, especially for beginners who can see changes in real time.
The Navigation block includes built-in mobile responsive behavior. The Display setting controls how the menu appears on smaller screens:
- Off — No hamburger menu, links always visible
- Mobile (default) — Shows a hamburger icon on small screens that opens an overlay menu
- Always — Hamburger icon on all screen sizes
In WordPress 7.0, the Navigation block gets further improvements including customizable overlays as template parts and breakpoint settings for the mobile menu.
Navigation Block in Practice
In a block theme, you typically place the Navigation block inside a header template part. You can have multiple Navigation blocks on your site — one for the header, another for the footer, and one for a mobile sidebar. Each is a separate, reusable menu that you name and manage independently.
Styling is done through the block's settings panel: colors, typography, spacing between items, justification (left, center, right, space-between), and orientation (horizontal or vertical). You can also add custom CSS classes for advanced styling. If you need to rename or delete a menu, those options are in the Advanced section of the block settings.
For classic themes that still use the old menu system, the Navigation block is not available — you will continue to use Appearance > Menus until you switch to a block theme.
Why It Matters
Navigation is one of the most important parts of any website. The Navigation block makes it possible to build, style, and preview your menu in context — seeing exactly how it fits with your header, logo, and content. It is a major reason to consider switching to a block theme, and understanding it is essential for anyone building a modern WordPress site.