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 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