Properties

NameTypeDefault
animationShowDuration number 350

Sets or gets the duration of the show animation. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} animationShowDuration={3000}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
animationHideDuration number 250

Sets or gets the duration of the hide animation. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} animationHideDuration={3000}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
animationHideDelay number 500

Sets or gets the delay before the start of the hide animation. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} animationHideDelay={3000}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
animationShowDelay number 200

Sets or gets the delay before the start of the show animation. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} animationShowDelay={300}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
autoCloseInterval number 10000

Sets or gets the time interval after which all opened items will be closed. When you open a new sub menu, the interval is cleared. If you want to disable this automatic closing behavior of the jqxMenu, you need to set the autoCloseInterval property to 0. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} autoCloseInterval={300}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
autoSizeMainItems boolean true

Auto-Sizes the jqxMenu's main items when the menu's mode is 'horizontal'. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} autoSizeMainItems={false}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
autoCloseOnClick boolean true

Automatically closes the opened popups after a click. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} autoCloseOnClick={false}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
autoOpenPopup boolean true

Opens the Context Menu when the right-mouse button is pressed. When this property is set to false, the Open and Close functions can be used to open and close the Context Menu. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} autoOpenPopup={false}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
autoOpen boolean true

Opens the top level menu items when the user hovers them. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} autoOpen={false}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
autoCloseOnMouseLeave boolean true 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} autoCloseOnMouseLeave={false}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
clickToOpen boolean false

Opens an item after a click by the user. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} clickToOpen={true}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
disabled boolean false

Enables or disables the jqxMenu. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} disabled={true}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
enableHover boolean true

Enables or disables the hover state. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} enableHover={false}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
easing string easeInOutSine

Sets or gets the animation's easing to one of the JQuery's supported easings. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} easing={'linear'}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
height string | number null

Sets or gets the jqxMenu's height. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} height={30}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
keyboardNavigation boolean false

Enables or disables the jqxMenu's keyboard navigation. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} keyboardNavigation={true}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
minimizeWidth number | string 'auto'

Sets or gets the jqxMenu's minimizeWidth. That width determines the minimum browser window's width when the Menu will switch from normal to minimized mode and the Menu's width is in percentages. Set it to null, if you want to disable that behavior. Note: jqxMenu automatically switches to minimized mode, when it is displayed on a touch device. By setting the property to null, you will disable that behavior, too. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} minimizeWidth={450}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
mode MenuMode horizontal
MenuMode: "horizontal" | "vertical" | "popup"

Sets or gets the menu's display mode.

Possible Values: 
'horizontal'
'vertical'
'popup'
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} mode={'vertical'}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
popupZIndex number | string 20000

Sets or gets the popup's z-index. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} popupZIndex={99999}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
rtl boolean false

Sets or getsa value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} rtl={true}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
showTopLevelArrows boolean false 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} showTopLevelArrows={true}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
source any null

Specifies the jqxMenu's data source. Use this property to populate the jqxMenu.

  • label - item's label.
  • value - item's value.
  • html - item's html. The html to be displayed in the item.
  • id - item's id.
  • items - array of sub items.
  • subMenuWidth - sets the sub menu's width.
  • disabled - determines whether the item is enabled/disabled.
theme string '' 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400} theme={'material'}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
width string | number null

Sets or gets the jqxMenu's width. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Events

closed Event

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

Code examples

Bind to the closed event of jqxMenu. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} onClosed={this.onClosed} 
        width={400}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
 
  private onClosed(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
itemclick Event

This event is triggered when a menu item is clicked.

Code examples

Bind to the itemclick event of jqxMenu. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} onItemclick={this.onItemclick} 
        width={400}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
 
  private onItemclick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
shown Event

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

Code examples

Bind to the shown event of jqxMenu. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();  
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} onShown={this.onShown} 
        width={400}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
 
  private onShown(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Methods

NameArgumentsReturn Type
closeItem itemID

Closes a menu item.

close None

Closes the menu (only in context menu mode).

disable itemID, value

Disables or enables a menu item. The method has two parameters - HTML Element ID and a boolean value which determines whether to disable or enable the element.

destroy None

Destroys the widget. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();
 
  public componentDidMount(): void {
    this.myMenu.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
focus None

Focuses the widget. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxMenu, { IMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxmenu';
 
class App extends React.PureComponent<{}, IMenuProps> {
  private myMenu = React.createRef<JqxMenu>();
 
  public componentDidMount(): void {
    this.myMenu.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxMenu ref={this.myMenu} 
        width={400}>
        <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
      </JqxMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
minimize None

Minimizes the widget.

open left, top

Opens the menu(only in context menu mode).

openItem itemID

Opens a menu item

restore None

Restores the widget from the "minimized" state.

setItemOpenDirection item, horizontaldirection, verticaldirection

Sets the item's popup open direction