Sets or gets the animationShowDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [animationShowDuration]="3000">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the animationHideDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [animationHideDuration]="3000">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the animationHideDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [animationHideDelay]="3000">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the animationShowDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [animationShowDelay]="300">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the autoCloseInterval property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [autoCloseInterval]="300">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the autoSizeMainItems property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [autoSizeMainItems]="false">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the autoCloseOnClick property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [autoCloseOnClick]="false">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the autoOpenPopup property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [autoOpenPopup]="false">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the autoOpen property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [autoOpen]="false">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the autoCloseOnMouseLeave property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [autoCloseOnMouseLeave]="false">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the clickToOpen property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [clickToOpen]="true">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [disabled]="true">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the enableHover property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [enableHover]="false">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the easing property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [easing]="'linear'">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the keyboardNavigation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [keyboardNavigation]="true">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the minimizeWidth property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [minimizeWidth]="450">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

enum MenuMode {
     horizontal,
     vertical,
     popup
}

Sets or gets the mode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [mode]="'vertical'">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the popupZIndex property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [popupZIndex]="99999">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [rtl]="true">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showTopLevelArrows property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [showTopLevelArrows]="true">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the source property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [source]="source">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30" [theme]="'energyblue'">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    
}

This event is triggered when any of the jqxMenu Sub Menus is closed.

Code examples

Bind to the closed event of jqxMenu.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu (onClosed)="Closed($event)"
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    Closed(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when a menu item is clicked.

Code examples

Bind to the itemclick event of jqxMenu.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu (onItemclick)="Itemclick($event)"
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    Itemclick(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered after the menu is initialized.

Code examples

Bind to the initialized event of jqxMenu.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu (onInitialized)="Initialized($event)"
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    Initialized(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when any of the jqxMenu Sub Menus is displayed.

Code examples

Bind to the shown event of jqxMenu.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu (onShown)="Shown($event)"
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent {
    Shown(event: any): void 
    {
        // Do Something
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myMenu') myMenu: jqxMenuComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myMenu.closeItem(Item1);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myMenu') myMenu: jqxMenuComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myMenu.close();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myMenu') myMenu: jqxMenuComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myMenu.disable(0,true);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myMenu') myMenu: jqxMenuComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myMenu.destroy();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myMenu') myMenu: jqxMenuComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myMenu.focus();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myMenu') myMenu: jqxMenuComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myMenu.minimize();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myMenu') myMenu: jqxMenuComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myMenu.open(10,10);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myMenu') myMenu: jqxMenuComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myMenu.openItem(Item1);
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myMenu') myMenu: jqxMenuComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myMenu.restore();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxMenu #myMenu 
            [width]="670" [height]="30">
            <ul>
                <li><a href="#Home">Home</a></li>
                <li>
                    Solutions
                    <ul style="width: 250px;">
                        <li>Education</li>
                        <li type="separator"></li>
                        <li>
                        Software Solutions
                        <ul style="width: 220px;">
                            <li>Consumer Photo</li>
                        </ul>
                        </li>
                        <li>All Industries And Solutions</li>
                    </ul>
                </li>
                <li>
                    Products
                    <ul>
                        <li>PC Products</li>
                    </ul>
                    </li>
                <li>
                    Support
                    <ul style="width: 200px;">
                        <li>Support Home</li>
                    </ul>
                </li>
                <li>
                    Communities
                    <ul style="width: 200px;">
                        <li>Designers</li>
                        <li>Developers</li>
                    </ul>
                </li>   
            </ul>
        </jqxMenu>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myMenu') myMenu: jqxMenuComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myMenu.setItemOpenDirection(Item1,left,top);
    }

    
}