DashboardLayout API
API reference docs for the React DashboardLayout component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
// or
import { DashboardLayout } from '@toolpad/core';Learn about the difference by reading this guide on minimizing bundle size.
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| children* | node | - | The content of the dashboard. |
| branding | { homeUrl?: string, logo?: node, title?: string } | null | Branding options for the dashboard. |
| defaultSidebarCollapsed | bool | false | Whether the sidebar should start collapsed in desktop size screens. |
| disableCollapsibleSidebar | bool | false | Whether the sidebar should not be collapsible to a mini variant in desktop and tablet viewports. |
| hideNavigation | bool | false | Whether the navigation bar and menu icon should be hidden |
| navigation | Array<{ action?: node, children?: Array<object | { kind: 'header', title: string } | { kind: 'divider' }>, icon?: node, kind?: 'page', pattern?: string, segment?: string, title?: string } | { kind: 'header', title: string } | { kind: 'divider' }> | [] | Navigation definition for the dashboard. |
| sidebarExpandedWidth | number | string | 320 | Width of the sidebar when expanded. |
| slotProps | { appTitle?: { branding?: { homeUrl?: string, logo?: node, title?: string } }, sidebarFooter?: { mini: bool }, toolbarAccount?: { localeText?: { iconButtonAriaLabel?: string, signInLabel?: string, signOutLabel?: string }, slotProps?: { popover?: object, popoverContent?: object, preview?: object, signInButton?: object, signOutButton?: object }, slots?: { popover?: elementType, popoverContent?: elementType, preview?: elementType, signInButton?: elementType, signOutButton?: elementType } }, toolbarActions?: object } | {} | The props used for each slot inside. |
| slots | { appTitle?: elementType, sidebarFooter?: elementType, toolbarAccount?: elementType, toolbarActions?: elementType } | {} | The components used for each slot inside. See Slots API below for more details. |
| sx | Array<func | object | bool> | func | object | - | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. |
| Slot name | Class name | Default component | Description |
|---|---|---|---|
| appTitle | Link | The component used for the app title section in the layout header. | |
| toolbarActions | ToolbarActions | The toolbar actions component used in the layout header. | |
| toolbarAccount | Account | The toolbar account component used in the layout header. | |
| sidebarFooter | null | Optional footer component used in the layout sidebar. |
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.