ngx-menu-ui

Getting Started

ngx-menu-ui contains components to generate header, nav and footer from a JSON input. Contains code Bootstrap components, don't need to include original JS components but we are using CSS provided by Bootstrap.

Installation instructions

Install ngx-menu-ui from npm:

npm install ngx-menu-ui --save

Install dependencies from npm:

npm install @ng-bootstrap/ng-bootstrap@5.3.0 bootstrap@4.3.1 font-awesome@4.7.1

Add NgxMenuUiModule package to NgModule imports:

import { NgxMenuUiModule } from 'ngx-menu-ui';

@NgModule({
  ...
  imports: [NgxMenuUiModule,...]
  ...
})

You will need bootstrap and font-awesome styles in angular.json:

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/font-awesome/css/font-awesome.min.css",
    ...
]

Add component to your page:

<ngx-menu-ui 
  [menu]="menuJson"
  (action)="menuUIAction($event)"></ngx-menu-ui>

Input JSON

Json structure details

MenuUI from ngx-menu-ui/lib/objects/menu-ui.

{
    "brand": "My App Name",     // Application name to appear on header and footer 
    "hmenu": MenuOptions[],     // Nav items to appear in header like language, user profile and application switch
    "vmenu": MenuOptions[]      // Nav items to appear in side nav where app specific items appear
}

MenuOptions from ngx-menu-ui/lib/objects/menu-options.

{
    "id": "menuOption.key",             // Key for the nav item 
    "value": "menuOption.displayText"   // Display text value for the nav item 
    "icon": "menuOption.icon",          // Icon to be dispayed for the nav item (optional)
    "show": "menuOption.show",          // Show/Hide the nav item - based on flow context(optional)
    "disable": "menuOption.disabled",   // Disable the nav item - based on flow context(optional)
    "submenu": SubMenuOptions[]         // Nav subitems (optional)    
}

SubMenuOptions from ngx-menu-ui/lib/objects/sub-menu-options.

{
    "id": "menuSubOption.key",              // Key for the nav sub item 
    "value": "menuSubOption.displayText",   // Display text value for the nav sub item 
    "show": "menuSubOption.show",           // Show/Hide the nav sub item - based on flow context(optional)
    "disable": "menuSubOption.disabled"     // Disable the nav sub item - based on flow context(optional)
}

Note: Last MenuOptions of hmenu key in JSON will always be considered as LoggedIn profile options Note: First SubMenuOptions in last MenuOptions of hmenu key in JSON will always be considered as LoggedIn profile name

Menu JSON sample with available options:

{
  "brand": "My App Name",
  "hmenu": [
    {
      "id": "APP_OPTIONS_APPS",
      "value": "APP_OPTIONS_APPS",
      "icon": "fa fa-th-large",
      "show": true,
      "disable": false,
      "submenu": [
        {
          "id": "APP_1",
          "value": "My App 1",
          "show": true,
          "disable": false
        },
        {
          "id": "APP_2",
          "value": "My App 2",
          "show": true,
          "disable": false
        }
      ]
    },
    {
      "id": "APP_OPTIONS_LANGUAGE",
      "value": "APP_OPTIONS_LANGUAGE",
      "icon": "fa fa-language",
      "show": true,
      "disable": false,
      "submenu": [
        {
          "id": "APP_OPTIONS_ENG",
          "value": "English",
          "show": true,
          "disable": false
        },
        {
          "id": "APP_OPTIONS_FIN",
          "value": "Spanish",
          "show": true,
          "disable": false
        }
      ]
    },
    {
      "id": "APP_OPTIONS_PROFILE",
      "value": "TS",            // logged in short user name
      "icon": "fa fa-user",
      "show": true,
      "disable": false,
      "submenu": [
        {
          "id": "APP_OPTIONS_USER",
          "value": "TONY STARK",    // logged in full user name
          "show": true,
          "disable": false,
          "type": "card"
        },
        {
          "id": "APP_OPTIONS_LOGOUT",
          "value": "Logout",
          "show": true,
          "disable": false
        }
      ]
    }
  ],
  "vmenu": [
    {
      "id": "menu.item1",
      "value": "Menu Item 1",
      "icon": "fa fa-cog",
      "show": true,
      "disable": false,
      "submenu": [
        {
          "id": "menu.subitem1",
          "value": "Menu Subitem 1",
          "show": true,
          "disable": false
        },
        {
          "id": "menu.subitem5",
          "value": "Menu Subitem 5",
          "show": true,
          "disable": false
        },
        {
          "id": "menu.subitem2",
          "value": "Menu Subitem 2",
          "show": true,
          "disable": false
        }
      ]
    },
    {
      "id": "menu.item2",
      "value": "Menu Item 2",
      "icon": "fa fa-code",
      "show": true,
      "disable": false
    },
    {
      "id": "menu.item3",
      "value": "Menu Item 3",
      "icon": "fa fa-cogs",
      "show": true,
      "disable": false,
      "submenu": [
        {
          "id": "menu.subitem3",
          "value": "Menu Subitem 3",
          "show": true,
          "disable": false
        },
        {
          "id": "menu.subitem4",
          "value": "Menu Subitem 4",
          "show": true,
          "disable": false
        },
        {
          "id": "menu.subitem6",
          "value": "Menu Subitem 6",
          "show": true,
          "disable": false
        }
      ]
    },
    {
      "id": "menu.item4",
      "value": "Menu Item 4",
      "icon": "fa fa-cogs",
      "show": true,
      "disable": false,
    }
  ]
}

Attributes and Methods

Attributes

Attribute	Description	Required
menu	JSON value for menu	true
footerText	Text appended with application name in footer	false
copyrightMessage	Copyright message to be added in footer	false

Methods

Method	Description	Required
action	Method called on click of nav option, emits id of the item	true

Upcoming enhancements

1. Theme support
2. Add company logo in header
3. Search bar in header
4. Tag cloud support in side nav