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 two pages already created in a dashboard layout, with routing, breadcrumbs and theming already set up:

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/Timeline'; // ... const NAVIGATION: Navigation = [ // 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: