JavaScriptJavaScriptAngularAngularVueVueReactReact

Angular Menu - Setup

Smart UI for Angular supports both standalone components (bootstrapApplication) and NgModule-based apps (bootstrapModule(AppModule)). Steps 1-5 show the standalone path; the section below shows the NgModule path with the same package and styles.

Demo source (Smart UI repo): angular/src/menu/basic

1 NPM Install

Install the smart-webcomponents-angular package:

npm install smart-webcomponents-angular

2 Register styles

Add the default Smart UI stylesheet to angular.json -> projects -> <your-project> -> architect -> build -> options -> styles (merge with existing entries):

"styles": [
		"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
	]

Add optional theme CSS from the same package after smart.default.css if you use Bootstrap, Fluent, or other bundled themes.

3 Import the Angular module

Import MenuModule from smart-webcomponents-angular/menu: use @Component.imports for standalone, or add it to your AppModule (or feature module) imports array for NgModule apps.

import { MenuModule } from 'smart-webcomponents-angular/menu';

4 Root component (standalone)

Add MenuModule to your root standalone component (src/app/app.ts). Snippet from Smart UI demos (paths normalized to app.html / App where applicable):

 import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { MenuComponent } from 'smart-webcomponents-angular/menu';

import { MenuModule } from 'smart-webcomponents-angular/menu';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ MenuModule ],
  templateUrl: './app.html',
  styleUrl: './app.css'
})

export class App implements AfterViewInit, OnInit {	
	@ViewChild('menu', { read: MenuComponent, static: false }) menu!: MenuComponent;
	
 
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
		
	init(): void {
		// init code.
	    

	}	
}

Boot the app with bootstrapApplication from src/main.ts and an ApplicationConfig in src/app/app.config.ts as generated by the CLI.

5 Template (standalone)

Use your markup in src/app/app.html (or inline template). Bind properties and events on smart-menu as needed:

 <smart-menu #menu id="menu">
    <smart-menu-items-group>
        File
        <smart-menu-item [shortcut]="'Ctrl+N'">New</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+0'">Open</smart-menu-item>
        <smart-menu-items-group>
            Open Containing Folder
            <smart-menu-item>Explorer</smart-menu-item>
            <smart-menu-item>cmd</smart-menu-item>
        </smart-menu-items-group>
        <smart-menu-item [shortcut]="'Ctrl+S'" [disabled]="true">Save</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+Alt+S'" [separator]="true">Save As...</smart-menu-item>
        <smart-menu-item [shortcut]="'Alt+F4'">Exit</smart-menu-item>
    </smart-menu-items-group>
    <smart-menu-items-group>
        Edit
        <smart-menu-item [shortcut]="'Ctrl+Z'">Undo</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+Y'" [separator]="true">Redo</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+X'">Cut</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+C'">Copy</smart-menu-item>
        <smart-menu-item [shortcut]="'Ctrl+V'" [disabled]="true">Paste</smart-menu-item>
    </smart-menu-items-group>
    <smart-menu-items-group [dropDownHeight]="300">
        Encoding
        <smart-menu-item>Encode in ANSI</smart-menu-item>
        <smart-menu-item>Encode in UTF-8</smart-menu-item>
        <smart-menu-item>Encode in UTF-8-BOM</smart-menu-item>
        <smart-menu-item>Encode in UTCS-2 BE BOM</smart-menu-item>
        <smart-menu-item>Encode in UTCS-2 LE BOM</smart-menu-item>
        <smart-menu-items-group [separator]="true">
            Character sets
            <smart-menu-items-group>
                Cyrillic
                <smart-menu-item>ISO 8859-5</smart-menu-item>
                <smart-menu-item>KOI8-R</smart-menu-item>
                <smart-menu-item>KOI8-U</smart-menu-item>
                <smart-menu-item>Windows-1251</smart-menu-item>
            </smart-menu-items-group>
            <smart-menu-items-group>
                Chinese
                <smart-menu-item>Big5 (Traditional)</smart-menu-item>
                <smart-menu-item>GB2312 (Simplified)</smart-menu-item>
            </smart-menu-items-group>
            <smart-menu-items-group>
                Western European
                <smart-menu-item>ISO 8859-1</smart-menu-item>
                <smart-menu-item>ISO 8859-15</smart-menu-item>
                <smart-menu-item>OEM 850</smart-menu-item>
                <smart-menu-item>Windows-1252</smart-menu-item>
            </smart-menu-items-group>
        </smart-menu-items-group>
        <smart-menu-item>Convert to ANSI</smart-menu-item>
        <smart-menu-item>Convert to UTF-8</smart-menu-item>
        <smart-menu-item>Convert to UTF-8-BOM</smart-menu-item>
        <smart-menu-item>Convert to UTCS-2 BE BOM</smart-menu-item>
        <smart-menu-item>Convert to UTCS-2 LE BOM</smart-menu-item>
    </smart-menu-items-group>
</smart-menu>

6 NgModule bootstrap (also supported)

Same npm package and angular.json styles as steps 1-2. Put MenuModule on your NgModule.imports instead of @Component.imports, and bootstrap with bootstrapModule(AppModule).

The demo sources bundled for this widget use standalone only (there is no app.module.ts in that folder). NgModule is fully supported: put MenuModule from smart-webcomponents-angular/menu on NgModule.imports, make your root component non-standalone (remove standalone: true and move widget modules from @Component.imports to the module), and bootstrap with platformBrowserDynamic().bootstrapModule(AppModule).

Minimal main.ts + app.module.ts pairing (adjust paths to match your CLI layout):

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule).catch((err) => console.error(err));

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MenuModule } from 'smart-webcomponents-angular/menu';

@NgModule({
	declarations: [ AppComponent ],
	imports: [ BrowserModule, MenuModule ],
	bootstrap: [ AppComponent ]
})
export class AppModule { }

Reuse the template and class logic from steps 4-5 in AppComponent, configured for declarations + NgModule.imports instead of a standalone @Component.

Run

ng serve or npm start - then open http://localhost:4200/.

Smart UI for Angular - full documentation

Common Use Cases

  • Build menu from data

    Create menu items from an array

    menu.dataSource = [
  { label: 'File', items: [{ label: 'New' }, { label: 'Open' }] },
  { label: 'Edit', items: [{ label: 'Undo' }, { label: 'Redo' }] }
];
  • Handle menu item click

    Execute actions on menu selection

    menu.addEventListener('itemClick', (e) => {
  console.log('Clicked:', e.detail.label);
});

Troubleshooting

How do I create a context menu?
Set mode = 'dropDown' and use the open() method on right-click events with appropriate positioning.
How do I add icons to menu items?
Include an icon property in your dataSource items: { label: 'Save', icon: 'save-icon' }.

Accessibility

The Menu component follows WAI-ARIA best practices:

  • Keyboard navigation - Tab, Arrow keys, Enter, and Escape are supported
  • ARIA roles - Appropriate roles and labels are applied automatically
  • Focus management - Visible focus indicators for keyboard users
  • Screen readers - State changes are announced to assistive technology
  • High contrast - Supports Windows High Contrast Mode and forced colors

For custom labeling, set aria-label or aria-labelledby attributes on the component.

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.