Simple basic menubar with step-into view display menu items(not tree view display) for angular14+.
npm install ngx-menubarSimple basic menubar with step-into view display menu items(not tree view display).
Open Menubar demo preview.
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 {
}
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())
}
``