Add "key" property to Breadcrumb Item

Breadcrumbs work in conjunction with a container with multiple views currently if the Breadcrumb "label" matches the view "key" using
Screenshot 2023-05-16 at 9.21.15 AM

It would be nice if there was a "key" property in each breadcrumb that was used for the matching instead of the label. I believe this would also provide the ability to dynamically set the label of each breadcrumb.

For example, a container with 2 views "account_list" and "account_detail" could have breadcrumbs labels like Accounts -> AccountA where AccountA, the breadcrumb label, could change depending which company is selected.

Hi @matth Thanks for sharing this helpful feedback! I'm passing it along internally as well. I'll reach back out here if it's something we're able to ship :ship:

1 Like

Is there any update on the breadcrumb functionality? or any good tutorials /use cases?

They seem to be really un-intuitive to actually use where you can set them up dynamically.... but perhaps it's more a reflection on my skills level....... it would be nice to simply pull from the nav bar the current label or something - but there doesn't seem to be any way to tie these together dynamically, so the breadcrumbs can be a module and then dropped into my pages (apps)......

Hi @maillme,

The breadcrumb component is a bit more niche than the more commonly used navigation component. I typically recommend using a nav bar in a module using this tutorial.

There's a few ways to access the current app in the breadcrumb config. You could follow the same concept from the linked tutorial, to reference the {{retoolContext.appName}} as a module input, or if you're also using a nav component, you could use the selected app from the nav bar - something like this:

The nav bar is great for allowing users to jump between different Retool pages, but there might be an app that should only be accessed from a parent app, and the breadcrumb could come in handy.

In this example, I've set up the breadcrumb in a module, similarly to the linked tutorial example:

The breadcrumb is configured to link to App1 and App2, but when the user is in App1, the parent app, they'll only display App1 in the breadcrumb:

To get to App2, they'll have to click on a row in the table, which will trigger a Go to App event handler that opens App2 and passes the currentRow in as a url param.

On row click, App2 will open and the breadcrumb will update to show that they are currently in App2 and can click App1 in the breadcrumb to go back to the parent page.

If they had only clicked App2 in the navigation bar, instead of using the table's event handler, they wouldn't have had the right url params to display data in the app.

I imagine that the breadcrumb could use an upgrade with more functionality. What would be your ideal flow?

1 Like

Thanks Tess for the detailed solution.

I think I'd just like the breadcrumbs to be a little more intuitive however, I'm probably not the best person to give you proper guidance on what is best, there will be other users who have more experience and use-cases for it.

Also, I've had access to the multi-page alpha, which I think would be great to have options to link to breadcrumbs if possible.... in a more intuitive way. But, again - I may not be the best person to provide solid input on it - it just feels quite clunky to me, to use for something useful.....

thanks again.