TabPanel for JavaScript
Switch between content views in your app with JavaScript TabPanel
Easily switch between views or content with the JavaScript TabPanel. Integrate this component 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
Host Wijmo components in the panels
Any Wijmo component, like FlexGrid, FlexChart, or Gauges, can be added to the panels and automatically refreshed on click:

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 components arranged in rows and columns. Components in the groups use Material Icons, and have tooltips created automatically based on the aria-label attribute assigned to each component.

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

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

Components
- Frameworks & Integrations
- Angular
- Ionic
- React
- Vue
- Web Components
- TypeScript
- ES6
- DataGrid
- JavaScript DataGrid (FlexGrid)
- Core JavaScript Grid Features
- Advanced JavaScript Grid Features
- JavaScript Excel Import/Export
- JavaScript Master Detail
- JavaScript Group Panel
- JavaScript Filter
- JavaScript Custom Editors
- JavaScript Button Columns
- JavaScript Hyperlink Columns
- JavaScript Image Columns
- JavaScript Star Ratings Columns
- JavaScript Sparkline Columns
- JavaScript Spreadsheete
- JavaScript MultiRowe
- JavaScript TransposedGride
- JavaScript TransposedMultiRowe
- JavaScript PDF export
- JavaScript TreeGrid
- JavaScript Validation
- Data Management
- CollectionView
- OData CollectionView
- OData Virtual CollectionView
- Google Sheet API
- Firestore REST API
- Firestore Realtime API
- OAuth
- OLAP Pivot Grid
- OLAPe
- JavaScript OLAP PivotGride
- JavaScript OLAP PivotCharte
- JavaScript OLAP PivotPanele
- JavaScript OLAP Slicere
- Printing & Documents
- JavaScript Print Document
- JavaScript PDF
- JavaScript XLSX
- Charts
- JavaScript Chart
- JavaScript Area Chart
- JavaScript Bar Chart
- JavaScript Box-and-Whisker Chart
- JavaScript Bubble Chart
- JavaScript Column Chart
- JavaScript Donut Chart
- JavaScript ErrorBar Chart
- JavaScript Funnel Chart
- JavaScript Line Chart
- JavaScript Pareto Chart
- JavaScript Pie Chart
- JavaScript Polar Chart
- JavaScript Radar Chart
- JavaScript Scatter Chart
- JavaScript StepLine Chart
- JavaScript Sunburst Chart
- JavaScript TreeMap Chart
- JavaScript Waterfall Chart
- JavaScript Break-Even Chart
- Export Chart to Image
- Financial Charts
- JavaScript FinancialCharte
- JavaScript Arms Candle Volume Charte
- JavaScript Candle Volume Charte
- JavaScript Candlestick Charte
- JavaScript Equi Volume Charte
- JavaScript Heikin-Ashi Charte
- JavaScript HLOC Charte
- JavaScript Kagi Charte
- JavaScript Line Break Charte
- JavaScript Renko Chart e
- Navigation & Layout
- JavaScript Menu
- JavaScript Popup
- JavaScript Ribbon
- JavaScript TabPanel
- JavaScript TreeView
- Input & Editors
- JavaScript AutoComplete
- JavaScript DropDown
- JavaScript Clipboard
- JavaScript ColorPicker
- JavaScript ComboBox
- JavaScript InputColor
- JavaScript InputMask
- JavaScript InputNumber
- JavaScript ListBox
- JavaScript MultiSelect
- JavaScript MultiAutoComplete
- JavaScript Tooltips
- DateTime Controls
- JavaScript Calendar
- JavaScript InputDateTime
- JavaScript InputDate
- JavaScript InputTime
- JavaScript InputDateRange
- Designers
- Wijmo Designer
- VSCode Designer Extension
- e = Wijmo Enterprise features
- See product comparison