Page Container

A component that wraps page content and provides a title, breadcrumbs, and page actions.

PageContainer is the ideal wrapper for the content of your dashboard. It shows the current page title, and provides breadcrumbs to navigate back into the current hierarchy. It makes your page responsive through the use of the Material UI Container component under the hood.

Just like DashboardLayout, PageContainer uses the navigation structure that is defined in the AppProvider to build up its breadcrumbs and title.

Title and Breadcrumbs

The breadcrumbs are formed by matching the current pathname with the navigation structure defined in the AppProvider. The title of the matched segment is used as the page title. You can override the page title with the title property.

For example, under the following navigation structure:

<AppProvider
  navigation={[
    {
      segment: 'home',
      title: 'Home',
      children: [
        {
          segment: 'orders',
          title: 'Orders',
        },
      ],
    },
  ]}
>
  ...
</AppProvider>

The breadcrumbs contains ACME / Home / Orders when you visit the path /home/orders, and the page has a title of Orders.

Dynamic routes

When you use the PageContainer on a dynamic route, you'll likely want to set a title and breadcrumbs belonging to the specific path. You can achieve this with the title and breadcrumbs property of the PageContainer

You can use the useActivePage hook to retrieve the title and breadcrumbs of the active page. This way you can extend the existing values.

import { useActivePage } from '@toolpad/core/useActivePage';
import { Breadcrumb } from '@toolpad/core/PageContainer';

// Pass the id from your router of choice
function useDynamicBreadcrumbs(id: string): Breadcrumb[] {
  const activePage = useActivePage();
  invariant(activePage, 'No navigation match');

  const title = `Item ${id}`;
  const path = `${activePage.path}/${id}`;

  return [...activePage.breadcrumbs, { title, path }];
}

For example, under the Next.js app router you would be able to obtain breadcrumbs for a dynamic route as follows:

// ./src/app/example/[id]/page.tsx
'use client';

import { useParams } from 'next/navigation';
import { PageContainer } from '@toolpad/core/PageContainer';
import invariant from 'invariant';
import { useActivePage } from '@toolpad/core/useActivePage';

export default function Example() {
  const params = useParams<{ id: string }>();
  const activePage = useActivePage();
  invariant(activePage, 'No navigation match');

  const title = `Item ${params.id}`;
  const path = `${activePage.path}/${params.id}`;

  const breadcrumbs = [...activePage.breadcrumbs, { title, path }];

  return (
    <PageContainer title={title} breadcrumbs={breadcrumbs}>
      ...
    </PageContainer>
  );
}

Responsiveness

The Page Container component inherits the properties of the Material UI Container component. You can use its maxWidth and fixed properties to control the bounds of the page. Set maxWidth to false to disable the container altogether and have the content bleed right up to the edges of the page.

Standalone page header

The PageHeader component included in PageContainer can be imported and used by itself if you wish to do so, for more freedom of customization.

Actions

You can configure additional actions in the area that is reserved on the right. To do so provide a custom header slot to the PageContainer component, where you can provide a custom toolbar slot to a PageHeader. You can wrap the PageHeaderToolbar component to create a custom toolbar component, as shown here:

Full-size content

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

API

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

• <PageContainer />
• <PageHeader />
• <PageHeaderToolbar />