By default, WordPress has the option of adding descriptions to menu items, allowing you to add interesting additions to your menu items. Most themes, however, don’t support menu item descriptions out of the box. But with just a few lines of code, you can add support yourself.

Step 1: Enable the description box

To get started, you have to enable the description box on the menus page. By clicking the “Screen Options” tab in the top right corner on the menus page, you can check the descriptions option, and a new area of each menu item will appear.

Step 2: Add the necessary theme support

If you theme doesn’t support descriptions out of the box, you’ll have to add it yourself. The easies way is to use the walker_nav_menu_start_el filter

We just need to check that the menu item has a description, and insert it, wrapped in a span, before the closing ‘</a>’ element.

<?php 

/**
 * Descriptions on Header Menu
 * @author WP Code Labs
 * @link https://www.wpcodelabs.com/snippets/add-description-to-wordpress-menu-items/
 * 
 * @param string $item_output, HTML outputp for the menu item
 * @param object $item, menu item object
 * @param int $depth, depth in menu structure
 * @param object $args, arguments passed to wp_nav_menu()
 * @return string $item_output
 */

function wpcl_menu_description( $item_output, $item, $depth, $args ) {
	
	if( !empty( $item->description ) ) {
		$item_output = str_replace( '</a>', '<span class="description">' . $item->description . '</span></a>', $item_output );
	}
	
	return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'wpcl_menu_description', 10, 4 );