Defines the layout of the widget's elements. Each Array item should be a Percentage Value and the total should be "100%".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        columns: ['30%', '40%', '30%']
    }
  }  
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50} columns={this.state.columns}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables/disables the navbar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();  
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50} disabled={true}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the NavBar's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();  
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Defines whether the NavBar is minimized.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();  
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50} minimized={true}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Defines the position of the Toggle Button in the minimized state.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();  
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50} minimized={true} minimizeButtonPosition={'right'}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Defines the NavBar's height in minimized state.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();  
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50} minimized={true} minimizedHeight={40}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Defines the NavBar's Title in minimized state.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();  
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50} minimized={true} minimizedTitle={'custom element'}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Defines the NavBar's orientation. Possible values: "horizontal", "vertical".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();  
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50} orientation={'vertical'}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Defines the animation speed of the NavBar's Popup in minimized state.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();  
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50} minimized={true} popupAnimationDelay={400}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();  
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50} rtl={true}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the items can be selected.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();  
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50} selection={false}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the selected item. The property is taken into account when selection is true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();  
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50} selectedItem={1}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();  
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50} theme={'material'}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the NavBar's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();  
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user selects an item.

Code examples

Bind to the change event of jqxNavBar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();  
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} onChange={this.onChange} 
        width={'90%'} height={50}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When NavBar is minimized, closes the popup.

Destroys the jqxNavBar widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();
 
  public componentDidMount(): void {
    this.myNavBar.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the index of the selected item. The returned value is the index of the selected item. If there's no selected item, -1 is returned.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();
 
  public componentDidMount(): void {
    this.myNavBar.current!.getSelectedIndex();
  }
   
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When NavBar is minimized, opens the popup.

Selects the item with indicated index. Index is a number.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxNavBar, { INavBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnavbar';
 
class App extends React.PureComponent<{}, INavBarProps> {
  private myNavBar = React.createRef<JqxNavBar>();
 
  public componentDidMount(): void {
    this.myNavBar.current!.selectAt(1);
  }
   
  
  public render() {
    return (
      <JqxNavBar ref={this.myNavBar} 
        width={'90%'} height={50}>
        <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
      </JqxNavBar>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);