React UI Components Documentation

Sets or gets the columns property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40} columns={columns}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40} disabled={true}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minimized property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40} minimized={true}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minimizeButtonPosition property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40} minimizeButtonPosition={'right'}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minimizedHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40} minimizedHeight={40}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minimizedTitle property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40} minimizedTitle={'custom element'}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the orientation property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40} orientation={'vertical'}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the popupAnimationDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40} popupAnimationDelay={400}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40} rtl={true}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the selection property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40} selection={false}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the selectedItem property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40} selectedItem={1}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40} theme={'fresh'}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user selects an item.

Code examples

Bind to the change event of jqxNavBar.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNavBar.on('change', (event) => {
            // Do Something...
        });
    }

    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNavBar.close();
    }

    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNavBar.destroy();
    }

    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myNavBar.getSelectedIndex();
    }

    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNavBar.open();
    }

    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxNavbar from 'jqwidgets-react/react_jqxnavbar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myNavBar.selectAt(1);
    }

    render() {               
        return (
            <JqxNavbar ref='myNavbar'
                width={300} height={40}>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </JqxNavbar>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));