Support multiple levels in top navbar
Closed this issue · 7 comments
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.
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
.
@SPWwj Are you suggesting a complete change to the current NavBar component/syntax?
@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>
@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 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
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>
Hi @damithc, can this already be achieved with the multi level dropdown?
Ah, nice! Didn't realize this :-p
Thanks @yucheng11122017