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:

``typescript
import {CyxMenubarComponent} from "ngx-menubar";

@NgModule({
// ...
imports: [
// ...
CyxMenubarComponent
]
})
`

or

`typescript
import {CyxMenubarComponent} from "ngx-menubar";

@Component({
// ...
imports: [
CyxMenubarComponent
]
// ...
})
export class AppComponent {

}
`

Example

app.component.css

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

app.component.html

`html


`

app.component.ts

`typescript

@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

$3

Example of parse icon name to icon html.

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

// font icon.
icon => ${icon}
// svg icon.
icon =>
`

$3

Menubar menu item type.

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

$3

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

#### DefaultSearchConfig

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