Menu Structure Documentation - Apex responsive bootstrap 4 admin template

Description

A modern responsive gradient menu.

Menu metadata

Metadata for Vertical and Horizontal menu would look like this


    export interface RouteInfo {
        path: string;
        title: string;
        icon: string;
        class: string;
        badge: string;
        badgeClass: string;
        isExternalLink: boolean;
        submenu : RouteInfo[];
    }

Menu Params:

Param	Description
path	the route to put in `routerLink`
title	The name shown in the navigation menu
icon	the material icon to be used
class	Class will be ‘’ if it is a child menu and also if it does not have any child menu else value will be `has-sub`
badge	Text that you want to display on badge.value can be ‘’ as well in case you don't want to display badge.
badgeClass	Class will be either ‘’ if there is no badge or you can provide css class for badge.
isExternalLink	If you want to navigate to external link value will be `true` else it will be `false`
submenu	Value will be [] if there is no sub menu for that menu or you can provide submenu item, if any.

Menu config

For adding new menu item please change sidebar-routes.config.ts. Page would look like this


export const ROUTES: RouteInfo[] = [
    {
        path: '', title: 'Dashboard', icon: 'ft-home', class: 'has-sub', badge: '2', badgeClass: 'badge badge-pill badge-danger float-right mr-1 mt-1', isExternalLink: false, submenu: [ ]
    }
];

To create a dropdown menu with sub-items.


export const ROUTES: RouteInfo[] = [
    {
        path: '', title: 'Dashboard', icon: 'ft-home', class: 'has-sub', badge: '2', badgeClass: 'badge badge-pill badge-danger float-right mr-1 mt-1', isExternalLink: false, submenu: [
            { path: '/dashboard/dashboard1', title: 'Dashboard1', icon: '', class: '', badge: '', badgeClass: '', isExternalLink: false, submenu: [] },
            { path: '/dashboard/dashboard2', title: 'Dashboard2', icon: '', class: '', badge: '', badgeClass: '', isExternalLink: false, submenu: [] },
        ]
    }
];

Menu Levels

Currently it supports 3 level menu.


export const ROUTES: RouteInfo[] = [
    {
        path: '#', title: 'Menu Levels', icon: 'ft-align-left', class: 'has-sub', badge: '1', badgeClass: 'badge badge-pill badge-danger float-right mr-1 mt-1', isExternalLink: false,
        submenu: [
            { path: '#', title: 'Second Level', icon: '', class: 'second-level', badge: '', badgeClass: '', isExternalLink: false, submenu: [] },
            {
                path: '#', title: 'Second Level Child', icon: '', class: 'has-sub', badge: '', badgeClass: '', isExternalLink: false,
                submenu: [
                    { path: '#', title: 'Third Level 1.1', icon: '', class: 'third-level', badge: '', badgeClass: '', isExternalLink: false, submenu: [] },
                    { path: '#', title: 'Third Level 1.2', icon: '', class: 'third-level', badge: '', badgeClass: '', isExternalLink: false, submenu: [] },
                ]
            },
        ]
    },
];

Refer following link for usage:

Type	URL
Template Page	https://demos.pixinvent.com/apex-angular-admin-template/demo-1