fiskhandlarn/bootstrap-5-wordpress-navbar-walker

Bootstrap 5 WordPress Navbar Walker

v1.4.1 2022-05-27 22:02 UTC

Requires (Dev)

• squizlabs/php_codesniffer: ^3.6

Suggests

• wordplate/wordplate: WordPlate is a modern WordPress stack which simplifies WordPress development.

MIT

• Oskar Joelson

README

Installation

Require this package, with Composer, in the root directory of your project.

$ composer require fiskhandlarn/bootstrap-5-wordpress-navbar-walker

Usage

1. Register a new menu by adding the follow code into the functions.php file of your theme:

register_nav_menu('main-menu', 'Main menu');

1. Add the following html code in your header.php file or wherever you want to place your menu:

<nav class="navbar navbar-expand-lg 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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
     wp_nav_menu([
         'theme_location' => 'navigation',
         'container' => false,
         'menu_class' => '',
         'fallback_cb' => '__return_false',
         'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-lg-0 %2$s">%3$s</ul>',
         'depth' => 2,
         'walker' => new Fiskhandlarn\Bootstrap5WordpressNavbarWalker(),
     ]);
?>
    </div>
  </div>
</nav>

Add support for dropdown menu (responsive) alignment

• From Appearance -> Menus page of WordPress, check the CSS Classes checkbox under Screen Options;
• Add a Custom Link with "#" in the URL field (this would be the parent of your dropdown);
• On the CSS Classes field add any of the following alignment classes: 'dropdown-menu-start', 'dropdown-menu-end', 'dropdown-menu-sm-start', 'dropdown-menu-sm-end', 'dropdown-menu-md-start', 'dropdown-menu-md-end', 'dropdown-menu-lg-start', 'dropdown-menu-lg-end', 'dropdown-menu-xl-start', 'dropdown-menu-xl-end', 'dropdown-menu-xxl-start', 'dropdown-menu-xxl-end';
• If any of the mentioned above class is detected, then they will automatically copied into the ul.dropdown-menu element following the Bootstrap 5 structure;
• Any other class that is not related to the dropdown menu alignment will stay where it is.

License

Expat License