# How to simplify sub navigation

**URL:** <https://discourse.aurelia.io/t/how-to-simplify-sub-navigation/2483>\
**Category:** Help Requests\
**Created:** [April 24, 2019, 12:56pm UTC](https://discourse.aurelia.io/t/how-to-simplify-sub-navigation/2483 "2019-04-24T12:56:16Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![roddharris](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roddharris/32/1340_2.png) [@roddharris](https://discourse.aurelia.io/u/roddharris)\
**Post date:** [April 24, 2019, 12:56pm UTC](https://discourse.aurelia.io/t/how-to-simplify-sub-navigation/2483/1 "2019-04-24T12:56:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [April 25, 2019, 2:41am UTC](https://discourse.aurelia.io/t/how-to-simplify-sub-navigation/2483/2 "2019-04-25T02:41:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![allanlange](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/allanlange/32/1994_2.png) [@allanlange](https://discourse.aurelia.io/u/allanlange)\
**Post date:** [April 29, 2020, 9:13am UTC](https://discourse.aurelia.io/t/how-to-simplify-sub-navigation/2483/4 "2020-04-29T09:13:41Z")

</div>

@roddharris did you ever find a solution to this issue? It sounds a lot like the same issue I’ve run into.

If you have a solution, I would love it if you could share it with me.

---

<div class="post-metadata">

**Author:** ![roddharris](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roddharris/32/1340_2.png) [@roddharris](https://discourse.aurelia.io/u/roddharris)\
**Post date:** [April 29, 2020, 6:12pm UTC](https://discourse.aurelia.io/t/how-to-simplify-sub-navigation/2483/5 "2020-04-29T18:12:44Z")

</div>

Unfortunately, no. I never really took time to follow up on the suggestion by @khuongduybui . The “hack”, I suppose, is to define all routes at the app level and use additional settings on the routes to control what gets displayed where.

I wound up just going a different direction since there didn’t seem to be a clear solution.

---

<div class="post-metadata">

**Author:** ![jwx](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jwx/32/507_2.png) [@jwx](https://discourse.aurelia.io/u/jwx)\
**Post date:** [April 29, 2020, 6:27pm UTC](https://discourse.aurelia.io/t/how-to-simplify-sub-navigation/2483/6 "2020-04-29T18:27:33Z")

</div>

Unless I’m misunderstanding the use case, this should be fairly straight forward and not that hard to achieve with Aurelia 2.

---

<div class="post-metadata">

**Author:** ![allanlange](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/allanlange/32/1994_2.png) [@allanlange](https://discourse.aurelia.io/u/allanlange)\
**Post date:** [May 6, 2020, 8:02am UTC](https://discourse.aurelia.io/t/how-to-simplify-sub-navigation/2483/7 "2020-05-06T08:02:18Z")

</div>

Isn’t Aurelia 2 still in pre-alpha? If so, I wouldn’t want to build an application for customers with it.

What would your solution be, if it is the way you understand it and had to use Aurelia 1?

---

<div class="post-metadata">

**Author:** ![jwx](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jwx/32/507_2.png) [@jwx](https://discourse.aurelia.io/u/jwx)\
**Post date:** [May 12, 2020, 8:16am UTC](https://discourse.aurelia.io/t/how-to-simplify-sub-navigation/2483/8 "2020-05-12T08:16:22Z")

</div>

It is, but it might still be good enough to use depending on the requirements of the application. I would probably not use it for an application for a customer, but using it is not completely out of the question.

I’d probably not use the configured routes as base for nav(s). Instead I’d have a service that’s injected into the view models (or something similar) be responsible for deciding what the nav(s) should contain. `router.navigation` isn’t always the best tool for the task.