How to simplify sub navigation

#1

I have a project that has child navigation three or four levels deep – i.e. VMs with child routers that call other VMs with child routers, etc.

Typically, one defines a view like this:

parent.html

<template>
    <nav>
          <a repeat.for="route of router.navigation" ...>${route.title}</a>
    </nav>

    <router-view></router-view>
</template>

However, since the child route is displayed in the router-view, the <nav> does not disappear once a child route is selected. In my case, this is fine for the parent navigation, but over time, as the user digs deeper into the children, the menus start to clutter the screen and make things confusing.

What I really want is something like this.

  1. Parent displays navigation to Child A and Child B.
  2. When Child A is clicked, Parent nav remains visible and Child A view is displayed showing Child A Nav that includes two routes Child A-1 and Child A-2.
  3. When Child A-1 is clicked – the entire Child A view is replaced (including the nav links for Child A-1 and Child A-2) and Child A-1 view is displayed (along with a breadcrumb that enables the user to get back to Child A view. (IOW, Child A Nav is no longer visible)

I hope that makes sense – I’m just having trouble figuring out where to put additional nav bars without making things too confusing for the user.

1 Like
#2

I don’t have time to cook up a full solution for you, but the routers do emit signals when they switch route. Maybe you can listen to these and show/hide your navs as appropriate.

1 Like
#3

I’m currently working on an example, Really messy at the moment. But I’ll fix it up later.

Demo - Github

2 Likes