Drift Angular
  • Overview
  • Package Content
  • Installation and Setup
    • Setup Environment
    • Setup Project
    • Setup Layout
    • Deployment
  • Structure
    • Folders and Files Structure
    • Layouts
    • Drift Icons
  • Stylesheets
    • Overview
    • Sass Variables
    • Layouts & Theme
    • Fonts
    • Colors
    • Back Ground Images
    • Margin & Paddings
    • Theme Customization
    • RTL Version
  • Settings
    • Template Setting
    • Customize Horizontal Menu
    • Customize Vertical Menu
    • Create a Page
    • Define Routes
    • Root Loader
    • RTL
    • Internationalization
  • Components
    • Alerts
    • Badges
    • Breadcrumbs
    • Buttons
    • Button Group
    • Cards
    • Card Group
    • Collapse
    • Dropdowns
    • Progress Bar
    • Tabs
Powered by GitBook
On this page
  • Group
  • Mega
  • Collapse
  • Item

Was this helpful?

  1. Settings

Customize Horizontal Menu

Add, Edit and Delete a Horizontal Menu

The horizontal menu bar is only available for “listing” and “saas” layouts. To customize the horizontal menu for these two layouts you would need to go to:

src / app / layouts / {listing or saas} / navigation / header-menu.model.ts

In this model file, you can change the json object to customize the menu items.

There are four type in Horizontal Menu

  1. Group

  2. Mega

  3. Collapse

  4. Item

Group

{
    id: 'id of the menu',
    title: 'Title of the menu',
    translate: 'Translation Key',
    type: 'group',
    icon: 'icon of the menu',
    children: [..submenu items..]
}

Mega

{
    id: 'id of the menu',
    title: 'Title of the menu',
    translate: 'Translation Key',
    type: 'mega',
    icon: 'icon of the menu',
    children: [item1, item4, item3, item4]
}

In Mega Menu support max four childers that must be collaple and item types.

Collapse

{
    id: 'id of the menu',
    title: 'Title of the menu',
    translate: 'Translation Key',
    type: 'collapse',
    icon: 'icon of the menu',
    children: [..submenu items..]
}

Item

{
    id: 'id of the menu',
    title: 'Title of the menu',
    translate: 'Translation Key',
    type: 'item',
    icon: 'icon of the menu',
    url: 'route url'
}
PreviousTemplate SettingNextCustomize Vertical Menu

Last updated 5 years ago

Was this helpful?