How do you create a dynamic menu?

In Au v1, there was an easy way to create dynamic menus:

<li repeat.for="nav of router.navigation" class="menu__group ${nav.isActive ? 'active' : ''}">

                    <a href.bind="nav.href" class="menu__link r-link text-underlined">${nav.title}</a>

                </li>

But this no longer works in Au v2…

The routes are defined in say “MyApp” in the docs… So I put that into the default dev-app main.ts

However, there’s no examples in how you would access this from the HTML or from sub-components.

I defined a main-page.html / main-page.ts, which doesn’t have the Routes, but MyApp does implement IRouteViewModel and it works fine for dynamic routes… But I’m trying to build “” navigation dynamically but it’s not clear the proper way to access it.

The docs don’t say how to access this router.navigation or routes.navigation, or if it was maybe permanently removed anyway since au1 (probably was removed but still, I was wondering if it exists, I don’t see many HTML examples in the docs).

I was wondering if we should just write our routes/navigation with our own custom object, which I can do so, but just wondering if there was a way to inject it from MyApp’s Routes static.

I can always just write it in HTML directly without any TypeScript, I was just wondering if there was a TypeScript “proper way” with the IRouteViewModel.