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 -->
    <a class="menu-link" routerLink="/my-page" routerLinkActive="active">
            class="svg-icon menu-icon"
      <span class="menu-text">My Page</span>
<!-- 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