Skip to content
+

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.

Press Enter to start editing

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.

Press Enter to start editing

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 can be placed in the sidebar as items with the format:

{ segment: 'home', title: 'Home', icon: <DescriptionIcon /> }
Press Enter to start editing

Navigation headings can be placed in the sidebar as items with the format:

{ kind: 'header', title: 'Animals' }
Press Enter to start editing

Dividers can can be placed between items in the sidebar as items with the format:

{
  kind: 'divider';
}
Press Enter to start editing

Nested Navigation

Nested navigation structures can be placed in the sidebar as items with the format:

{ title: 'Movies', icon: <FolderIcon />, children: [ ... ] }
Press Enter to start editing

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.

Press Enter to start editing

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}*
Press Enter to start editing

Disable 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.

Press Enter to start editing

Start with mini-drawer on desktop

The layout sidebar can default to a collapsed mini-drawer on desktop viewport sizes with the defaultSidebarCollapsed prop.

Press Enter to start editing

Hide navigation

The layout sidebar can be hidden if needed with the hideNavigation prop.

Press Enter to start editing

Full-size content

The layout content can take up the full available area with styles such as flex: 1 or height: 100%.

Press Enter to start editing

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.

Press Enter to start editing

Customization

Some areas of the layout can be replaced with custom components by using the slots and slotProps props. This allows you to add, for example:

  • new items to the toolbar in the header, such as a search bar or button;
  • footer content in the sidebar.
Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.