Switch between content views in your app with JavaScript TabPanel

Easily switch between views or content with the JavaScript TabPanel. Integrate this control with a simple unordered list and expand your app's design possibilities.

Features include:

  • Auto-refreshing when switching tabs
  • Add tabs programmatically
  • Detachable panels
  • WAI-ARIA accessibility
  • Right-to-left orientation
Try the demo

Host Wijmo controls in the panels

Any Wijmo control, like FlexGrid, FlexChart, or Gauges, can be added to the panels and automatically refreshed on click:

JavaScript TabPanel Control

Extend the TabPanel to create a JavaScript Ribbon

The Ribbon sample extends TabPanel to create a familiar, intuitive navigation experience for users. The tab pages contain groups of controls arranged in rows and columns. Controls in the groups use Material Icons, and have tooltips created automatically based on the aria-label attribute assigned to each control.

Try the fiddle | Read the blog

JavaScript Ribbon Control

Customize TabPanel with CSS

Using basic CSS and TabPanel's simple layout, you can edit the tabs' alignment, animation, and style:

JavaScript TabPanel Control

Disable and hide tabs

Disable or hide individual tabs using the Tab's isDisabled and isVisible properties:

JavaScript TabPanel Control