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>