Support multiple levels in top navbar

[damithc]

See https://markbind.org/userGuide/components/navigation.html#navbars

It would be good if we can provide support for second level sub-menu items in the top navigation bar dropdowns.

[SPWwj]

We can just reuse the list to achieve the feature:

  * btn 1 {link class="dropdown-item"  }
  * btn 2
    * btn 2.1 {class="dropdown-item" href="#navbars" }

Everything remains the same except for the extra link attribute to remove the default list padding, similar to icon.

[damithc]

@SPWwj Are you suggesting a complete change to the current NavBar component/syntax?

[SPWwj]

@SPWwj Are you suggesting a complete change to the current NavBar component/syntax?

No, it is more like an extension to the list:

<navbar type="primary">
  <!-- Brand as slot -->
  <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
  <li><a href="/userGuide/components/navigation.html#navbars" class="nav-link">Highlighted Link</a></li>
  <!-- You can use dropdown component -->
  <dropdown header="Dropdown" class="nav-link">

  * [link](#navbars) {link class="dropdown-item"  }
  * link 2
    * [link 2.1](#navbars) {link class="dropdown-item"  }
  * link 3
  * link 4
  </dropdown>
  <!-- For right positioning use slot -->
  <li slot="right">
    <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
  </li>
</navbar>

current output:

[damithc]

@SPWwj Oh you mean it can be done using the current syntax already?
I need the second level to be revealed on demand. Otherwise the following will become a dropdown with nearly 80 items, if I were to add five second level items for each of the weeks.

[SPWwj]

@SPWwj Oh you mean it can be done using the current syntax already? I need the second level to be revealed on demand. Otherwise the following will become a dropdown with nearly 80 items, if I were to add five second level items for each of the weeks.

We still need some CSS manipulation to hide and show the block.

Hover.Over.Element.and.7.more.pages.-.Personal.-.Microsoft.Edge.2023-07-27.14-05-58.mp4

[yucheng11122017]

Hi @damithc, can this already be achieved with the multi level dropdown?

Example:

    <navbar type="primary">
      <!-- Brand as slot -->
      <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
      <li><a href="/userGuide/components/navigation.html#navbars" class="nav-link">Highlighted Link</a></li>
      <!-- You can use dropdown component -->
      <dropdown header="Dropdown" class="nav-link">
        <li><a href="#navbars" class="dropdown-item">Option</a></li>
        <dropdown header="*Submenu*">
          <li><a href="#dropdown" class="dropdown-item">Item</a></li>
          <li><a href="#dropdown" class="dropdown-item">Another item</a></li>
        </dropdown>
      </dropdown>
      <!-- For right positioning use slot -->
      <li slot="right">
        <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
      </li>
    </navbar>

Produces

[damithc]

Hi @damithc, can this already be achieved with the multi level dropdown?

Ah, nice! Didn't realize this :-p
Thanks @yucheng11122017