Properties

NameTypeDefault
columns Array<string> []

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);
disabled boolean false

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);
height string | number null

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);
minimized boolean false

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);
minimizeButtonPosition NavBarMinimizeButtonPosition 'left'
NavBarMinimizeButtonPosition: "left" | "right"

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);
minimizedHeight number | string 30

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);
minimizedTitle number | string ""

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);
orientation NavBarOrientation "horizontal"
NavBarOrientation: "vertical" | "horizontal"

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);
popupAnimationDelay number 250

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);
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 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);
selection boolean true

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);
selectedItem number | string 0

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);
theme string '' 
/* 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);
width string | number '100%'

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);

Events

change Event

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);

Methods

NameArgumentsReturn Type
close None

When NavBar is minimized, closes the popup.

destroy None

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);
getSelectedIndex None

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);
open None

When NavBar is minimized, opens the popup.

selectAt index

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);