How to Create a Custom WordPress Navbar Compatible with Bootstrap 5

Creating a custom WordPress navigation menu that is compatible with Bootstrap 5 can greatly enhance your website’s design and functionality. In this post, we will walk you through creating a responsive menu bar that supports dropdowns. This solution does not rely on third-party walker classes, ensuring a clean and customizable approach.

Step 1: Registering the Custom Menu

First, you need to register your custom menu in WordPress. This can be done by adding the following code to your theme’s functions.php file.

function register_my_custom_menu() {
    register_nav_menu('main-menu', __( 'Main Menu' ));
}
add_action( 'init', 'register_my_custom_menu' );

This code registers a new menu location called main-menu. You can now assign a menu to this location from the WordPress admin panel.

Step 2: Creating a Custom Walker Class

The next step is to create a custom walker class to output the menu in the desired HTML structure. This class will add dropdown functionality, make the menu mobile-friendly, and highlight the active menu item with an active class. Add this code to a new file in your theme directory, e.g., class-wp-custom-walker.php.

class WP_Custom_Walker extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\">\n";
    }

    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</div>\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent = ( $depth ) ? str_repeat("\t", $depth) : '';
        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'nav-item';

        if ( in_array('menu-item-has-children', $classes) ) {
            $classes[] = 'dropdown';
        }

        if ( in_array('current-menu-item', $classes) ) {
            $classes[] = 'active';
        }

        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item));
        $class_names = ' class="' . esc_attr( $class_names ) . '"';

        $id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args);
        $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<div' . $id . $value . $class_names .'>';

        $atts = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
        $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
        $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

        if ( in_array('menu-item-has-children', $classes) ) {
            $atts['class'] = 'nav-link dropdown-toggle';
            $atts['id'] = 'navbarDropdown';
            $atts['role'] = 'button';
            $atts['data-bs-toggle'] = 'dropdown';
            $atts['aria-expanded'] = 'false';
        } else {
            $atts['class'] = 'nav-link';
        }

        if ( in_array('current-menu-item', $classes) ) {
            $atts['class'] .= ' active';
        }

        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }

    function end_el( &$output, $item, $depth = 0, $args = array() ) {
        $output .= "</div>";
    }
}

Explanation:

Dropdown Menu Support: The start_lvl and end_lvl functions generate the HTML for dropdown menus. When a menu item has child items, it adds the dropdown-menu class.

Mobile-Friendly: The HTML structure generated by this walker class is compatible with Bootstrap's mobile-friendly features, ensuring that the menu collapses and expands correctly on smaller screens.

Active Class: The walker class adds an active class to the current menu item, allowing you to highlight the active page.

Step 3: Including the Walker Class in functions.php

Next, include the newly created walker class in your theme’s functions.php.

require_once get_template_directory() . '/class-wp-custom-walker.php';

Step 4: Displaying the Menu in Your Template

Finally, use the wp_nav_menu function in your theme’s template file (e.g., header.php) to display the menu.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <div class="navbar-nav">
                <?php
                wp_nav_menu( array(
                    'theme_location' => 'main-menu',
                    'container' => false,
                    'items_wrap' => '%3$s',
                    'walker' => new WP_Custom_Walker(),
                ) );
                ?>
            </div>
        </div>
    </div>
</nav>

Conclusion

By following these steps, you can create a custom WordPress navigation menu that is compatible with Bootstrap 5 and supports responsive dropdown menus. This approach ensures that your menu integrates seamlessly with the Bootstrap framework while allowing you to customize it to match your site’s design.

This solution leverages the power of WordPress’s menu system and Bootstrap’s responsive capabilities, providing a professional and modern navigation experience for your users. Feel free to adjust the classes and styles as needed to match your specific design requirements.

Happy coding! 😊