custom widget in mui AppProvider sidebar

Question

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

Lastik · Accepted Answer · 2025-02-06 08:09:08Z

0

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.

edited Feb 6 at 8:09

answered Feb 5 at 22:25

Lastik

9918 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben Feb 7 at 17:19

It helped me a lot, thanks, mate.

Collectives™ on Stack Overflow

custom widget in mui AppProvider sidebar

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related