can I use with Bootstrap 5?

[erhandemirci]

can I use with Bootstrap 5?

[AlexWebLab]

can I use with Bootstrap 5?

I've updated the code for BS5 here: https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker

[suncoastDave]

Made to work WITH wp_bootstrap-navwalker or in place of it?

[AlexWebLab]

Made to work WITH wp_bootstrap-navwalker or in place of it?

In place of it. There is only one php function to replace/add on your functions.php file and a new navbar to add in your header.php file.

[mitchellholzmann]

The only real change I've seen so far is that they changed the attribute data-toggle to data-bs-toggle. Which can be solved quite easily by hooking into nav_menu_link_attributes.

add_filter( 'nav_menu_link_attributes', 'bootstrap5_dropdown_fix' );
function bootstrap5_dropdown_fix( $atts ) {
    if ( array_key_exists( 'data-toggle', $atts ) ) {
        unset( $atts['data-toggle'] );
        $atts['data-bs-toggle'] = 'dropdown';
    }
    return $atts;
}

This is all I needed to make it work.

[AlexWebLab]

The only real change I've seen so far is that they changed the attribute data-toggle to data-bs-toggle. Which can be solved quite easily by hooking into nav_menu_link_attributes.

Yes, true! They also have replaced direction properties like left and right in favour of start and end (in order to support RTL). For instance, the class in ul.navbar-nav has been replaced from mr-auto to me-auto.

[N-Kardan]

I copy and paste the bootstrap_5_wp_nav_menu_walker class into the functions.php without register_nav_menu('main-menu', 'Main menu'); I add also:

function register_all_menu() {
    register_nav_menus(array(
      'top_menu' => 'القائمة العلوية',
      'main-menu' => 'القائمة الرئيسية',
      'footer-menu' => 'القائمة السفلية',
    ));
  }
function main_menu(){
    wp_nav_menu(array(
      'theme_location'    => 'main-menu',
      'container' => false,
      'menu_class' => '',
      'fallback_cb' => '__return_false',
      'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
      'depth' => 1,
      'walker' => new bootstrap_5_wp_nav_menu_walker()
    ));
  }
add_action('init', 'register_all_menu');

and in header.php I add:

<div class="container">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
        <?php main_menu() ?>
    </div>

and the dropdown does not work, can you help?

[AlexWebLab]

I copy and paste the bootstrap_5_wp_nav_menu_walker class into the functions.php without register_nav_menu('main-menu', 'Main menu'); I add also:

function register_all_menu() {
    register_nav_menus(array(
      'top_menu' => 'القائمة العلوية',
      'main-menu' => 'القائمة الرئيسية',
      'footer-menu' => 'القائمة السفلية',
    ));
  }
function main_menu(){
    wp_nav_menu(array(
      'theme_location'    => 'main-menu',
      'container' => false,
      'menu_class' => '',
      'fallback_cb' => '__return_false',
      'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
      'depth' => 1,
      'walker' => new bootstrap_5_wp_nav_menu_walker()
    ));
  }
add_action('init', 'register_all_menu');

and in header.php I add:

<div class="container">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
        <?php main_menu() ?>
    </div>

and the dropdown does not work, can you help?

Because it's missing a div that wraps around main_menu() replace:

<?php main_menu() ?>

with:

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <?php main_menu() ?>
</div>

[N-Kardan]

I copy and paste the bootstrap_5_wp_nav_menu_walker class into the functions.php without register_nav_menu('main-menu', 'Main menu'); I add also:

function register_all_menu() {
    register_nav_menus(array(
      'top_menu' => 'القائمة العلوية',
      'main-menu' => 'القائمة الرئيسية',
      'footer-menu' => 'القائمة السفلية',
    ));
  }
function main_menu(){
    wp_nav_menu(array(
      'theme_location'    => 'main-menu',
      'container' => false,
      'menu_class' => '',
      'fallback_cb' => '__return_false',
      'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
      'depth' => 1,
      'walker' => new bootstrap_5_wp_nav_menu_walker()
    ));
  }
add_action('init', 'register_all_menu');

and in header.php I add:

<div class="container">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
        <?php main_menu() ?>
    </div>

and the dropdown does not work, can you help?

Because it's missing a div that wraps around main_menu() replace:

<?php main_menu() ?>

with:

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <?php main_menu() ?>
</div>

:( this solution not work...

[AlexWebLab]

I copy and paste the bootstrap_5_wp_nav_menu_walker class into the functions.php without register_nav_menu('main-menu', 'Main menu'); I add also:

function register_all_menu() {
    register_nav_menus(array(
      'top_menu' => 'القائمة العلوية',
      'main-menu' => 'القائمة الرئيسية',
      'footer-menu' => 'القائمة السفلية',
    ));
  }
function main_menu(){
    wp_nav_menu(array(
      'theme_location'    => 'main-menu',
      'container' => false,
      'menu_class' => '',
      'fallback_cb' => '__return_false',
      'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
      'depth' => 1,
      'walker' => new bootstrap_5_wp_nav_menu_walker()
    ));
  }
add_action('init', 'register_all_menu');

and in header.php I add:

<div class="container">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
        <?php main_menu() ?>
    </div>

and the dropdown does not work, can you help?

Because it's missing a div that wraps around main_menu() replace:

<?php main_menu() ?>

with:

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <?php main_menu() ?>
</div>

:( this solution not work...

Check also that the attribute data-bs-target of button.navbar-toggler is the same of the id of div.navbar-collapse In your example is #navbarSupportedContent and navbarSupportedContent, respectively. In my code is #main-menu and main-menu

[MathewLister]

The only real change I've seen so far is that they changed the attribute data-toggle to data-bs-toggle. Which can be solved quite easily by hooking into nav_menu_link_attributes.

add_filter( 'nav_menu_link_attributes', 'bootstrap5_dropdown_fix' );
function bootstrap5_dropdown_fix( $atts ) {
    if ( array_key_exists( 'data-toggle', $atts ) ) {
        unset( $atts['data-toggle'] );
        $atts['data-bs-toggle'] = 'dropdown';
    }
    return $atts;
}

This is all I needed to make it work.

@xazinji Should I put this in class-wp-bootstrap-navwalker.php or functions.php?

[N-Kardan]

I solve this issue by using this navwalker

and I change old: if ( $this->has_children && 0 === $depth ) { $atts['href'] = '#'; $atts['data-toggle'] = 'dropdown'; $atts['aria-haspopup'] = 'true'; $atts['aria-expanded'] = 'false'; $atts['class'] = 'dropdown-toggle nav-link'; $atts['id'] = 'menu-item-dropdown-' . $item->ID; } new: if ( $this->has_children && 0 === $depth ) { $atts['href'] = '#'; $atts['data-bs-toggle'] = 'dropdown'; $atts['aria-haspopup'] = 'true'; $atts['aria-expanded'] = 'false'; $atts['class'] = 'dropdown-toggle nav-link'; $atts['id'] = 'navbarDropdown'; } and it's work :)

[jeff-at-livecanvas]

But what about highlighting correctly the current menu item? Seems like this is not working correctly.

[AlexWebLab]

But what about highlighting correctly the current menu item? Seems like this is not working correctly.

You are damn right! I fixed it and released a new version: https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker/releases/tag/v1.2.1

[jeff-at-livecanvas]

Fantastic, it works! THANK YOU.

All The Best Jeff @ the LiveCanvas.com Team

On Fri, Jan 22, 2021 at 3:18 AM Alex notifications@github.com wrote:

But what about highlighting correctly the current menu item? Seems like this is not working correctly.

You are damn right! I fixed it and released a new version: https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker/releases/tag/v1.2.1

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/wp-bootstrap/wp-bootstrap-navwalker/issues/499#issuecomment-765067636, or unsubscribe https://github.com/notifications/unsubscribe-auth/AP4XXMTMPMV2SPOSR7CLFBDS3DOAXANCNFSM4UXFONIQ .

[mitchellholzmann]

.current-menu-item is still applied, no need to have .active.

[AlexWebLab]

.current-menu-item is still applied, no need to have .active.

True. I keep it only in a.nav-link just to respect the original HTML of the component: https://getbootstrap.com/docs/5.0/components/navbar/#nav

[dgdb1]

I change only this, and work for me great: data-toggle to data-bs-toggle. I didn't change anything else.

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
        <span class="navbar-toggler-icon"></span>
    </button>

To

  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
        <span class="navbar-toggler-icon"></span>
    </button>

Full code to Bootstrap 5:

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
        <span class="navbar-toggler-icon"></span>
    </button>

    <a class="navbar-brand" href="#">Navbar</a>
        <?php
        wp_nav_menu( array(
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker(),
        ) );
        ?>
    </div>
</nav>

[jamesjsewell]

should probably add this to the README if you haven't already, i've been pulling whats left of my hair out lol, im a dumb dumb for making the mistake of using bs5 i guess but geez, im also seeing people on youtube tutorials having the same issue and it's prob related

[jamesjsewell]

I'll stick with bs4 for now i guess?

[exonianp]

Guys, I think that the walker as it stands it cannot fully accommodate Bootstrap 5 best practices.

I have started a repo here https://github.com/exonianp/wp-bootstrap5-accordeon-vertical-menu and I am looking forward to your contributions to complete the necessary conditions; I have only worked on this a couple of days so my expertise on WP menu is nowhere near yours; so your help will be greatly appreciated.

[IanDelMar]

Instruction how to use the current version of the Walker with Bootstrap 5 were added in #516. v5 of the walker will be fully compatible with Bootstrap 4 and Bootstrap 5 without the need for adding a filter to fix the data attribute.