Topbar navigation and shopping cart slot

[rkristelijn]

Summary

We would like to have a top navigation instead of a sidebar in DashBoardLayout. Currently, there is no dedicated slot for this, neither in DashBoardLayout nor in AppProvider.

Additionally, we would like to add a shopping cart icon next to the existing slot on the top right. How can we extend the layout to support more slots? Would it be preferable for us to submit a merge request?

Examples

Motivation

Motivation
1. Shopping cart placement – A shopping cart icon on the top right is a common design pattern for webshops.
2. Top navigation – Many webshops use a horizontal top menu. While the “hide navigation” option exists, it would be useful to toggle a top navigation instead of just hiding the sidebar.

Search keywords: topbar navigation, top menu, custom slots, shopping cart

[apedroferreira]

Hi, we have an issue for allowing navigation with tabs instead of sidebar in #4544.
But there's no timeline for when it might actually be prioritized and worked on...

As for the shopping cart item, it's maybe not the most elegant way and we could create an extra slot for actions on the right side, but you should be able to use something like:

import { Account } from '@toolpad/core/Account';

//...
slots={{ toolbarAccount: () => <><Account />{ /* your shopping cart button */ }</> }}
// ...

in the DashboardLayout component props.