I use Bootstrap v5 and [wp-bootstrap-navwalker][1]

in function.php

<?php
  require_once('class-wp-bootstrap-navwalker.php');
  function main_menu(){
    wp_nav_menu(array(
      'theme_location'    => 'main-menu',
      'menu_class'        => 'nav navbar-nav',
      'depth'             => 2,
      'container'         => 'div',
      'container_class'   => 'collapse navbar-collapse',
      'container_id'      => 'navbarSupportedContent',
      'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
      'walker'            => new WP_Bootstrap_Navwalker(),
    ));
  }
?>

in header.php

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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>
</nav>

the dropdown menu not work
[1]:

I use Bootstrap v5 and [wp-bootstrap-navwalker][1]

in function.php

<?php
  require_once('class-wp-bootstrap-navwalker.php');
  function main_menu(){
    wp_nav_menu(array(
      'theme_location'    => 'main-menu',
      'menu_class'        => 'nav navbar-nav',
      'depth'             => 2,
      'container'         => 'div',
      'container_class'   => 'collapse navbar-collapse',
      'container_id'      => 'navbarSupportedContent',
      'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
      'walker'            => new WP_Bootstrap_Navwalker(),
    ));
  }
?>

in header.php

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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>
</nav>

the dropdown menu not work
[1]: https://github./wp-bootstrap/wp-bootstrap-navwalker

• javascript
• wordpress
• function
• navbar
• bootstrap-5

• Questions which are too broad, unclear, inplete or primarily opinion-based may be closed by the munity until they are improved. – amarinediary Commented Jan 3, 2021 at 5:00
• 1 What doesn't work? On hover open the sub-menu? On click open the sub-menu? There's no menu at all? Please provide more details. – Howard E Commented Jan 3, 2021 at 19:13
• @HowardE the dropdown menu does not work in bootstrap 5 the menu ` function register_all_menu() { register_nav_menus(array( 'top_menu' => 'القائمة العلوية', 'main-menu' => 'القائمة الرئيسية', 'footer-menu' => 'القائمة السفلية', )); } ` I also check this article but not work too [github./AlexWebLab/bootstrap-5-wordpress-navbar-walker] – Nazar Kardan Commented Jan 4, 2021 at 19:53
• 2 you can use this navwalker and in line 214 change for this: 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'; } – Nazar Kardan Commented Jan 10, 2021 at 22:14
• Changing to $atts['data-bs-toggle'] worked for me! – ben.kaminski Commented Feb 24, 2021 at 21:27

1 Answer 1

Bootstrap 5.0.0 [ 2021 ]

Tested and Working ✔

This function below will update data-toggle to data-bs-toggle.

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;
}

Source: https://github./wp-bootstrap/wp-bootstrap-navwalker/issues/499

Fixing the Hamburger icon dropdown

OP already using the new navbar elements. But if any of you using the old one and updated only the functions from above, then follow the steps below.

In responsive the Hamburger icon will not work if you are using the old classes. You also have to update your from data-toggle to data-bs-toggle

<button ... data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" ...>
   <!--span-->
</button>