Ngx Menubar component

Simple basic menubar with step-into view display menu items(not tree view display).

Open Menubar demo preview.

Installation

1. Install: npm i ngx-menubar;

2. Add to module or standalone component:

   import {CyxMenubarComponent} from "ngx-menubar";
      
   @NgModule({
     // ...
     imports: [
       // ...
       CyxMenubarComponent
     ]
   })

   or

   import {CyxMenubarComponent} from "ngx-menubar";
      
   @Component({
     // ...
     imports: [
       CyxMenubarComponent
     ]
     // ...
   })
   export class AppComponent {
      
   }

Example

app.component.css

.container {
  width: 350px;
  height: 500px;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, .45);
}

app.component.html

<div class="container">
  <cyx-menubar #menubar [datasource]="items">
    <!-- some elements can be here if property 'showDocPanel' set to true. -->
  </cyx-menubar>
</div>

app.component.ts

@Component({...})
export class AppComponent {
  items: IMenuItem[] = [
    {id: 1, title: 'runtime', icon: 'deployed_code', children: []},
    {
      id: 2, title: 'main', children: [
        {id: 5, title: 'app-routing.module.ts', children: []},
        {id: 6, title: 'app.module.ts', children: []},
        {id: 7, title: 'app.component.ts', children: []}
      ]
    },
    //...
  ]
}

Directives

| Name | Default value | Description | |------------------------------------------------------|-------------------------------|--------------------------------------------------------------| | @Input() title: string | 'Menu' | Default Top menu title. | | @Input() datasource: IMenuItem[] | [] | Menu items. | | @Input() color: string | 'dark' | Theme color, 'dark' or 'light'. | | @Input() active: string | number | null | current active menu item id. | | @Input() showDocPanel: boolean | false | Show bottom doc panel. | | @Input() showMenuIcon: boolean | true | Show menu icon. | | @Input() iconParser: Function | (icon: string) => icon | Parse icon which from menu item data field IMenuItem#icon. | | @Input() searchConfig: SearchConfig | {...} | Global menu item search configuration. | | @Output() itemClick: EventEmitter<IMenuItem> | | Menu item click event. |

Properties

| Name | Default value | Description | |-------------------------|---------------|--------------------| | selectedItem: IMenuItem | null | Selected item. | | get isTopMenu | true | Is menu top level. |

Appendix

IconParser

Example of parse icon name to icon html.

// menu item data.
// {id: 1, title: '...', icon: 'deployed_code'}

// font icon.
icon => `<span class="material-symbols-sharp">${icon}</span>`
// svg icon.
icon => `<svg viewBox="...">...</svg>`

IMenuItem

Menubar menu item type.

export interface IMenuItem {
  id: number | string;
  title: string;
  icon?: string;
  children?: IMenuItem[];
  data?: { [key: string]: any }
}

SearchConfig

export interface SearchConfig {
  placeHolder?: string;
  predicate?: (keyword: string, item: IMenuItem) => boolean;
}

DefaultSearchConfig

{
  placeHolder: 'search',
  predicate: (keyword, item) => item.title.toLowerCase().includes(keyword.toLowerCase())
}