bootstrap-5-wordpress-navbar-walker
Bootstrap nav walker with Tabler-icons support. How it looks:
-
Copy and paste the bootstrap_5_wp_nav_menu_walker class into the functions.php file of your theme;
-
Register a new menu by adding the follow code into the functions.php file of your theme:
register_nav_menu('main-menu', 'Main menu');- Add the following html code in your header.php file or wherever you want to place your menu:
<nav class="navbar navbar-expand-md navbar-light 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="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-menu">
<?php
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' => 2,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
</div>
</div>
</nav>- Add tabler icons to your webpage.
Go tabler icons and add link to css icons inside <head> tags.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">- Add icon classes to menu item
Go to menus
Activate CSS classes in Screen options
Add CSS classes.
v1.3.0 Added support for dropdown menu (responsive) alignment: https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment
Here is how it works:
-
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.