Bootstrap 5 menu help please.

[Greg Lumley]

Hi, I've been struggling to get menus right with bootstrap 5 and menu builder. My coding isn't good enough to pull it off. I never got my head around recursive functions very well. I find myself hacking and wasting huge amounts of time more than anything else with fragmented success. 

I want to redo my entire website using bootstrap 5, but not cracking the menu is really holding me back. I really really don't want to go back to Wordpress because I love PW.

If you are using B5, would you mind sharing advice or code on how you're doing your menu? 

This is what I'm trying to emulate: 
https://getbootstrap.com/docs/5.2/components/navbar/ 

I'm using Menu-Builder, and this is the code I have, but as you'll see, it's far from elegant. 

I would be so grateful for any help here. Even if it doesn't use menu-builder. 

Thank you. 

 

<?php namespace ProcessWire;



function buildMenuFromObject($parent = 0, $menu="", $first = 0) {
	if(!is_object($menu)) return;

	$out = '';
	$has_child = false;

	foreach ($menu as $m) {
		$newtab = $m->newtab ? " target='_blank'" : '';
		// if this menu item is a parent; create the sub-items/child-menu-items
		if ($m->parentID == $parent) {// if this menu item is a parent; create the inner-items/child-menu-items
				// if this is the first child
				if ($has_child === false) {
						$has_child = true;// This is a parent
						if ($first == 0){
							$out .= "\n<ul class='navbar-nav me-auto mb-2 mb-lg-0'>";
							$first = 1;
                            $liClass = "nav-link";
						}
						else {
							$out .=
								"\n\t" .
									"<ul class='dropdown-menu'>";
                                    $liClass = "dropdown-item";
						}
				}
				// active/current menu item
				$class = $m->isParent ?  ' class="nav-item dropdown"' : ' class="nav-item"';
				$properties = ($class == ' class="nav-item dropdown"') ? ' role="button" data-bs-toggle="dropdown" aria-expanded="false" ' : '';
				$navtype = ($class == ' class="nav-item dropdown"') ? ' dropdown-toggle ' : '';

				if($liClass == "dropdown-item"){$class='';};


				// a menu item
				$out .= "\n\t<li$class $properties><a class='{$liClass} {$navtype}' href='{$m->url}'  '{$newtab}'>{$m->title}</a>";

				// call function again to generate nested list for sub-menu items belonging to this menu item.
				$out .= buildMenuFromObject($m->id, $menu, $first);
				if ($m->isParent) $out .= "\n";// close li
				$out .= "</li>";

		}// end if parent

	}// end foreach

	if ($has_child === true) $out .= "\n\t</ul>";

	return $out;

}


                           
	$mb = $modules->get('MarkupMenuBuilder');


	$menuItemsAsObject = $mb->getMenuItems('Left_menu', 2);

	$menu = buildMenuFromObject(0, $menuItemsAsObject);



?>

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">
          <img src="logo.png">
        </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 echo $menu?>
        </div>


    </div>
  </nav>

 

[bernhard]

RockFrontend could maybe make your life easier, if you want to install it. You could then use LATTE to get super clean menu markup, see here: https://github.com/baumrock/RockFrontend#menus

It comes with a helper method "isActive()" to add classes to your active menu items (the page itself and all of its parents). The example shows uikit markup but it should be very similar in bootstrap...

Using LATTE's n:attributes feature (like n:if or n:class or n:foreach) you save you from all these ugly if/else/elseif (not yours are ugly, they are ugly in general in my opinion) ? 

[Greg Lumley]

Thanks Bernhard, let me give it a try. ?

[Greg Lumley]

@bernhard How do I get rid of this warning? Or install the less module if I'd like to use it? Where is it being generated from?

Thank you.

 

[zoeck]

Just install the less Module ? 

https://processwire.com/modules/less/

[bernhard]

Or just don't use the less files... You don't need to use less if you don't want to.

[Pixrael]

Also you can check this https://processwire.com/modules/process-wire-bootstrap4/ and look at the _func.php file, this was for BS4 but maybe you can adapt it easily to your BS version

[Greg Lumley]

@Pixrael thank you!