Page Container

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

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

Orders

Page content

<PageContainer>Page content</PageContainer>

<PageContainer>Page content</PageContainer>

Press Enter to start editing

Title and Breadcrumbs

The breacrumbs 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
  branding={{ title: 'ACME' }}
  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.

Orders

Actions

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

Weather

Period

Temperature

24°C

Precipitation

5%

Wind

18km/h

function PageToolbar() {
  return (
    <PageContainerToolbar>
      <Button startIcon={<FileDownloadIcon />} color="inherit">
        Export
      </Button>
      <DateRangePicker
        sx={{ width: 220 }}
        defaultValue={[dayjs(), dayjs().add(14, 'day')]}
        slots={{ field: SingleInputDateRangeField }}
        slotProps={{ field: { size: 'small' } as any }}
        label="Period"
      />
    </PageContainerToolbar>
  );
}

function PageToolbar() {
  return (
    <PageContainerToolbar>
      <Button startIcon={<FileDownloadIcon />} color="inherit">
        Export
      </Button>
      <DateRangePicker
        sx={{ width: 220 }}
        defaultValue={[dayjs(), dayjs().add(14, 'day')]}
        slots={{ field: SingleInputDateRangeField }}
        slotProps={{ field: { size: 'small' } as any }}
        label="Period"
      />
    </PageContainerToolbar>
  );
}

Press Enter to start editing

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.

API

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