Horizontal menu configuration

If you would like to have Horizontal Menu (or Topnav) based layout then perform below change.

Set this.layoutType = LAYOUT_HORIZONTAL; in src/app/layouts/layout.component.ts.

How to add new/change menu items?

In order to add, change or remove menu items from the topbar navigation, simply edit in file src/app/layouts/horizontaltopbar/menu.ts. You can add this menu link in "src/app/pages/pages-routing.module.ts" file where all routes are pre-defined for menus. And it will be accessible from browser.

How to use pre-built layouts?

Each of the layout options is provided below with steps you would need to perform in src/app/layouts/horizontal/horizontal.component.ts in ngAfterViewInit method:

image
Topbar Light
Set data attribute document.body.setAttribute("data-topbar", "light"); and document.body.setAttribute("data-layout", "horizontal"); to have light topbar and dark menubar.
image
Colored Header
Set data attribute document.body.setAttribute("data-topbar", "colored"); and document.body.setAttribute("data-layout", "horizontal"); to have colored topbar and dark menubar.
image
Scrollable
Set data attribute document.body.setAttribute("data-layout-scrollable", "true"); to have scrollable topbar and dark menubar.
image
Boxed Layout
Set data attribute document.body.setAttribute("data-layout-size", "boxed"); and document.body.setAttribute("data-layout", "horizontal"); to have boxed layout.
© Themesbrand.
Crafted with by Themesbrand