[toolpad-core] Add support for external links in dashboard navigation

[l-astro]

Summary

It would be great to include support for external links in the navigation component; perhaps add a new NavigationExternal type to be added to NavigationItem?

Examples

No response

Motivation

We have several services that are as yet outside of the mui framework but the user needs visibility of them in the dashboard nav. We would like these to be nested under a single item e.g., ExternalServices > ExternalService1, ExternalService2... Currently the breadcrumbs gets muddled if these external href are child items, as the NAVIGATION expects a segment property and concatenates this string to the href.

Search keywords: navigation, routing, external link

[apedroferreira]

Sounds like a useful feature!
We could add something like a path or href property to navigation page items, where any path supported by a typical href attribute could be used as a string. This property would take priority over segments.

[Janpot]

Or alternatively, a renderItem prop to open up more options of customization, analog to DataGrid renderCell.

[SamuelLeapifai]

I'd like to vote for the render props approach. Right now we can use only 3 kinds of navigation items: header, divider and a regular item. Would be great to allow for more options.

In our case, we'd like to display loader/spinner and 2 versions of headers (larger and smaller header). Currently there isn't even an option to provide classname to do css magic. Custom render prop would allow for many more features.

One more prop that would be useful is active: boolean | () => boolean. For custom routes that don't leverage segments to define if the menu item is active or not, we'd like to provide our own logic. This could perhaps also be solved with the render prop above.

[apedroferreira]

I'd like to vote for the render props approach. Right now we can use only 3 kinds of navigation items: header, divider and a regular item. Would be great to allow for more options.

In our case, we'd like to display loader/spinner and 2 versions of headers (larger and smaller header). Currently there isn't even an option to provide classname to do css magic. Custom render prop would allow for many more features.

One more prop that would be useful is active: boolean | () => boolean. For custom routes that don't leverage segments to define if the menu item is active or not, we'd like to provide our own logic. This could perhaps also be solved with the render prop above.

Got it, makes sense, we can go with just a renderItem for now.
About the active prop, maybe renderItem would cover that use case for now? But feel free to let us know more specifically what you'd try to do with it and we can consider it if it makes sense.