├── .gitignore
├── LICENSE
├── README.md
└── functions.php


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Compiled source
 2 | *.com
 3 | *.class
 4 | *.dll
 5 | *.exe
 6 | *.o
 7 | *.so
 8 | 
 9 | # Packages
10 | *.7z
11 | *.dmg
12 | *.gz
13 | *.iso
14 | *.jar
15 | *.rar
16 | *.tar
17 | *.zip
18 | 
19 | # Logs and databases
20 | *.log
21 | *.sql
22 | *.sqlite
23 | 
24 | # OS generated files
25 | .DS_Store
26 | .DS_Store?
27 | ._*
28 | .Spotlight-V100
29 | .Trashes
30 | ehthumbs.db
31 | Thumbs.db


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Alex
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Bootstrap 5 WordPress navbar walker menu
 2 | [bootstrap-5-wordpress-navbar-walker](https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker)
 3 | ## How to use:
 4 | 1. Copy and paste the [bootstrap_5_wp_nav_menu_walker](https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker/blob/main/functions.php) class into the functions.php file of your theme;
 5 | 2. Register a new menu by adding the follow code into the functions.php file of your theme:
 6 | ```php
 7 | register_nav_menu('main-menu', 'Main menu');
 8 | ```
 9 | 3. Add the following html code in your header.php file or wherever you want to place your menu:
10 | ```html
11 | <nav class="navbar navbar-expand-md navbar-light bg-light">
12 |     <div class="container-fluid">
13 |         <a class="navbar-brand" href="#">Navbar</a>
14 |         <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">
15 |             <span class="navbar-toggler-icon"></span>
16 |         </button>
17 |         
18 |         <div class="collapse navbar-collapse" id="main-menu">
19 |             <?php
20 |             wp_nav_menu(array(
21 |                 'theme_location' => 'main-menu',
22 |                 'container' => false,
23 |                 'menu_class' => '',
24 |                 'fallback_cb' => '__return_false',
25 |                 'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
26 |                 'depth' => 2,
27 |                 'walker' => new bootstrap_5_wp_nav_menu_walker()
28 |             ));
29 |             ?>
30 |         </div>
31 |     </div>
32 | </nav>
33 | ```
34 | ### v1.3.0 Added support for dropdown menu (responsive) alignment: https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment
35 | 
36 | **Here is how it works**:
37 | - From _Appearance -> Menus_ page of WordPress, check the _CSS Classes_ checkbox under _Screen Options_;
38 | - Add a _Custom Link_ with "#" in the URL field (this would be the parent of your dropdown);
39 | - 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';
40 | - 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;
41 | - Any other class that is not related to the dropdown menu alignment will stay where it is.
42 | 


--------------------------------------------------------------------------------
/functions.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | // bootstrap 5 wp_nav_menu walker
 3 | class bootstrap_5_wp_nav_menu_walker extends Walker_Nav_menu
 4 | {
 5 |   private $current_item;
 6 |   private $dropdown_menu_alignment_values = [
 7 |     'dropdown-menu-start',
 8 |     'dropdown-menu-end',
 9 |     'dropdown-menu-sm-start',
10 |     'dropdown-menu-sm-end',
11 |     'dropdown-menu-md-start',
12 |     'dropdown-menu-md-end',
13 |     'dropdown-menu-lg-start',
14 |     'dropdown-menu-lg-end',
15 |     'dropdown-menu-xl-start',
16 |     'dropdown-menu-xl-end',
17 |     'dropdown-menu-xxl-start',
18 |     'dropdown-menu-xxl-end'
19 |   ];
20 | 
21 |   function start_lvl(&$output, $depth = 0, $args = null)
22 |   {
23 |     $dropdown_menu_class[] = '';
24 |     foreach($this->current_item->classes as $class) {
25 |       if(in_array($class, $this->dropdown_menu_alignment_values)) {
26 |         $dropdown_menu_class[] = $class;
27 |       }
28 |     }
29 |     $indent = str_repeat("\t", $depth);
30 |     $submenu = ($depth > 0) ? ' sub-menu' : '';
31 |     $output .= "\n$indent<ul class=\"dropdown-menu$submenu " . esc_attr(implode(" ",$dropdown_menu_class)) . " depth_$depth\">\n";
32 |   }
33 | 
34 |   function start_el(&$output, $item, $depth = 0, $args = null, $id = 0)
35 |   {
36 |     $this->current_item = $item;
37 | 
38 |     $indent = ($depth) ? str_repeat("\t", $depth) : '';
39 | 
40 |     $li_attributes = '';
41 |     $class_names = $value = '';
42 | 
43 |     $classes = empty($item->classes) ? array() : (array) $item->classes;
44 | 
45 |     $classes[] = ($args->walker->has_children) ? 'dropdown' : '';
46 |     $classes[] = 'nav-item';
47 |     $classes[] = 'nav-item-' . $item->ID;
48 |     if ($depth && $args->walker->has_children) {
49 |       $classes[] = 'dropdown-menu dropdown-menu-end';
50 |     }
51 | 
52 |     $class_names =  join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
53 |     $class_names = ' class="' . esc_attr($class_names) . '"';
54 | 
55 |     $id = apply_filters('nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args);
56 |     $id = strlen($id) ? ' id="' . esc_attr($id) . '"' : '';
57 | 
58 |     $output .= $indent . '<li ' . $id . $value . $class_names . $li_attributes . '>';
59 | 
60 |     $attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
61 |     $attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
62 |     $attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
63 |     $attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
64 | 
65 |     $active_class = ($item->current || $item->current_item_ancestor || in_array("current_page_parent", $item->classes, true) || in_array("current-post-ancestor", $item->classes, true)) ? 'active' : '';
66 |     $nav_link_class = ( $depth > 0 ) ? 'dropdown-item ' : 'nav-link ';
67 |     $attributes .= ( $args->walker->has_children ) ? ' class="'. $nav_link_class . $active_class . ' dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"' : ' class="'. $nav_link_class . $active_class . '"';
68 | 
69 |     $item_output = $args->before;
70 |     $item_output .= '<a' . $attributes . '>';
71 |     $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
72 |     $item_output .= '</a>';
73 |     $item_output .= $args->after;
74 | 
75 |     $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
76 |   }
77 | }
78 | // register a new menu
79 | register_nav_menu('main-menu', 'Main menu');
80 | 


--------------------------------------------------------------------------------