How to Create a Custom Navigation Menu in WordPress (Classic and Block Themes)

Key Takeaways

• A WordPress custom menu for visitors is a navigation menu, built under Appearance > Menus in classic themes and under Appearance > Editor > Navigation in block themes.
• A classic WordPress menu only appears on the site after you assign it to a theme location, such as the Primary menu or Secondary menu in Twenty Twenty-One.
• Block themes such as Twenty Twenty-Five have no Appearance > Menus screen unless the theme adds it, because their menus live in the Navigation block.
• Dropdown submenus in Appearance > Menus come from nesting: drag a menu item slightly to the right, under the item that should be its parent.
• WP Adminify's Menu Duplicator is a single switch on the Productivity tab that adds a Duplicate Menu button to the classic Appearance > Menus screen.

To create a WordPress custom menu for your visitors, go to Appearance > Menus in a classic theme, or to Appearance > Editor > Navigation in a block theme. Add your pages and links, put them in order, and choose where the menu shows. We tested these steps on WordPress 7.1.4 with a six-link header menu.

This guide covers the navigation menu in your site header or footer. If you want to add a link to the admin sidebar inside wp-admin, that is the admin menu, and our guide to add_menu_page and the admin sidebar covers it. For more ways to speed up daily work with posts, pages and menus, see our WordPress admin productivity guide and the WP Adminify productivity tools.

Classic Theme or Block Theme? Check Which Menu Screen You Have

How you build a menu depends on your theme type. Classic themes, such as Twenty Twenty-One, use the Appearance > Menus screen. Block themes, such as Twenty Twenty-Five, use the Navigation block in the Site Editor. Under Appearance, if you see "Menus", follow the classic steps; if you see "Editor" and no "Menus", follow the block theme steps.

How to Create a Custom Menu in a Classic Theme

In a classic theme, you create a menu at Appearance > Menus. Name the menu, add items from the boxes on the left, drag them into order, and save. The menu stays hidden from visitors until you assign it to a location, which you can do on the same screen or on the Manage Locations tab.

1. Go to Appearance > Menus.
2. Click create a new menu (on a fresh site, the name field is already open).
3. Type a clear name in Menu Name, such as "Main Menu" or "Footer Menu". Visitors never see this name.
4. Click Create Menu.
5. In the left column, tick the pages you want under Pages and click Add to Menu.
6. Drag the items in the Menu structure box into the order you want.
7. Under Menu Settings, tick a Display location if you want to place it now.
8. Click Save Menu.

You can also edit menus with a live preview at Appearance > Customize > Menus. It uses the same menus, so changes in one place show up in the other.

How to Add Pages, Custom Links and Dropdown Submenus

The left column of Appearance > Menus lists everything you can add: Pages, Posts, Custom Links and Categories. Tick items and click Add to Menu. Use Custom Links for any URL, such as a page on another site. To make a dropdown, drag an item slightly to the right under the item that should be its parent.

• Pages and posts. Use the View All or Search tab if the item you want is not in the "Most Recent" list.
• Custom Links. Enter the URL and the Link Text, then click Add to Menu. This works for external sites, anchor links like #contact, or a login link.
• Categories. A category item links to the archive of posts in that category.
• Labels. Open an item with its arrow and change the Navigation Label. The page title stays the same; only the menu text changes.
• Submenus. Drag a child item to the right until it indents under its parent. You can also open the item and use the Move links.

More options are hidden by default. Click Screen Options at the top right of the screen and tick Link Target, CSS Classes or Description. With CSS Classes on, you can add a class such as menu-button to one item and style it as a button in your theme's CSS.

How to Assign a Menu to a Theme Location

A classic menu shows on your site only after you assign it to a theme location. Locations are slots the theme defines, such as a header or footer. Open the Manage Locations tab on Appearance > Menus, choose a menu for each location, and click Save Changes. Each location holds one menu at a time.

The number and names of locations depend on the theme. Twenty Twenty-One has a Primary menu (header) and a Secondary menu (footer). Other themes add mobile, top bar or sidebar locations. If your theme has no location where you need one, you can add a Navigation Menu widget to a widget area, or ask a developer to register a new location (see the code section below).

How to Create a Navigation Menu in a Block Theme

In a block theme, menus are Navigation menus that you edit in the Site Editor. Go to Appearance > Editor and click Navigation to see your menus and their items. To change what visitors see in the header, edit the Navigation block inside the header template, add or remove links, and click Save.

1. Go to Appearance > Editor.
2. Click Navigation in the left panel. WordPress lists your Navigation menus and shows the items of the open menu.
3. Click a menu to edit it. Use the + button to add a page, a custom link or a submenu.
4. Drag items to reorder them in the list view.
5. Click Save. Every template that uses this Navigation menu updates at once.

To style the menu, open the header template, select the Navigation block, and use the block settings. You can change the layout (horizontal or vertical), justification, colours, typography and spacing, and choose when the menu turns into a mobile "hamburger" icon. If you switched from a classic theme, the Navigation block can import your old classic menus from its block settings. The Navigation block documentation on wordpress.org lists every option.

How to Register a Menu Location With wp_nav_menu (Developers)

Classic themes create menu locations in code. The theme calls register_nav_menus() to name each location, then prints the assigned menu in a template file, such as header.php, with wp_nav_menu(). Add the same two pieces to a child theme when you need a location your theme does not have.

1
2// functions.php in a child theme
3add_action( 'after_setup_theme', 'acme_register_menus' );
4
5function acme_register_menus() {
6    register_nav_menus( array(
7        'top-bar' => 'Top Bar Menu',
8    ) );
9}
10

1
2// header.php, where the menu should appear
3wp_nav_menu( array(
4    'theme_location' => 'top-bar',
5    'container'      => 'nav',
6    'fallback_cb'    => false,
7) );
8

After this, "Top Bar Menu" appears on the Manage Locations tab and you can assign any menu to it. Setting fallback_cb to false stops WordPress from printing a list of all pages when no menu is assigned. The wp_nav_menu() reference has every argument. Block themes do not use this code; they place the Navigation block in a template instead.

How to Duplicate or Copy a WordPress Menu

WordPress has no built-in copy button on Appearance > Menus. You can rebuild the menu by hand, or add a Duplicate Menu button with a plugin. WP Adminify's Menu Duplicator adds that button with one switch. In a block theme, the Navigation screen in the Site Editor handles its own menus.

To turn it on, go to Adminify > Productivity, switch on Menu Duplicator and save. Then open a menu on Appearance > Menus and click Duplicate Menu next to the menu name. The copy is not assigned to any location, so you can edit it safely and swap it in later. Menu Duplicator shows no Pro badge in Adminify 4.3.4, and it sits next to the post duplicator and folders in the same WordPress productivity plugin.

For all three copy methods with screenshots, read how to duplicate a menu in WordPress. To move a menu to another site, see how to export and import WordPress menus.

Tips for a Menu Visitors Can Use

A good navigation menu is short and works well on a phone. Keep the main menu to about five to seven top-level items, use plain labels that say where the link goes, and limit dropdowns to one level. Put less important links, such as privacy or terms, in the footer menu.

• Use the words your visitors use. "Pricing" beats "Investment". "Contact" beats "Let's Talk".
• Put the main action last. The right end of a header menu is a common place for "Contact" or "Get a Quote".
• Test on mobile. Open your site on a phone and check that the menu icon opens, every link works, and dropdowns can be tapped.
• Check keyboard use. Press Tab through the menu. Every link should get a visible focus outline.
• Multi-column mega menus need a menu plugin or a page builder add-on. Master Addons for Elementor, from Pixar Labs, is one option on wordpress.org.

Frequently Asked Questions

Final Thoughts

To create a WordPress custom menu, use Appearance > Menus in a classic theme: name the menu, add pages and custom links, nest items for dropdowns, and assign the menu to a location such as Primary menu. In a block theme, edit the Navigation block at Appearance > Editor > Navigation. Developers can add new locations with register_nav_menus() and wp_nav_menu().

For more time-saving tips on posts, pages and menus, read our guide to WordPress Admin Productivity. If you manage several menus, turn on Menu Duplicator in WP Adminify so you can test changes on a copy first.

Related Reading

• How to Add a Menu to the WordPress Admin Dashboard
• WordPress Admin Menu Editor: Reorder and Hide Menus by Role