Dropdown Menus

Display your WordPress menus as a dropdown select box. Great for mobile designs.

Author:Robert O'Rourke @ interconnect/it (profile at wordpress.org)
WordPress version required:3.0
WordPress version tested:3.5
Plugin version:1.0
Added to WordPress repository:16-07-2011
Last updated:16-01-2013
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
Rating, %:88
Rated by:5
Plugin URI:http://interconnectit.com/?p=2190
Total downloads:28 776
Active installs:2 000+
plugin download
Click to start download

Sometimes for mobile design or more generally small-screen design it can be beneficial to save space by using a dropdown for your navigation.

This plugin provides a way to display your custom menus as dropdowns either using a widget or a function call and can be used as an include in any theme.


If you are using the plugin with a theme you can use the function dropdown_menu() in place of calls to wp_nav_menu().

The dropdown_menu() function takes the same arguments as wp_nav_menu() with the addition of three extras:

dropdown_menu( array(

    // You can alter the blanking text eg. "- Menu Name -" using the following
    'dropdown_title' => '-- Main Menu --',

    // indent_string is a string that gets output before the title of a
    // sub-menu item. It is repeated twice for sub-sub-menu items and so on
    'indent_string' => '- ',

    // indent_after is an optional string to output after the indent_string
    // if the item is a sub-menu item
    'indent_after' => ''

) );

You can extend and alter the output of the dropdowns using the output filters available in the code.

There are also plenty of styling hooks like in the standard list type menus with the addition of classes for targetting items at a certain depth in the menu (.menu-item-depth-1 for example) aswell the usual .current-menu-item and .current-menu-ancestor classes.



add_filter( 'dropdown_blank_item_text', 10, 2 );
function my_dropdown_blank_text( $title, $args ) {
    return __( '- Browse -' );

If you want to show the menu title as the blank item text use the follwing code:

add_filter( 'dropdown_blank_item_text', 'dropdown_menu_use_menu_title', 10, 2 );
function dropdown_menu_use_menu_title( $title, $args ) {
    return '- ' . $args->menu->name . ' -';


add_filter( 'dropdown_menus_indent_string', 10, 4 );
function my_dropdown_indent_string( $indent_string, $item, $depth, $args ) {
    return str_repeat( '&nbsp;&nbsp;', $depth );


add_filter( 'dropdown_menus_indent_after', 10, 4 );
function my_dropdown_indent_after( $indent_after, $item, $depth, $args ) {
    return '-';


Use this if you find you get class name or CSS conflicts, for example with Twitter Bootstrap.

add_filter( 'dropdown_menus_class', create_function( '$c', 'return "my-dropdown-menu-class";' ) );


Use this filter to stop the output of the selected="selected" attribute. Useful if you prefer to show the blank option on every page.

add_filter( 'dropdown_menus_select_current', create_function( '$bool', 'return false;' ) );

Can I make sure this plugin is available to my theme?

If your theme requires this plugin to be available it will work as a simple include. Just place the plugin into your theme directory and include dropdown-menus.php from your functions.php file.

If you place the plugin folder into your theme's directory you would use the following code in your functions.php file:

if ( ! function_exists( 'dropdown_menu' ) )
    include( 'dropdown-menus/dropdown-menus.php' );