Dashboard Layout
The dashboard layout component provides a customizable out-of-the-box layout for a typical dashboard page.
The DashboardLayout
component is a quick, easy way to provide a standard full-screen layout with a header and sidebar to any dashboard page, as well as ready-to-use and easy to customize navigation and branding.
Many features of this component are configurable through the AppProvider component that must wrap it to provide the necessary context.
Demo
A DashboardLayout
brings in a header and sidebar with navigation, as well as a scrollable area for page content.
If application themes are defined for both light and dark mode, a theme switcher in the header allows for easy switching between the two modes.
Branding
Some elements of the DashboardLayout
can be configured to match your personalized brand.
This can be done via the branding
prop in the AppProvider, which allows for setting a custom logo
image or title
text in the page header.
Navigation
The navigation
prop in the AppProvider allows for setting any type of navigation structure in the DashboardLayout
sidebar by including different navigation elements as building blocks in any order.
The flexibility in composing and ordering these different elements allows for a great variety of navigation structures to fit your use case.
Navigation Links
Navigation links can be placed in the sidebar as items with the format:
{ segment: 'home', title: 'Home', icon: <DescriptionIcon /> }
Navigation Headings
Navigation headings can be placed in the sidebar as items with the format:
{ kind: 'header', title: 'Animals' }
Navigation Dividers
Dividers can can be placed between items in the sidebar as items with the format:
{
kind: 'divider';
}
Nested Navigation
Nested navigation structures can be placed in the sidebar as items with the format:
{ title: 'Movies', icon: <FolderIcon />, children: [ ... ] }
Navigation Actions
Navigation links have an optional action
prop to render any content on the right-side of the respective list item, such as badges with numbers, or buttons to toggle a popover menu.
Navigation Pattern Matching
Navigation links have an optional pattern
prop to define a pattern to be matched for the item to be marked as selected.
This feature is built on top of the path-to-regexp library. Some examples:
- Constant path:
orders
- Dynamic segment:
orders/:segment
- Optional segment:
orders{/:segment}?
- One or more segments:
orders{/:segment}+
- Zero or more segments:
orders{/:segment}*
Disabling collapsible sidebar
The layout sidebar is collapsible to a mini-drawer (with icons only) in desktop and tablet viewports. This behavior can be disabled with the disableCollapsibleSidebar
prop.
Account
The DashboardLayout
comes integrated with the <Account />
component. It renders as an account management menu when a user is signed in – a session
object is present – and a button when not.
Customization
Some areas of the layout can be replaced with custom components by using the slots
and slotProps
props.
For example, this allows you to add new items to the toolbar in the header, such as a search bar or a button.
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.