Bootstrap 5 Nav Walker for Sage 10

Bootstrap5NavWalker.md

Bootstrap 5 Walker for Sage 10

Adds Bootstrap 5 css classes to the nice Soil nav walker in a Sage 10 project.

Assumptions

• Assumes you're using Sage 10.
• Assumes the Roots/Soil plugin is installed and activated.
• Assumes Tailwind has been removed from the Sage project and Bootstrap 5 has been added.

To use

• Add BootstrapNav.php to the themes /app directory.
• Replace the contents of /resources/views/sections/header.blade.php with the version in this gist.

Limitations

• Only supports 1 level of dropdowns.
• There are probably better versions of this out there.

Resources

• About Sage: https://roots.io/sage/
• About Soil: https://roots.io/products/soil/
• Removing Tailwind and adding BS5 to a Sage 10 project: https://roots.io/sage/docs/css-frameworks/
• Bootstrap navbar docs: https://getbootstrap.com/docs/5.2/components/navbar/

BootstrapNav.php

<?php

namespace App;

use Roots\Soil\NavWalker as SoilNav;

/**
 * Return if Soil does not exist.
 */
if (!class_exists('Roots\Soil\NavWalker')) {
    return;
}

/**
 * Class BootstrapNav
 * Add Bootstrap 5 classes to nav walker
 */
class BootstrapNav extends SoilNav
{

    /**
     * NavWalker constructor.
     */
    public function __construct()
    {
        parent::__Construct();
        add_filter('nav_menu_submenu_css_class', [$this, 'dropdownListClass'], 10, 2);
        add_filter('nav_menu_css_class', [$this, 'listItemClass'], 10, 2);
        add_filter('nav_menu_link_attributes', [$this, 'linkAttributes'], 10, 4);
    }

    /**
     * Add "dropdown-menu" class to dropdown UL
     * @param $classes
     * @return array
     */
    function dropdownListClass($classes): array
    {
        $classes[] = 'dropdown-menu';
        return $classes;
    }

    /**
     * Add Bootstrap 5 classes to list items
     * @param $classes
     * @param $item
     * @return array
     */

    function listItemClass($classes, $item): array
    {
        if ($item->menu_item_parent == 0) {
            $classes[] = 'nav-item';
        }
        if ($item->is_subitem) {
            $classes[] = 'dropdown';
        }
        return $classes;
    }

    /**
     * Add Bootstrap 5 classes and attributes to anchor links.
     * This method originally created by QWp6t (see credit link).
     * @param $atts
     * @param $item
     * @param $args
     * @param $depth
     * @return array
     * @SuppressWarnings(PHPMD.UnusedFormalParameter) This method overrides its parent
     * @link Credit https://gist.github.com/QWp6t/8f94b7096bb0d3a72fedba68f73033a5#file-bootstrap-php-L63
     */
    public function linkAttributes($atts, $item, /** @noinspection PhpUnusedParameterInspection */ $args, $depth): array
    {
        $atts['class'] = $depth ? 'dropdown-item' : 'nav-link';
        if ($item->current || $item->current_item_ancestor) {
            $atts['class'] .= ' active';
        }
        if ($item->is_subitem) {
            $atts['class'] .= ' dropdown-toggle';
            $atts += [
                'data-bs-toggle' => 'dropdown',
                'role' => 'button',
                'aria-expanded' => 'false'
            ];
        }
        return $atts;
    }
}

header.blade.php

<header class="banner">

  @if (has_nav_menu('primary_navigation'))
    <nav class="navbar navbar-expand-lg navbar-light bg-light"
         aria-label="{{ wp_get_nav_menu_name('primary_navigation') }}">
      <div class="container">
        <a class="navbar-brand" href="{{ home_url('/') }}">
          {!! $siteName !!}
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav"
                aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="main-nav">
          {!! wp_nav_menu([
    'theme_location' => 'primary_navigation',
    'menu_class' => 'navbar-nav me-auto mb-2 mb-lg-0',
    'walker' => new \App\BootstrapNav(),
    ]) !!}
        </div>
      </div>
    </nav>
  @endif
</header>

I love you. Thank you! This just saved my evening :)

Awesome, glad it was helpful! :)

Thank you very much, works like a charm!

Thank you, that`s great!

• I had to add 'container' => false to wp_nav_menu call to remove the div and be able to position a search field right of the menu items
• I had to add bootstrapNav in functions.phpto load the script with the nav walker

@Schwankenson thanks for the info and glad it worked out!

If you want to remove the walker from your functions.php try naming the file BootstrapNav.php, with the capitalized B, it will then be recognized as a PHP class and will be automagically picked up by the class autoloader.

@Schwankenson thanks for the info and glad it worked out!

If you want to remove the walker from your functions.php try naming the file BootstrapNav.php, with the capitalized B, it will then be recognized as a PHP class and will be automagically picked up by the class autoloader.

Great, thank you. Did not know about this autoloading thing.