I want to create a simple dashboard app using Mui. In order to do so I followed the examples from their site: link.

However, I would like to add below the navigation buttons my custom widgets. For example, my app has a table with numbers and I would like to show below the button a text saying: sum = {value}.

I cant figure how to add something to that sidebar. The closest thing I saw is the footer in slots but it is at the bottom of the sidebar instead of below the buttons.

That is my goal:

Thank you

I want to create a simple dashboard app using Mui. In order to do so I followed the examples from their site: link.

However, I would like to add below the navigation buttons my custom widgets. For example, my app has a table with numbers and I would like to show below the button a text saying: sum = {value}.

I cant figure how to add something to that sidebar. The closest thing I saw is the footer in slots but it is at the bottom of the sidebar instead of below the buttons.

That is my goal:

Thank you

• reactjs
• material-ui
• dashboard

1 Answer 1

You were on the right track. The thing you were trying to do is totally achievable by using slots, in particular, sidebarFooter slot of the DashboardLayout.

In order for custom controls to emerge below the navigation, you can override sidebar styling. See how to customize section of the docs describing different ways how you can customize styling in MUI. For one-timer it might be done via cx prop. To override custom buttons styling you should override styles of inner MuiBox-root and MuiList-root (see Overriding nested component styles section of docs).

export default function Layout() {
  return (
    <DashboardLayout
      slots={{
        sidebarFooter: CustomSidebarButtons,
      }}
      sx={{
        "& .MuiBox-root": {
          justifyContent: "initial",
        },
        "& .MuiList-root": {
          marginBottom: "10px",
        },
      }}
      disableCollapsibleSidebar
    >
      <PageContainer>
        <Outlet />
      </PageContainer>
    </DashboardLayout>
  );
}

I have created a codesandbox working demo for you.