Home Metronic Hire Us Buy Now
The World’s #1 Bootstrap 4 & 5 HTML, Angular 11, React, VueJS & Laravel
Admin Dashboard Theme

### How to create a custom page

Here is the example on how to create your own page and add it to the left side menu and breadcrumbs.

1. Create page component `src/app/pages/MyPage.js`

       import React from "react";

       export function MyPage() {
           return <h1>Hello!</h1>
       }

2. Update `src/app/BasePage.js`

       import React from "react";
       import {Redirect, Route, Switch} from "react-router-dom";
       import {LayoutSplashScreen, ContentRoute} from "../_metronic/layout";
       import {BuilderPage} from "./pages/BuilderPage";
       import {DashboardPage} from "./pages/DashboardPage";
       import GoogleMaterialPage from "./google-material/GoogleMaterialPage";
       + import {MyPage} from "./pages/MyPage";

       export default function HomePage() {
           return (
               <Switch>
                   {
                       /* Redirect from root url to /dashboard. */
                       <Redirect exact={true} from="/" to="/dashboard" />
                   }

                   <ContentRoute path="/builder" component={Builder} />
                   <ContentRoute path="/dashboard" component={Dashboard} />
                   <Route path="/google-material" component={GoogleMaterialPage} />
                   +    <ContentRoute path="/my-page" component={MyPage} />
               </Switch>
           );
       }

3. Add menu in `src/_metronic/layout/components/aside/aside-menu/AsideMenuList.js`

       {/*begin::1 Level*/}
       <li
           className={`menu-item ${getMenuItemActive("/dashboard")}`}
           aria-haspopup="true"
       >
           <NavLink className="menu-link" to="/dashboard">
               <span className="svg-icon menu-icon">
                   <SVG src={toAbsoluteUrl("/media/svg/icons/Design/Layers.svg")}/>
               </span>
               <span className="menu-text">Dashboard&l/span>
           </NavLink>
       </li>
       {/*end::1 Level*/}

       {/*begin::1 Level*/}
       +<li
       +    className={`menu-item ${getMenuItemActive("/my-page")}`}
       +    aria-haspopup="true"
       +>
       +    <NavLink className="menu-link" to="/my-page">
       +        <span className="svg-icon menu-icon">
       +            <SVG src={toAbsoluteUrl("/media/svg/icons/Design/Layers.svg")}/>
       +        </span>
       +        <span className="menu-text">My Page</span>
       +    </NavLink>
       +</li>
       +{/*end::1 Level*/}