Menu Structure
Menu Structure for TopBar
File: app/layout/shared/topbar
<header id="page-topbar">
<div class="navbar-header">
<div class="header-leftbar">
<!-- LOGO -->
<div class="navbar-brand-box">
<a routerLink="/" class="logo logo-dark">
<span class="logo-sm">
<img src="../assets/images/logo-sm-dark.png" alt="" height="26">
</span>
<span class="logo-lg">
<img src="../assets/images/logo-dark.png" alt="" height="30">
</span>
</a>
<a routerLink="/" class="logo logo-light">
<span class="logo-sm">
<img src="../assets/images/logo-sm-light.png" alt="" height="26">
</span>
<span class="logo-lg">
<img src="../assets/images/logo-light.png" alt="" height="30">
</span>
</a>
</div>
<button type="button" class="btn btn-sm font-size-32 menu-icon header-item" id="vertical-menu-btn" (click)="toggleMobileMenu($event)" (clickOutside)="hideSidebar()" [excludeBeforeClick]="true" [exclude]="'#vertical-menu-btn, .vertical-menu'">
<i class="mdi mdi-menu"></i>
</button>
<!-- App Search-->
<form class="app-search d-none d-lg-block">
<div class="position-relative">
<input type="text" class="form-control" placeholder="Search...">
<span class="mdi mdi-magnify"></span>
</div>
</form>
<button type="button" class="btn btn-sm ms-auto font-size-24 header-item d-sm-none" (click)="mobileToggle = !mobileToggle">
<i class="mdi mdi-dots-vertical"></i>
</button>
</div>
<div class="header-rightbar" [ngClass]="{'show': mobileToggle}">
<div ngbDropdown class="d-inline-block d-lg-none ms-2">
<button type="button" class="btn header-item noti-icon" id="page-header-search-dropdown"
ngbDropdownToggle aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-magnify"></i>
</button>
<div ngbDropdownMenu class="dropdown-menu-lg dropdown-menu-right p-0"
aria-labelledby="page-header-search-dropdown">
<form class="p-3">
<div class="form-group m-0">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search ..." aria-label="Recipient's username">
<div class="input-group-append">
<button class="btn btn-primary" type="submit"><i class="mdi mdi-magnify"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
<div ngbDropdown class="d-inline-block">
<button type="button" class="btn header-item" ngbDropdownToggle id="page-header-flag-dropdown"
aria-haspopup="true" aria-expanded="false">
<img [src]="selectedLanguage?.flag" alt="Header Language" height="14">
<span class="ms-2 d-none d-sm-inline-block align-middle">{{selectedLanguage?.shortCode}}</span>
</button>
<div class="dropdown-menu-right" ngbDropdownMenu id="countries">
<!-- item-->
<a href="javascript:void(0);" *ngFor="let item of languages; let i = index;" ngbDropdownItem class="notify-item" (click)="changeLanguage(i, item)">
<img [src]="item?.flag" alt="user-image" class="me-2" height="12"><span
class="align-middle">{{item?.country}}</span>
</a>
</div>
</div>
<div class="d-none d-lg-inline-block">
<button type="button" class="btn header-item noti-icon" (click)="requestFullscreen()">
<i class="mdi-24px" [ngClass]="['mdi', !isfullscreen ? 'mdi-fullscreen' : 'mdi-fullscreen-exit']"></i>
</button>
</div>
<div class="d-inline-block" ngbDropdown>
<button ngbDropdownToggle aria-haspopup="true" type="button" id="page-header-notification-dropdown"
aria-expanded="false" class="btn header-item noti-icon position-relative">
<i class="mdi mdi-bell"></i>
<span class="badge badge-danger badge-pill notify-icon-badge">3</span>
</button>
<div aria-labelledby="page-header-notification-dropdown" class="dropdown-menu-lg dropdown-menu-right p-0" ngbDropdownMenu>
<div class="notify-title p-3">
<h5 class="font-size-14 font-weight-600 mb-0">
<span>Notification</span>
<a class="text-primary float-end" href="javascript: void(0);">
<small>Clear All</small>
</a>
</h5>
</div>
<div class="notify-scroll">
<ngx-simplebar class="scroll-content">
...
</ngx-simplebar>
<div class="clearfix">
<a href="javascript: void(0);" class="text-primary text-center p-3 d-block">
<small>View All</small>
</a>
</div>
</div>
</div>
</div>
<div ngbDropdown class="d-inline-block">
<button type="button" class="btn header-item" id="page-header-user-dropdown" ngbDropdownToggle
aria-haspopup="true" aria-expanded="false">
<img class="rounded-circle header-profile-user" src="../assets/images/users/avatar-1.jpg" alt="Header Avatar">
<span class="d-none d-sm-inline-block ms-1">Smith</span>
<i class="mdi mdi-chevron-down d-none d-sm-inline-block"></i>
</button>
<div ngbDropdownMenu class="dropdown-menu-right">
<!-- item-->
</div>
</div>
<!--layouts change-->
<div class="d-inline-flex">
<button type="button" class="btn header-item notify-icon right-bar-toggle" (click)="toggleRightSidebar()">
<i class="mdi mdi-settings mdi-spin mdi-24px"></i>
</button>
</div>
</div>
</div>
</header>
Menu Structure for Vertical layout
File: app/layout/shared/menu
<div class="vertical-menu">
<ngx-simplebar class="h-100">
<div id="sidebar-menu">
<ul class="metismenu list-unstyled" id="side-menu" #sideMenu>
<ng-container *ngFor="let item of menuItems">
<!--Title-->
<li class="menu-title" *ngIf="item.isTitle">{{ item.label }}</li>
<!-- link -->
<li *ngIf="!item.isTitle">
<!-- link title with submenu -->
<a *ngIf="hasItems(item)" href="javascript:void(0);" class="has-arrow side-nav-link">
<div class="d-inline-block me-1" *ngIf="item.icon"><i [class]="item?.icon"></i></div>
<span> {{ item?.label }}</span>
</a>
<!-- link title -->
<a *ngIf="!hasItems(item)" [routerLink]="item?.link" class="side-nav-link">
<div class="d-inline-block me-1" *ngIf="item.icon"><i [class]="item?.icon"></i></div>
<span> {{ item?.label }}</span>
<span class="badge badge-{{item.badge.variant}} float-right"
*ngIf="item?.badge">{{item?.badge?.text}}</span>
</a>
<!-- subment level 1 -->
<ul *ngIf="hasItems(item)" class="sub-menu" aria-expanded="false">
<li *ngFor="let subitem of item?.subItems">
<a *ngIf="hasItems(subitem)" href="javascript:void(0);" class="side-nav-link">
<div class="d-inline-block me-1" *ngIf="subitem.icon"><i [class]="subitem?.icon"></i></div>
<span> {{ subitem?.label }}</span>
</a>
<a [routerLink]="subitem?.link" *ngIf="!hasItems(subitem)" class="side-nav-link">
<div class="d-inline-block me-1" *ngIf="subitem.icon"><i [class]="subitem?.icon"></i></div>
{{ subitem?.label }}
</a>
<ul *ngIf="hasItems(subitem)" class="sub-menu" aria-expanded="false">
<li *ngFor="let subSubitem of subitem?.subItems">
<a [routerLink]="subSubitem?.link" class="side-nav-link">
<div class="d-inline-block me-1" *ngIf="subSubitem.icon"><i [class]="subSubitem?.icon"></i></div>
<span> {{ subSubitem?.label }}</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ng-container>
</ul>
</div>
</ngx-simplebar>
</div>
Menu Structure for TopBar Horizontal
File: app/layout/shared/horizontal-topbar
<header id="page-topbar">
<div class="navbar-header">
<div class="container-fluid">
<div class="float-end">
<button type="button" class="btn btn-sm ml-auto font-size-24 header-item d-sm-none" (click)="mobileToggle = !mobileToggle">
<i class="mdi mdi-dots-vertical"></i>
</button>
<div class="header-rightbar" [ngClass]="{'show': mobileToggle}">
<div ngbDropdown class="d-inline-block ml-2">
<button type="button" class="btn header-item noti-icon" id="page-header-search-dropdown" ngbDropdownToggle aria-haspopup="true" aria-expanded="false">
<i class="mdi mdi-magnify"></i>
</button>
<div ngbDropdownMenu class="dropdown-menu-lg dropdown-menu-right p-0"
aria-labelledby="page-header-search-dropdown">
<form class="p-3">
<div class="form-group m-0">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search ..." aria-label="Recipient's username">
<div class="input-group-append">
<button class="btn btn-primary" type="submit"><i class="mdi mdi-magnify"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
<div ngbDropdown class="d-inline-block">
<button type="button" class="btn header-item" ngbDropdownToggle id="page-header-flag-dropdown"
aria-haspopup="true" aria-expanded="false">
<img [src]="selectedLanguage?.flag" alt="Header Language" height="14">
<span class="ms-2 d-none d-sm-inline-block align-middle">{{selectedLanguage?.shortCode}}</span>
</button>
<div class="dropdown-menu-right" ngbDropdownMenu id="countries">
<!-- item-->
<a href="javascript:void(0);" *ngFor="let item of languages; let i = index;" ngbDropdownItem class="notify-item" (click)="changeLanguage(i, item)">
<img [src]="item?.flag" alt="user-image" class="me-2" height="12"><span
class="align-middle">{{item?.country}}</span>
</a>
</div>
</div>
<div class="d-none d-lg-inline-block">
<button type="button" class="btn header-item noti-icon" (click)="requestFullscreen()">
<i class="mdi-24px" [ngClass]="['mdi', !isfullscreen ? 'mdi-fullscreen' : 'mdi-fullscreen-exit']"></i>
</button>
</div>
<div class="d-inline-block" ngbDropdown>
<button ngbDropdownToggle aria-haspopup="true" type="button" id="page-header-notification-dropdown"
aria-expanded="false" class="btn header-item noti-icon position-relative">
<i class="mdi mdi-bell"></i>
<span class="badge badge-danger badge-pill notify-icon-badge">3</span>
</button>
<div aria-labelledby="page-header-notification-dropdown" class="dropdown-menu-lg dropdown-menu-right p-0" ngbDropdownMenu>
<div class="notify-title p-3">
<h5 class="font-size-14 font-weight-600 mb-0">
<span>Notification</span>
<a class="text-primary float-end" href="javascript: void(0);">
<small>Clear All</small>
</a>
</h5>
</div>
<div class="notify-scroll">
<ngx-simplebar class="scroll-content">
...
</ngx-simplebar>
<div class="clearfix">
<a href="javascript: void(0);" class="text-primary text-center p-3 d-block">
<small>View All</small>
</a>
</div>
</div>
</div>
</div>
<div ngbDropdown class="d-inline-block">
<button type="button" class="btn header-item" id="page-header-user-dropdown" ngbDropdownToggle
aria-haspopup="true" aria-expanded="false">
<img class="rounded-circle header-profile-user" src="../assets/images/users/avatar-1.jpg" alt="Header Avatar">
<span class="d-none d-sm-inline-block ms-1">Smith</span>
<i class="mdi mdi-chevron-down d-none d-sm-inline-block"></i>
</button>
<div ngbDropdownMenu class="dropdown-menu-right">
<!-- item-->
</div>
</div>
<div class="d-inline-flex">
<button type="button" class="btn header-item notify-icon right-bar-toggle" (click)="toggleRightSidebar()">
<i class="mdi mdi-settings mdi-spin mdi-24px"></i>
</button>
</div>
</div>
</div>
<!-- LOGO -->
<div class="navbar-brand-box">
<a href="index.html" class="logo logo-dark">
<span class="logo-sm">
<img src="../assets/images/logo-sm-dark.png" alt="" height="26">
</span>
<span class="logo-lg">
<img src="../assets/images/logo-dark.png" alt="" height="35">
</span>
</a>
<a href="index.html" class="logo logo-light">
<span class="logo-sm">
<img src="../assets/images/logo-sm-light.png" alt="" height="30">
</span>
<span class="logo-lg">
<img src="../assets/images/logo-light.png" alt="" height="35">
</span>
</a>
</div>
<button type="button" class="btn btn-sm mr-2 font-size-32 d-lg-none header-item" data-toggle="collapse" data-target="#topnav-menu-content">
<i class="fa fa-fw fa-bars"></i>
</button>
<app-menu-horizontal></app-menu-horizontal>
</div>
</div>
</header>
Menu Structure for Horizontal layout
File: app/layout/shared/menu-horizontal
<div class="topnav">
<nav class="navbar navbar-light navbar-expand-lg topnav-menu">
<div class="collapse navbar-collapse" id="topnav-menu-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/">
Dashboard
</a>
</li>
<li class="nav-item" ngbDropdown>
<a class="nav-link arrow-none" ngbDropdownToggle href="javascript:void(0)" id="topnav-uielement" role="button" aria-haspopup="true" aria-expanded="false">
UI <div class="arrow-down"></div>
</a>
<div ngbDropdownMenu class="dropdown-menu dropdown-mega-menu-xl px-2" aria-labelledby="topnav-uielement">
<div class="row">
<div class="col-lg-4">
...
</div>
<div class="col-lg-4">
...
</div>
<div class="col-lg-4">
...
</div>
</div>
</div>
</li>
<li class="nav-item" ngbDropdown>
<a ngbDropdownToggle class="nav-link arrow-none" id="topnav-apps" aria-haspopup="true"
aria-expanded="false">
Apps
<div class="arrow-down"></div>
</a>
<div ngbDropdownMenu aria-labelledby="topnav-apps">
...
</div>
</li>
<li class="nav-item" ngbDropdown>
<a ngbDropdownToggle class="nav-link arrow-none" href="javascript:void(0)" id="topnav-components" role="button"
aria-haspopup="true" aria-expanded="false">
Components <div class="arrow-down"></div>
</a>
<div ngbDropdownMenu aria-labelledby="topnav-components">
<div ngbDropdown>
<a ngbDropdownToggle class="dropdown-item arrow-none" href="javascript:void(0)" id="topnav-advanced" role="button"
aria-haspopup="true" aria-expanded="false">
Advanced UI <div class="arrow-down"></div>
</a>
<div ngbDropdownMenu aria-labelledby="topnav-advanced">
...
</div>
</div>
<div ngbDropdown>
<a ngbDropdownToggle class="dropdown-item arrow-none" href="javascript:void(0)" id="topnav-icon" role="button"
aria-haspopup="true" aria-expanded="false">
Icons <div class="arrow-down"></div>
</a>
<div ngbDropdownMenu aria-labelledby="topnav-icon">
...
</div>
</div>
<div ngbDropdown>
<a ngbDropdownToggle class="dropdown-item arrow-none" href="javascript:void(0)" id="topnav-table" role="button"
aria-haspopup="true" aria-expanded="false">
Tables <div class="arrow-down"></div>
</a>
<div ngbDropdownMenu aria-labelledby="topnav-table">
...
</div>
</div>
<div ngbDropdown>
<a ngbDropdownToggle class="dropdown-item arrow-none" href="javascript:void(0)" id="topnav-form" role="button"
aria-haspopup="true" aria-expanded="false">
Forms <div class="arrow-down"></div>
</a>
<div ngbDropdownMenu aria-labelledby="topnav-form">
...
</div>
</div>
<div ngbDropdown>
<a ngbDropdownToggle class="dropdown-item arrow-none" href="javascript:void(0)" id="topnav-chart" role="button"
aria-haspopup="true" aria-expanded="false">
Charts <div class="arrow-down"></div>
</a>
<div ngbDropdownMenu aria-labelledby="topnav-chart">
...
</div>
</div>
</div>
</li>
<li class="nav-item" ngbDropdown>
<a ngbDropdownToggle class="nav-link arrow-none" href="javascript:void(0)" id="topnav-more" role="button"
aria-haspopup="true" aria-expanded="false">
Extra pages <div class="arrow-down"></div>
</a>
<div ngbDropdownMenu aria-labelledby="topnav-more">
<div ngbDropdown>
<a ngbDropdownToggle class="dropdown-item arrow-none" href="javascript:void(0)" id="topnav-auth" role="button"
aria-haspopup="true" aria-expanded="false">
Authentication <div class="arrow-down"></div>
</a>
<div ngbDropdownMenu aria-labelledby="topnav-auth">
...
</div>
</div>
<div ngbDropdown>
<a ngbDropdownToggle class="dropdown-item arrow-none" href="javascript:void(0)" id="topnav-utility" role="button"
aria-haspopup="true" aria-expanded="false">
Utility <div class="arrow-down"></div>
</a>
<div ngbDropdownMenu aria-labelledby="topnav-utility">
....
</div>
</div>
<div ngbDropdown>
<a ngbDropdownToggle class="dropdown-item arrow-none" href="javascript:void(0)" id="topnav-layout" role="button"
aria-haspopup="true" aria-expanded="false">
Layouts <div class="arrow-down"></div>
</a>
<div ngbDropdownMenu aria-labelledby="topnav-layout">
....
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>