This repository was archived by the owner on Sep 23, 2026. It is now read-only.
Repository navigation
This repository was archived by the owner on Sep 23, 2026. It is now read-only.
[toolpad-core] Add support for external links in dashboard navigation #4413
Description
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
Reacted by Bharat Kashyap, Prakhar Gupta, Pedro Ferreira, SamuelLeapifai, Tibor Otott-Kovacs, Oscar Bolmsten, Willy_Wonka, Guillaume Roux, Brian Poole, Elizabeth and 2 more
Metadata
Metadata
Assignees
Labels
Projects
- Status
Activity
[-]Add support for external links in dashboard navigation[/-][+][toolpad-core] Add support for external links in dashboard navigation[/+]apedroferreira commentedon Nov 18, 2024
Sounds like a useful feature!
We could add something like a
pathorhrefproperty to navigation page items, where any path supported by a typicalhrefattribute could be used as a string. This property would take priority oversegments.Janpot commentedon Nov 18, 2024
Or alternatively, a
renderItemprop to open up more options of customization, analog to DataGridrenderCell.SamuelLeapifai commentedon Nov 27, 2024
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 commentedon Nov 27, 2024
Got it, makes sense, we can go with just a
renderItemfor now.About the
activeprop, mayberenderItemwould 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.oscar-b commentedon Jan 15, 2025
renderItemsounds really useful, and should make it possible to use something like https://github.com/vercel/react-transition-progress to display a global loading bar when navigating.Maybe such an indicator should actually be part of the base dashboard in
toolpad-core?bpoole5591 commentedon Feb 13, 2025
I've been building out an entire application with Toolpad and have run into this issue. I now have a requirement to add links to the Navigation pane that have external links. It's possible to create a "redirect" component to redirect the user to a passed in link but that's an unnecessarily clunky UI experience. Please add this functionality asap @apedroferreira. Thank you!
github-actions commentedon Apr 21, 2025
This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.