The Tabs component is a highly extensible and versatile UI element that simplifies navigation within your application. Like other Rokkit components, Tabs follows the data-first design principle, allowing you to work with any data structure while maintaining full control over styling and behavior.
With support for horizontal and vertical orientations, editable tabs, and custom content rendering, the Tabs component adapts to your specific needs while providing excellent accessibility and keyboard navigation support.
Getting Started
Get started with basic tabs using a simple string array. Notice how the description is stored as an attribute in the data, eliminating the need for conditional logic:
Object Data with Custom Snippets
Use complex objects with custom snippets to create rich, interactive tab interfaces. The `child` snippet customizes tab headers while the content between the tags renders as the tab content:
Interactive Configuration
Explore the three key layout properties: orientation, position, and align. Try different combinations to see how they affect the tab layout:
Editable Tabs
Enable dynamic tab management with the editable property and event handlers. This example
starts with empty tabs and demonstrates add/remove functionality:
Properties
Complete reference of all available properties:
| Property | Type | Default | Description |
|---|---|---|---|
items | any[] | [] | Array of tab items (strings or objects) |
value | any | null | Selected tab value (bindable) |
fields | FieldMapping | Field mappings for data extraction | |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction of the tab bar |
position | 'before' | 'after' | 'before' | Position of tab bar relative to content |
align | 'start' | 'center' | 'end' | 'start' | Alignment of tabs within the tab bar |
editable | boolean | false | Enable add/remove tab functionality |
placeholder | string | 'Select a tab...' | Text shown when no tab is selected |
tabindex | number | 0 | Tab index for keyboard navigation |
name | string | 'tabs' | Name for accessibility (aria-label) |
class | string | '' | Additional CSS class names |
Events
Available event handlers for user interactions:
| Event | Parameters | Description |
|---|---|---|
onselect | (data: {value, selected}) | Fired when a tab is selected |
onchange | (data: {value, selected}) | Fired when the selected tab changes |
onmove | (data: {value, selected}) | Fired when focus moves between tabs |
onadd | () | Fired when add button is clicked (editable mode) |
onremove | (item: any) | Fired when a tab is removed (editable mode) |
Styling with Data Attributes
The Tabs component uses data attributes for styling hooks, allowing you to customize the appearance without modifying the component itself:
Container Attributes
data-tab-root- Root containerdata-tab-orientation- Orientation valuedata-tab-position- Position valuedata-tab-align- Alignment value
Element Attributes
data-tab-list- Tab bar containerdata-tab-item- Individual tab buttondata-tab-content- Content containerdata-tab-add- Add button (editable)data-tab-remove- Remove button (editable)