ngx-menubar

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())
}