How do I have WordPress use the <menu> tag for generated menus?

As the formal enclosure for menu items is the <menu> tag how to I make WordPress use the <menu> tag as a wrapper around menu items instead of the more generic <ul> ?

EDIT: I believe this is what I'm aiming at and this appears to be a solution.

As the formal enclosure for menu items is the <menu> tag how to I make WordPress use the <menu> tag as a wrapper around menu items instead of the more generic <ul> ?

EDIT: I believe this is what I'm aiming at and this appears to be a solution.

• menus

Share Improve this question edited Sep 29, 2024 at 11:41 th00ht asked Sep 24, 2024 at 19:36 th00htth00ht 17488 bronze badges 6

• You need a custom menu walker: wordpress.stackexchange.com/search?q=menu+walker – BlueDogRanch Commented Sep 24, 2024 at 19:55
• A menu is not a list of navigation links. It's for application menus, like the File menu. Notice how all the examples on MDN use <button> elements, not links. The semantically correct approach for a navigation menu is to wrap the list with a <nav>. – Jacob Peattie Commented Sep 27, 2024 at 18:08
• @JacobPeattie This is my source what is yours? – th00ht Commented Sep 28, 2024 at 19:12
• 1 @th00ht Did you read your source? Nowhere does it say that it's appropriate for navigation links. It's just called '<menu>' and you made assumptions. the element doesn't even have a semantic role so it provides absolutely nothing in terms accessibility or the document outline. <nav> is the correct element. – Jacob Peattie Commented Sep 29, 2024 at 12:15
• 1 w3.org/WAI/ARIA/apg/patterns/menubar/examples/… – Jacob Peattie Commented Sep 29, 2024 at 12:16

 |  Show 1 more comment

2 Answers 2

Sorted by: Reset to default 1

To make WordPress use the tag instead of for wrapping menu items, you can customize the output of wp_nav_menu() using the wp_nav_menu_args filter. Here's how you can do it:

Solution: Modify the Menu Container You can achieve this by adding the following code to your theme’s functions.php file:

function use_menu_tag_as_wrapper($args) {

    // Set the container to 'menu'
    $args['container'] = 'menu';
    
    // Remove the default class added by WordPress (optional)
    $args['container_class'] = '';
    
    return $args;
}
add_filter('wp_nav_menu_args', 'use_menu_tag_as_wrapper');

If you're just trying to replace <ul...> and </ul> with <menu...> and </menu> in the generated HTML, you can use the wp_nav_menu filter:

add_filter( 'wp_nav_menu', 'wpse_426932_menu_fix' );
/**
 * Fixes the menu HTML to use <menu> instead of <ul>.
 *
 * @param  string $html The menu HTML.
 * @return string       The fixed menu HTML.
 */
function wpcs_426932_menu_fix( $html ) {
    $html = str_replace(
        array( '<ul', '</ul>' ),
        array( '<menu', '</menu>' ),
        $html
    );
    return $html;
}

You can add this code to your active theme's functions.php file or you can make it into a simple plugin. (I tend to prefer the plugin route, because that way it keeps on working even if you change themes.)

Note: This is a very simple string replacement. If you need something more complex, you might need to use preg_replace().