Add and manage submenus in your WordPress navigation menus with Gutenberg


WordPress navigation submenus menus
WordPress navigation submenus menus

Getting started with Gutenberg navigation

Why Gutenberg is replacing classic menus

Where to find the navigation block

Open the Site Editor and click into your site’s header template part. From there, you can insert a Navigation block just like any other block. If no menu exists yet, the block will prompt you to create one on the spot.

You can also add navigation to any page or post useful for standalone landing pages or unique layouts.

Managing menus and permissions

Only Editors and Administrators can modify menus. Authors won’t see this option in the Site Editor, so make sure you’re logged in with the correct role if you don’t see it.

Safe editing and previewing

WordPress automatically saves your edits every 60 seconds, giving you peace of mind that your changes won’t be lost.

Why this matters now

Gutenberg is powering most new WordPress websites. Navigation is no longer locked behind separate panels and confusing interfaces. With block-based tools, you’re working visually exactly where your users will interact.

With the Navigation block, building menus becomes intuitive, flexible, and ready for the future of full-site editing.

Selecting the menu and opening the sidebar controls

Navigating block structure with the breadcrumb and List View

When editing your navigation menu in Gutenberg, the breadcrumb bar in the top-left corner of the editor is your guide. It shows exactly where you are in the block hierarchy use it to jump quickly between the full navigation block and individual items.

To see your entire menu at once, open the List View panel using the keyboard shortcut Ctrl+Alt+O (or Option+Command+O on Mac). From there, you can drag and drop menu items, collapse parent links for better organisation, and rename items directly in-line.

Adjusting layout and design in the sidebar

Once your Navigation block is selected, the right-hand sidebar becomes your control panel.

Under the Settings tab, you’ll find layout options. You can switch between horizontal and vertical orientation, adjust justification (left, centre, right), and toggle whether your menu collapses into a mobile-friendly overlay.

Switch to the Styles tab to customise how the menu looks. Adjust typography presets, set link and hover colours, and fine-tune spacing.

If you want to apply changes across your entire site, use Global Styles in the top-right corner of the Site Editor. For more targeted tweaks, stick to the per-block Styles tab.

Important reminders

  • 💡 Use keyboard shortcuts to speed up edits. Ctrl+→ (or Cmd+→) nests a selected item under the one above it.
  • 💡 The label you type for a menu item is just that a label. Changing it won’t alter the actual URL or page slug.

With Gutenberg, the combination of the block toolbar, List View, and sidebar panels gives you precise control over how your menu looks and behaves without touching a line of code.

Subscribe to our newsletter

Adding a new sub-menu (dropdown)

How to create a dropdown menu in Gutenberg

  1. Click on the menu item block in the editor.
  2. Use the toolbar’s “Add submenu” button (it appears as three vertical dots or a plus symbol) to create a child menu under that item.

From there, you can begin adding new links to the dropdown.

Adding links to your submenu

When the submenu opens, you’ll see the familiar link picker. Here you can:

  • Select existing pages, posts, categories, or tags using the tabbed filters at the top of the popup.
  • Use the search bar to quickly find the page or post you want.
  • Add custom links using the URL field this is ideal for tel: phone numbers, mailto: email addresses, or external websites.

For brand new content, you can even create a draft page directly in the picker. WordPress will auto-save it as a draft so you can edit it later.

Speed tips for submenu editing

  • Press the right arrow key on your keyboard to move into the submenu.
  • Press Enter to confirm the selection of the highlighted page or link.
  • Use Cmd+Z or Ctrl+Z to undo if you add a child item by mistake.

Gutenberg’s live preview will display the dropdown menu as you build it, so you can see animations and structure update in real time.

Best practices for usability

  • 💡 Keep dropdowns short ideally fewer than 8 items to avoid frustrating users with menus that run off the screen.
  • 💡 Watch for the “Add submenu” tooltip in the block toolbar. It’s easy to miss but helps you avoid confusion when adding levels.

Deepening and polishing the sub-menu

Streamlining structure with List View

To adjust hierarchy:

  • Drag right to nest an item under a parent.
  • Drag left to promote it back to top-level.

Clean labels, better flow

For each link, aim for fewer than 25 characters so they stay readable across devices. Good structure and word economy go hand in hand.

Quick actions and prototyping

From the block’s options menu (⋯), you can:

  • Duplicate items to test label variations.
  • Remove links without losing the structure.
  • Reorder with ease and experiment with different navigation flows.

Theme limits and mobile check

Some themes support only two levels of nested menus. Keep your structure flat and functional to avoid layout issues. After editing:

  • Open the preview panel for tablet and mobile views.
  • Confirm that your dropdown works as an accordion or collapsible panel on smaller screens.
  • Check that no items are hidden or require excessive scrolling.

Build like a pro

Managing structure, appearance and usability

Designing with style and clarity

Customising your Gutenberg navigation is about more than just links. It’s a chance to shape how users experience your site. Start by exploring style variations within the navigation block. You can choose light or dark link colour schemes and apply duotone hover states that match your brand’s look. These small changes help create consistency across your site and guide user attention.

Spacing and touch-friendliness

Navigation must be touch-friendly, especially on mobile. Adjust the gap between links using the block spacing settings. This ensures your menu items meet the minimum tap-target size. Ideal spacing makes your links easier to tap without overlap or frustration.

You can also enable the overlay menu option. This transforms your navigation into a full-screen drawer at smaller screen sizes, offering better readability and focus on mobile devices.

Enhancing navigation with icons

To improve visual flow and context, insert a Media & Text block inside a menu item. This lets you add icons, like arrows or custom SVGs, next to your text labels. Icons act as subtle cues, improving scannability and reinforcing actions such as dropdowns.

Smooth performance with lightweight animations

Avoid complex motion that delays interaction. Stick with a fade transition of around 150 milliseconds using simple opacity changes. This gives a polished feel without harming responsiveness. Short, efficient transitions enhance perceived speed and user confidence.

Accessibility essentials

Usability must include accessibility. Make sure your navigation is fully keyboard-friendly and screen-reader compatible:

  • Tab key should automatically enter the submenu.
  • aria-expanded should update to true when a menu is opened.
  • All focus states must be clearly visible, ideally with a 2-pixel outline and a colour contrast of at least 3:1.

These details ensure that your site is navigable for all users, including those relying on assistive technologies.

Final checklist

Before going live, review these quick points:

  • Does hover styling contrast enough with normal text?
  • Is the focus ring always visible?
  • Can you tab through every item without breaking the flow?
  • Have you previewed on both desktop and mobile?
  • Is the overlay menu easy to open and close?

Designing an accessible, attractive, and responsive menu structure in Gutenberg means thinking beyond layout. It’s about guiding every user with ease, no matter the device or ability.

Final thoughts and next steps

Navigation is never done

A simple action plan

Here’s a five-step framework you can use to refine your navigation:

  1. Audit your current menu: Identify what’s missing and which links are underused.
  2. Add key links: Use the Navigation block in the Site Editor to add important links.
  3. Preview your layout: Ensure your menu looks great across desktop, tablet, and mobile views.
  4. Test for accessibility: Ensure tap targets, submenu behaviour, and other navigation elements meet accessibility standards.
  5. Publish when ready: Once you’re happy with the layout, track performance using your analytics.

Keep learning and experimenting

For continued improvement, explore the official WordPress documentation on the Navigation block to enhance your knowledge. Curious about what’s next in WordPress navigation? You can also follow Gutenberg development on GitHub to stay updated on upcoming features and contribute feedback.

Join the conversation

What’s the trickiest navigation structure you’ve built so far? Share your experiences in the comments, and let’s tackle challenges together.

Final mantra

Take it further with MaxiBlocks

WordPress menus for modern fast navigation

Discover how to create clear, responsive, and stylish WordPress menus with expert tips and resources.

HomePage-Maxi-Pils

FAQs – WordPress navigation submenus menus

Can you add submenus using Gutenberg in WordPress?

Where do you access the navigation menu in Gutenberg?

How do you add a submenu item in Gutenberg?

Within the Navigation block, you can add a new link and then drag it slightly to the right beneath a parent item. This indentation automatically turns it into a submenu item, creating a dropdown effect on the frontend.

Can you rearrange submenu items visually?

Yes, Gutenberg allows you to drag and drop submenu items to reorder them within the navigation structure. This makes it easy to update menus without code and see changes instantly.

What types of links can be used in submenus?

You can include links to pages, posts, custom URLs, categories, and even reusable blocks or templates, depending on how your site is structured. This flexibility makes the navigation block a powerful tool for organising content.

How does a submenu appear on the frontend?

Submenus appear as dropdowns under their parent items. The appearance is controlled by your theme’s CSS, so styling and animations may vary depending on your block theme’s design.

Can you have multiple levels of submenus?

Yes, you can nest multiple levels of submenus by further indenting items. However, it’s best to limit depth to two or three levels for usability, especially on mobile devices where deeper menus can be harder to navigate.

Is it possible to edit the navigation menu outside of the Site Editor?

Can you create different navigation menus for different parts of your site?

What if your theme doesn’t support Gutenberg menus?

Author-Kyra

Kyra Pieterse

Author

Kyra is the co-founder and creative lead of MaxiBlocks, an open-source page builder for WordPress Gutenberg.

You may also like