logo 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 a custom Page

Run this Angular CLI command for generate new component:

cd .\src\app\pages\
ng g c my-page

2. Register new component in the theme routing

Register new component in the /src/app/pages/pages-routing.module.ts file:

// Other imports
import { MyPageComponent } from './my-page/my-page.component';
{
    path: '',
    component: LayoutComponent,
    children: [
        {
          path: 'my-page', // <= Page URL
          component: MyPageComponent // <= Page component registration
        },
        {
        path: 'dashboard',
        loadChildren: () =>
          import('./dashboard/dashboard.module').then((m) => m.DashboardModule),
      },
      {
        path: 'builder',
        loadChildren: () =>
          import('./builder/builder.module').then((m) => m.BuilderModule),
      },
// Other code

3.1 Add page to the left static menu

Add page to the left menu in /src/app/pages/_layout/components/aside/aside.component.html file:

// Other code
<!-- begin::1 Level -->
  <li
        class="menu-item"
        aria-haspopup="true"
        routerLinkActive="menu-item-active"
        >
    <a class="menu-link" routerLink="/my-page" routerLinkActive="active">
      <span
            [inlineSVG]="'./assets/media/svg/icons/Design/Layers.svg'"
            cacheSVG="true"
            class="svg-icon menu-icon"
      ></span>
      <span class="menu-text">My Page</span>
    </a>
  </li>
<!-- end::1 Level -->
// Other code

3.2 Add page to the left dynamic menu

If you are using 'dynamic' aside menu, add page to the config /src/app/_metronic/configs/dynamic-aside-menu.config.ts file:

// Other code
  },
    {
      title: 'My Page',
      root: true,
      icon: 'flaticon2-expand',
      page: '/my-page',
      svg: './assets/media/svg/icons/Home/Library.svg'
    },
    {
      title: 'Layout Builder',
// Other code