What is Custom WordPress Navigation Menu?

Custom WordPress navigation menu was firstly introduced by WordPress developers in WordPress version 3.0 and since then they are making efforts to bring the more dynamic form of navigation menus with more user-friendly backend and easy customization. I think in WordPress 3.6.1 they have almost achieved the best version of menus. These Custom WordPress Navigation menus allow the user to organize their menus using categories, pages, and custom menus. WordPress also allows us to create drop-down menus and submenus.

How to enable custom navigation menu in WordPress

Like custom widget area, custom WordPress template, post thumbnail, and features thumbnail. Custom WordPress navigation menu is also enabled/register from function.php available in your WordPress Theme folder.
Just add the following code in the function.php within the PHP tags to enable the navigation menu in the WordPress:

if (function_exists('register_nav_menus')) {
    register_nav_menus(
        array(
            'main_nav' => 'Main Navigation Menu'
        )
    );
}

After you have added this code in function.php you will see the new option called “menu” under Appearance in the WordPress admin panel. If this code is excluded from function.php you will not see no “menu” option anywhere in the admin panel.

How to add custom navigation menus in the WordPress theme

After you have enabled the menu from “function.php” you can place the menu anywhere in the theme. Mostly developer uses to add menus in the header.php but you are not restricted to do the same.
Add the following code where you want the menu to appear:

<?php wp_nav_menu(array('menu' => 'Main Nav Menu')); ?>

In the above code wp_nav_menu is the main function and ‘menu’ is the argument which tells WordPress to show menu with the name ‘Main Nav Menu’ specified in function.php

NOTE: While styling HTML/CSS for navigation don’t put classes and id’s in <ul> and <li> because subsequently if you are going to convert HTML into WordPress you have to remove <ul> and <li> to replace with the WordPress dynamic code.