# ngx-menu-ui > 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. Latest version **0.0.2** (published 2020-03-23) · 0 weekly downloads ## Install ```sh npm install ngx-menu-ui pnpm add ngx-menu-ui yarn add ngx-menu-ui bun add ngx-menu-ui ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.2 | | Published | 2020-03-23 | | First published | 2020-03-23 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 167 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | salvadorcs | ## Links - npm: https://www.npmjs.com/package/ngx-menu-ui - npm.io page: https://npm.io/package/ngx-menu-ui ## Dependencies (1) - [tslib](https://npm.io/package/tslib.md) ^1.9.0 ## Recent versions - 0.0.2 (latest) — 2020-03-23 - 0.0.1 — 2020-03-23 ## README # 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`: ```bash npm install ngx-menu-ui --save ``` Install dependencies from `npm`: ```bash 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: ``` ``` ## 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 --- _Source: https://npm.io/package/ngx-menu-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._