AppShell

Open in Playground

Header on top, sidebar on the left, scrolling main area. Below the md breakpoint the sidebar moves into a drawer behind a menu button. sidebar can be a function (close) => node to close the drawer on selection. The shell fills the viewport height; size it with className when embedding.

sidebarCollapsedBelow="lg" shows the sidebar as an icon rail between md and lg: use the function form, (close, { inDrawer, collapsed }), and pass collapsed to Sidebar. menuButtonVariant and menuButtonProps customise the mobile menu button. Put an AppBar with embedded in header to avoid a double frame.

Minion HQ

Showing: home

Showing: home

Props

  • sidebarCollapsedBelow'lg'

    Show the inline sidebar as an icon rail between md and this breakpoint; a sidebar function receives collapsed.

  • sidebarFullHeightboolean
    Default: false

    The sidebar runs the full height with the header only over the content column.

  • menuButtonVariantButtonVariant
    Default: secondary

    Variant of the mobile menu button.

  • menuButtonPropsButtonProps

    Extra props for the mobile menu button (className, aria-label, ...).

  • headerReactNode

    Header content.

  • sidebarReactNode | (close, { inDrawer, collapsed }) => ReactNode

    Sidebar; a function receives close for the mobile drawer, and whether it is in the drawer or the icon rail.

  • sidebarTitlestring
    Default: 'Menu'

    Title of the mobile drawer.

  • childrenReactNode

    Main content.

  • classNamestring
    Default: ''

    Extra classes for the root element.