Deeper Nested Menus

Like Boot­strap, BootScore only knows menus with a depth of 2. Boot­strap because it wants to in prin­ci­ple. BootScore because it fol­lows its base as strict­ly as pos­si­ble. Lev­el 0 entries are list­ed hor­i­zon­tal­ly in the head­er, and the cor­re­spond­ing lev­el 1 entries are list­ed ver­ti­cal­ly below. Thus, the top-lev­el entries group the entries below them. And menus behave the same way on smart­phones and desktops.We want to talk a about deep­er nest­ed menus, here:

That means, that the top menu items are clicked when the cor­re­spond­ing sub­group is to be dis­played. And they are also clicked to col­lapse the group again. With­out any hover effect, nei­ther on smart­phones nor on larg­er devices. Here we show a solu­tion for cre­at­ing mul­ti­di­men­sion­al menus (indi­rect­ly) offered by BootScore itself:

Solution

• Inside your theme direc­to­ry, cre­ate an include direc­to­ry named inc.
• Down­load navbar.php from github.com/imanishpushkar/bs5-navwalker into that inc- direc­to­ry.
• Rename that file to class-bootstrap-5-navwalker.php
• Add the fol­low­ing code to the functions.php file in your child theme fold­er:

// Register new 3 level depth nav-walker
function register_navwalker() {
  require_once('inc/class-bootstrap-5-navwalker.php');
  // Register Menus
  register_nav_menu('main-menu', 'Main menu');
  register_nav_menu('footer-menu', 'Footer menu');
}

• Copy — if not already done — the file header.php from the theme bootscore-main into your child theme.
• Inside header.php, look for wp_nav_menu(array( …
• In that array, increase 'depth' => 2, up to the max­i­mum depth your menu has.

Background

Let’s con­sid­er the aspects back­ward this time:

• The code from the GitHub repos­i­to­ry bs5-navwalk­er by Man­isch Pushkar is explic­it­ly MIT licensed. So you can incor­po­rate it direct­ly into your child-theme with­out under­min­ing its open source nature.
• The solu­tion itself has been offered by Bas­t­ian Kre­it­er¹ in a dis­cus­sion² as a way out for bootScore pre­fer­ring to fol­low the pecu­liar­i­ties of Boot­strap this time.
• The fact that Boot­strap should offer mul­ti­di­men­sion­al (= nest­ed) menus is dis­cussed again and again.³ And reject­ed, for dif­fer­ent rea­sons: Mark Otto⁴ had already — as he said in 2017 — reject­ed this wish three years ago. And that had pre­vent­ed no one from writ­ing good sites.⁵ Besides, there would be only dif­fi­cult tech­ni­cal solu­tions, where effort and prof­it would not be in rea­son­able pro­por­tion.⁶

Thus, we now have a solu­tion at hand for her desire for deep­er embed­ded sub­menus. Nev­er­the­less, we should focus on our­selves. Because Mark’s objec­tions in terms of usabil­i­ty and design have to be con­sid­ered too.

And final­ly, still this:

1. The sub­menus are super­im­posed here by a click and must — accord­ing to the boot­Strap log­ic — be active­ly clicked away again. So the way described here does not (yet) cov­er a solu­tion for a miss­ing hover effect on desk­top sys­tems.⁷.
2. The fact that sub­menus must always be opened and closed again by click­ing is con­trary to the com­mon prac­tice of assign­ing a page direct­ly to the group­ing menu item. The menu design must take this into con­sid­er­a­tion.⁸.

---

And how does this …

… sup­port our migra­tion to bootScore? Well, once a web design­er has tak­en the first gen­er­al steps and has checked SEO, she will soon turn to a real­ly thick board, her prop­er­ly clus­tered and pre­sent­ed menu with­out get­ting too fan­cy. Even­tu­al­ly, she is going to spruce and speed up the dis­play of fixed and scal­able images. This post talks about a part of this way.

---

1. = crftwrk, the spir­i­tus rec­tor of bootScore [↩]
2. cf. dis­cus­sion #347 [↩]
3. pars pro toto: cf. issue 27659 [↩]
4. = mdo, the spir­i­tus rec­tor of Boot­strap [↩]
5. cf. 21026#issuecomment-313980746 [↩]
6. cf. 27659#issuecomment-441783535 [↩]
7. More about hov­er menus lat­er [↩]
8. More about group­ing sub menus lat­er [↩]