jQWidgets
  • Documentation
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Demo
  • Download

React UI Components

  • Javascript/jQuery
  • Angular
  • Vue
  • React
  • Custom Elements
  • ASP .NET MVC
  • Showcase Demos
  • Responsive Design
  • Theme Builder
Show Demo List

React UI Components

  • jqxGrid
  • jqxTabs
  • jqxTextArea
  • jqxWindow
  • jqxKnob
  • jqxResponsivePanel
  • jqxChart
  • jqxMenu
  • jqxInput
  • jqxDocking
  • jqxGauge
  • jqxNavBar
  • jqxPivotGrid
  • jqxTree
  • jqxPasswordInput
  • jqxNotification
  • jqxBarGauge
  • jqxSortable
  • jqxScheduler
  • jqxNavigationBar
  • jqxMaskedInput
  • jqxPopOver
  • jqxExpander
  • jqxLoader
  • jqxTreeGrid
  • jqxListMenu
  • jqxComplexInput
  • jqxTooltip
  • jqxRating
  • jqxDraw
  • jqxDataTable
  • jqxToolBar
  • jqxFormattedInput
  • jqxColorPicker
  • jqxRangeSelector
  • jqxDragDrop
  • jqxTreeMap
  • jqxComboBox
  • jqxNumberInput
  • jqxScrollView
  • jqxSlider
  • jqxPanel
  • jqxEditor
  • jqxDropDownList
  • jqxDateTimeInput
  • jqxProgressBar
  • jqxScrollBar
  • jqxValidator
  • jqxRibbon
  • jqxListBox
  • jqxCalendar
  • jqxFileUpload
  • jqxSplitter
  • jqxValidator
  • jqxLayout
  • jqxButtons
  • jqxKanban
  • jqxBulletChart
  • jqxDockingLayout

jqxNavigationBar

  • Default Functionality
  • Multiple Expanded
  • Disabled
  • Events
  • Toggle Mode
  • Fit to Container
  • Fluid Size
  • Keyboard Navigation
  • Right to Left Layout
Theme:
  • Demo
  • App.htm
  • App.js
ReactJS Navigation Bar demo. In this demo, the disabled property of the jqxNavigationBar widget is set to true.
Early History of the Internet
  • 1961 First packet-switching papers
  • 1966 Merit Network founded
  • 1966 ARPANET planning starts
  • 1969 ARPANET carries its first packets
  • 1970 Mark I network at NPL (UK)
  • 1970 Network Information Center (NIC)
  • 1971 Merit Network's packet-switched network operational
  • 1971 Tymnet packet-switched network
  • 1972 Internet Assigned Numbers Authority (IANA) established
  • 1973 CYCLADES network demonstrated
  • 1974 Telenet packet-switched network
  • 1976 X.25 protocol approved
  • 1979 Internet Activities Board (IAB)
  • 1980 USENET news using UUCP
  • 1980 Ethernet standard introduced
  • 1981 BITNET established
Merging the networks and creating the Internet
  • 1981 Computer Science Network (CSNET)
  • 1982 TCP/IP protocol suite formalized
  • 1982 Simple Mail Transfer Protocol (SMTP)
  • 1983 Domain Name System (DNS)
  • 1983 MILNET split off from ARPANET
  • 1986 NSFNET with 56 kbit/s links
  • 1986 Internet Engineering Task Force (IETF)
  • 1987 UUNET founded
  • 1988 NSFNET upgraded to 1.5 Mbit/s (T1)
  • 1988 OSI Reference Model released
  • 1988 Morris worm
  • 1989 Border Gateway Protocol (BGP)
  • 1989 PSINet founded, allows commercial traffic
  • 1989 Federal Internet Exchanges (FIXes)
  • 1990 GOSIP (without TCP/IP)
  • 1990 ARPANET decommissioned
Popular Internet services
  • 1990 IMDb Internet movie database
  • 1995 Amazon.com online retailer
  • 1995 eBay online auction and shopping
  • 1995 Craigslist classified advertisements
  • 1996 Hotmail free web-based e-mail
  • 1997 Babel Fish automatic translation
  • 1998 Google Search
  • 1999 Napster peer-to-peer file sharing
  • 2001 Wikipedia, the free encyclopedia
  • 2003 LinkedIn business networking
  • 2003 Myspace social networking site
  • 2003 Skype Internet voice calls
  • 2003 iTunes Store
  • 2004 Facebook social networking site
  • 2004 Podcast media file series
  • 2004 Flickr image hosting
  • 2005 YouTube video sharing
  • 2005 Google Earth virtual globe
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title id="Description">
        ReactJS Navigation Bar demo. In this demo, the disabled property of the jqxNavigationBar widget is set to true.
    </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../scripts/demos.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxnavigationbar.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom: 3em">
        ReactJS Navigation Bar demo. In this demo, the disabled property of the jqxNavigationBar widget is set to true.
    </div>
    <div id="app"></div>
    <script src="../build/navigationbar_disabled.bundle.js"></script>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';

import JqxNavigationBar from '../../../jqwidgets-react/react_jqxnavigationbar.js';

class App extends React.Component {
    render () {
			let innerHtml =
				  '<div>' +
			        'Early History of the Internet</div>' +
			    '</div>' +
			    '<div>' +
			        '<ul>' +
			            '<li>1961 First packet-switching papers</li>' +
			            '<li>1966 Merit Network founded</li>' +
			            '<li>1966 ARPANET planning starts</li>' +
			            '<li>1969 ARPANET carries its first packets</li>' +
			            '<li>1970 Mark I network at NPL (UK)</li>' +
			            '<li>1970 Network Information Center (NIC)</li>' +
			            '<li>1971 Merit Network\'s packet-switched network operational</li>' +
			            '<li>1971 Tymnet packet-switched network</li>' +
			            '<li>1972 Internet Assigned Numbers Authority (IANA) established</li>' +
			            '<li>1973 CYCLADES network demonstrated</li>' +
			            '<li>1974 Telenet packet-switched network</li>' +
			            '<li>1976 X.25 protocol approved</li>' +
			            '<li>1979 Internet Activities Board (IAB)</li>' +
			            '<li>1980 USENET news using UUCP</li>' +
			            '<li>1980 Ethernet standard introduced</li>' +
			            '<li>1981 BITNET established</li>' +
			        '</ul>' +
			    '</div>' +
			    '<div>' +
			        'Merging the networks and creating the Internet</div>' +
			    '<div>' +
			        '<ul>' +
			            '<li>1981 Computer Science Network (CSNET)</li>' +
			            '<li>1982 TCP/IP protocol suite formalized</li>' +
			            '<li>1982 Simple Mail Transfer Protocol (SMTP)</li>' +
			            '<li>1983 Domain Name System (DNS)</li>' +
			            '<li>1983 MILNET split off from ARPANET</li>' +
			            '<li>1986 NSFNET with 56 kbit/s links</li>' +
			            '<li>1986 Internet Engineering Task Force (IETF)</li>' +
			            '<li>1987 UUNET founded</li>' +
			            '<li>1988 NSFNET upgraded to 1.5 Mbit/s (T1)</li>' +
			            '<li>1988 OSI Reference Model released</li>' +
			            '<li>1988 Morris worm</li>' +
			            '<li>1989 Border Gateway Protocol (BGP)</li>' +
			            '<li>1989 PSINet founded, allows commercial traffic</li>' +
			            '<li>1989 Federal Internet Exchanges (FIXes)</li>' +
			            '<li>1990 GOSIP (without TCP/IP)</li>' +
			            '<li>1990 ARPANET decommissioned</li>' +
			        '</ul>' +
			    '</div>' +
			    '<div>' +
			        'Popular Internet services</div>' +
			    '<div>' +
			        '<ul>' +
			            '<li>1990 IMDb Internet movie database</li>' +
			            '<li>1995 Amazon.com online retailer</li>' +
			            '<li>1995 eBay online auction and shopping</li>' +
			            '<li>1995 Craigslist classified advertisements</li>' +
			            '<li>1996 Hotmail free web-based e-mail</li>' +
			            '<li>1997 Babel Fish automatic translation</li>' +
			            '<li>1998 Google Search</li>' +
			            '<li>1999 Napster peer-to-peer file sharing</li>' +
			            '<li>2001 Wikipedia, the free encyclopedia</li>' +
			            '<li>2003 LinkedIn business networking</li>' +
			            '<li>2003 Myspace social networking site</li>' +
			            '<li>2003 Skype Internet voice calls</li>' +
			            '<li>2003 iTunes Store</li>' +
			            '<li>2004 Facebook social networking site</li>' +
			            '<li>2004 Podcast media file series</li>' +
			            '<li>2004 Flickr image hosting</li>' +
			            '<li>2005 YouTube video sharing</li>' +
			            '<li>2005 Google Earth virtual globe</li>' +
			        '</ul>' +
			    '</div>';
        return (
            <JqxNavigationBar template={innerHtml} width={400} height={430} expandMode={'singleFitHeight'} disabled={true} />
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

jQWidgets
  • Facebook
  • Youtube
  • Google +
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2019. All Rights Reserved.