Jump to content

Bootstrap 5 menu help please.


Greg Lumley
 Share

Recommended Posts

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>




 

Link to comment
Share on other sites

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) ? 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...