Properties

NameTypeDefault
alwaysShowNavigationArrows boolean false

Sets or gets the jqxListMenu's alwaysShowNavigationArrows property. The alwaysShowNavigationArrows specifies whether navigation arrows are displayed for all items. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} alwaysShowNavigationArrows={true}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
animationType ListMenuAnimationType "slide"
ListMenuAnimationType: "slide" | "fade"

Sets or gets the animation's type.

Possible Values: 
'slide'
'fade'
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} animationType={'fade'} animationDuration={1000}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
animationDuration number | string 0

Sets or gets the animation duration in milliseconds. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} animationDuration={500}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
autoSeparators boolean false

Sets or gets whether auto separators will be generated. Separator is generated for a sequence of list items with equal start character. The property is possible to be set through the attribute data-auto-separators="true". 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} autoSeparators={true}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
backLabel number | string "Back"

Sets or gets the BackButton's label. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} backLabel={'Back Button'}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
disabled boolean false

Sets or gets the jqxListMenu's disabled property. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} disabled={true}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
enableScrolling boolean true

When the jqxListMenu is created with the enableScrolling property set to true, vertical scrollbar automatically appears, if the items overflow the visible area. In order to use this feature, the following files should be included: jqxpanel.js and jqxscrollbar.js. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} enableScrolling={false}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
filterCallback (text:ListMenuFilterCallback['text'], searchValue:ListMenuFilterCallback['searchValue']) => boolean function (text, searchValue){return text.toString().toLowerCase().indexOf(searchValue.toLowerCase()) >= 0;};
Interface ListMenuFilterCallback {
  text?: string;
  searchValue?: string | number;
}

Used for filtering the jqxListMenu using the filter input. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      filterCallback: (text: string, searchValue: string | number): any => {
        return text.toString().toLowerCase().indexOf(searchValue.toLowerCase()) >= 0;
      }
    }
  }  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} showFilter={true} filterCallback={this.state.filterCallback}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
height number | string auto

Sets or gets the jqxListMenu's height. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} height={500}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
headerAnimationDuration number | string 0

Sets or gets the animation duration of the header. Header of a listmenu could be set whether the data-role attribute of a list item is set to 'header'.

placeHolder number | string 'Filter list items...'

Sets or gets the filter input field's place holder. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} showFilter={true} placeHolder={'Search items...'}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
readOnly boolean false

Sets or gets whether the list will be read-only. In readOnly mode, items are not clickable. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} readOnly={true}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
rtl boolean false

Sets or gets a 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 JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} rtl={true}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
roundedCorners boolean true

Sets or gets the jqxListMenu's roundedCorners property. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} roundedCorners={false}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
showNavigationArrows boolean true

Sets or gets the jqxListMenu's showNavigationArrows property. The showNavigationArrows specifies whether navigation arrows are displayed only for list items with nested Lists 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} showNavigationArrows={false}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
showFilter boolean false

Sets or gets whether the filter input field is visible. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} showFilter={true}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
showHeader boolean true

Sets or gets whether the header will be visible. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} showHeader={false}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
showBackButton boolean true

Indicates whether the back button will be visible. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} showBackButton={false}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
theme string '' 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300} theme={'material'}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
width string | number 100%

Sets or gets the jqxListMenu's width. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();  
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Methods

NameArgumentsReturn Type
back None

Navigates to the previous page.

changePage Item

Sets the displayed page. The page could be set using a selector or object. The page must be a child of the current list and it's data-role must be set to "listmenu".

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 JqxListMenu, { IListMenuProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistmenu';
 
class App extends React.PureComponent<{}, IListMenuProps> {
  private myListMenu = React.createRef<JqxListMenu>();
 
  public componentDidMount(): void {
    this.myListMenu.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxListMenu ref={this.myListMenu} 
        width={300}>
        <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
      </JqxListMenu>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);