Toolpad Core - Tutorial

Learn how to use Toolpad Core through an illustrative example dashboard.

Bootstrapping

1. To choose a project name and create a basic project for this tutorial, run:

2. To start the basic project on http://localhost:3000, run:

3. The following splash screen appears:

4. The app has one page already created, which can be viewed by clicking on the "Go to page" button. The following page should appear:

Create a new page

1. To add a new page and make it appear in the sidebar navigation, create a new folder within the (dashboard) directory titled page-2 and add the following content to page.tsx inside it:

import Typography from '@mui/material/Typography';

export default function Home() {
  return (
    <Typography variant="h6" color="grey.800">
      This is page 2!
    </Typography>
  );
}

2. Add the newly created page to the sidebar navigation by adding the following code to the navigation items array in app/layout.tsx:

// Add the following import:
import TimelineIcon from '@mui/icons-material/TimelineIcon';

// ...

const NAVIGATION: Navigation = [
  {
    kind: 'header',
    title: 'Main items',
  },
  {
    segment: 'page',
    title: 'Page',
    icon: <DashboardIcon />,
  },
  // Add the following new item:
  {
    segment: 'page-2',
    title: 'Page 2',
    icon: <TimelineIcon />,
  },
];

The newly created page can now be navigated to from the sidebar, like the following: