Drawer Sidebar

Drawer sidebar will look for edge sidebar config and render based on them.

Usage example

import styled from 'styled-components'
import Layout, { Root, getDrawerSidebar } from '@mui-treasury/layout';

const DrawerSidebar = getDrawerSidebar(styled)

cosnt scheme = Layout()

scheme.configureEdgeSidebar((builder) => {
    .create("primarySidebar", { anchor: "left" })
    .registerPersistentConfig("md", {
      width: 256,
      collapsible: false,
      persistentBehavior: "fit",

const App = () => {
  return (
    <Root scheme={scheme}>
      <DrawerSidebar sidebarId="primarySidebar">
        sidebar content

You can render DrawerSidebar at any order below Root, no need to concern about anchor left or right.


  • sidebarId
    • type : string
    • required : yes
    • description : id that will match sidebar config
  • other props excluding anchor and variant is passed to Drawer


Because drawer sidebar use Drawer from material-ui, please read official doc

Related components