I have been researching online how to create nav menus that look like this:

enter image description here

I have never coded a WordPress dynamic menu that looks like the one in the image above. Even the name, some say its called a breadcrumbs menu, an eyebrow menu, a global versus local menu and I have even searched W3 Schools. Where could I find documentation on how to develop this?


WordPress calls these Navigation Menus. There are a few steps:

  1. Set up a child theme, if you aren't already using one. That way your changes won't be lost when the main theme is updated.

  2. Register the menu - in your child theme's functions.php file,

function mythemeslug_register_custom_menu() { register_nav_menu('topnav', __('Top Nav')); } add_action('init', 'mythemeslug_register_custom_menu');

  1. Call the menu in the theme - you'll most likely want this in your child theme's header.php file.

wp_nav_menu(array('menu' => 'topnav'));

There are various ways to call it but in this example you're calling the menu with the name 'topnav'. You can alternatively designate a 'theme location' and call it that way. You can also control the HTML container and CSS classes, among other things. Follow the links above to learn more about various options.

  1. Build the menu in wp-admin - you can do this in either the Customizer or under Appearance > Menus.

If you need to heavily customize the HTML markup, you can create a custom walker.

  • Elaine, does that 'topnav' have to go above 'theme_location' => 'primary'? Which is what I currently have in my wp_nav_menu array. – Daniel Apr 10 '17 at 20:26
  • You can use theme_location instead of the topnav name. Check out the documentation, then if you're stuck, probably best to open a new question with your specific code snippets :) – WebElaine Apr 10 '17 at 21:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.