Introduction

jqxNavigationBar is a versatile jQuery widget for building collapsible side-menu systems. It has header and content sections(like tabs). Users can expand or collapse a content section by clicking its associated header. Try jqxNavigationBar in our jsEditor - cloud solution for JavaScript, HTML and CSS editing, hosting and sharing your web development ideas!

Features

• Single or Multiple Expanded Items
• Toggle Modes
• Works across devices and browsers
• Web Standards Compliant
• Rich and easy to use JavaScript API
• Easy customization and built-in themes
• Search-Engine Friendly Rendering

Single or Multiple Expanded Items

With jqxNavigationBar, you can choose to have single or multiple expanded items. To switch between the two modes, you need to change only one property - 'expandMode'. By default, the jqxNavigationBar can have only one expanded item(like Accordion). If the 'expandMode' property value is 'multiple', users can expand or collapse multiple items at the same time.

Toggle Modes

You can specify the action needed for expanding or collapsing a navigation item. jqxNavigationBar supports the following toggle modes:

• 'click' - a navigation item's content section is expanded or collapsed when the user clicks the item's header section.
• 'double click' - a navigation item's content section is expanded or collapsed when the user double clicks the item's header section.
• 'mouse enter/mouse leave' - a navigation item's content section is expanded or collapsed when the mouse cursor is moved over the item's header section.

Rich and easy to use JavaScript API

jqxNavigationBar has a rich set of events and built-in functions guaranteeing full control over the NavigationBar. With the NavigationBar API, you can get the expanded navigation item, expand or collapse an item, disable or enable a navigation item or the entire NavigationBar.