logo The World’s #1 Bootstrap 4 HTML, Angular 10, 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*/}
    
Metronic: How to create page => Result