Complex menu in layout
-
Hi …
We have been working a little with quasar and the layout, and as I understand it the “navigation” part of the q-layout is really the main menu of the project, and q-layout know how to make change related to platform and screen width, besides maintaining state of the elements related to current route.
Now, we like to make menus that is a bit more complex (and dynamic, but the is just work). I bootstrap and other we have things like dropdown or menu components. What is the idea in Quasar ? need we nest q-tab or what is the philosophy for complex menu structure ?
/BL
-
A guess on my part, but you can (should?) use Vue-router with (sub)tabs.
As an example, you can see from the play app, how the tabbed navigation (tabs selection) is using
<router-view>, which uses router.js to route to the different pages (which aren’t there yet). This is how you’d do subnavigation under tabs, I would suppose.What I don’t understand is why the primary tabs don’t use vue-router. Or do they?
Is the inline route definitions to make the navigation easier to understand? Can they also be made dynamic?Scott
-
@s.molinari That makes sense, and in fact we are using the
vue-router, to be able to control the menu in both directions, but when it comes to sub menus (dropdownish), I am a little lost as to how to do that.I can see that you too end up with some questions, so maybe we just need to be on the same page as Razvan
-
I use 2 levels of tabs (main navigation, sub navigation). One controls the main
router-view, the other controls the nestedrouter-view.
Both lives in theNavigationslot, so they stay “overlay”. (your layout can have several elements with propslot="navigation")When the user reaches a page deep enough to display the sub-navigation tabs, I dont want 300 px of header+nav (especially on mobile), so I track the scroll Events.
User scrolls down -> hide sub nav
User scrolls up -> show sub navI define my sub-navs in
router.js(meta property), and my main layout is in charge for dynamically adding the right sub nav to the navigation slot, depending on the current route.But if you need a complex menu with dropdown and sub-menus, as far as I know there is no ready-to-use Quasar solution for this.
I guess Razvan focuses on components usable on both desktop and mobile, wich complex dropdowns are probably not
-
@Val - that sounds interesting. Is your project public? If yes, care to share a link?
Scott
-
Unfortunately it’s a private/corporate project but I’ll try to set up an basic example public repo
-
Hi all, will add an out of the box solution for tabs with dropdowns soon.
-
-
@rstoenescu Perfect, nice to know there is a plan for it, and that I did not miss anything in the docs
The problem is that for navigation I guess you need to modes, one for menu mode and one for toolbar layout.
-
See my reply @ https://github.com/quasarframework/quasar/issues/325 to see how I accomplished dropdown menu on tabs.
-
Really nice you found a solution, sometimes this is the most important part.
But we may need to see if we could find a more streamlined solution in the future
