Make it easier to dynamically generate navigation

[Dan503]

routeTree is an auto generated variable that holds all of your site navigation paths in it.

So it would make sense to be able to use that variable to loop over those paths to generate website navigation menus.

There are multiple problems making this a more painful task than it needs to be.

1. routeTree.children types are incorrect (Incorrect type on routeTree.children #4766)
2. routeTree.children doesn't have a nested style structure of children having children, all of the paths are at the top level attached to the route, so this makes managing multi-level navigation more difficult.
3. It currently doesn't appear to be possible to define a navigation label using the createFileRoute function. This means that we have to manually create an object matching up paths to the nav label.
4. There doesn't appear to be an easy way to manage the order that the children nav items appear in.

This was my attempt at building a nav using routeTree.children:
https://stackblitz.com/edit/github-ytjdgxla?file=src%2Fcomponents%2FNav.tsx

I think the least disruptive fix would be to create a useNavigation() hook or provide a routeTree.navigation property for getting the navigation in a nested format. Properties also need to be added to the createFileRoute function that give us the ability to define navLabel and navOrder.

[Dan503]

Ok I realize now why TanStack doesn't make looping over nav items the recmmended approach.

For a basic nav of links then yes looping over a list is fine

If you need to pass parameters or search query items into those links then you loose the type safety that stand alone <Link> elements provide.

I still think there should be an in built easier way to loop over my routes to generate navigation. 80-90% of navigation menus are just basic routes with no params or search query parts attached.