Overview
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.
Key Features
- Start with simple string arrays or complex objects
- Flexible field mapping for any data structure
- Horizontal and vertical orientations
- Editable tabs with add/remove functionality
- Custom snippets for tab headers and content
- Full keyboard navigation support
- Extensive styling with data attributes
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)
Example Styling
Best Practices
UX Guidelines
- Keep tab labels concise and descriptive
- Use 5-7 tabs maximum for optimal usability
- Provide clear visual feedback for active states
- Consider vertical layout for navigation-heavy interfaces
- Use consistent tab ordering across your application
Technical Tips
- Use field mapping to adapt to your data structure
- Implement proper error handling for dynamic content
- Test keyboard navigation thoroughly
- Consider lazy loading for heavy tab content
- Use semantic HTML for better accessibility
Explore More Components
Now that you understand the Tabs component, explore other Rokkit components that follow similar patterns: