Tabs Block
Organize content into tabbed panels for efficient space usage and improved user experience.
What is the Tabs Block?
A two-block system for tabbed interfaces:
- Tabs Container – parent wrapper
- Tab blocks – individual tab panels
Key Features
- Horizontal or vertical orientation
- Deep linking support (URL hash)
- Mobile accordion mode
- Icon support for tab labels
- Customizable colors
- Keyboard navigation
How to Use
- Insert Tabs block
- Add Tab blocks inside
- Set label for each tab
- Add content inside each tab
- Configure orientation and colors
Settings
Tabs Container:
- Orientation – Horizontal or vertical
- Mobile mode – Accordion on mobile
- Deep linking – Enable URL hash support
- Colors – Tab and content styling
Tab Settings:
- Label – Tab button text
- Icon – Optional icon (from library)
- Default active – Open by default
Common Use Cases
Product Information
- Tab 1: Description
- Tab 2: Specifications
- Tab 3: Reviews
Pricing Tables
- Tab per plan (Basic, Pro, Enterprise)
- Show features and pricing in each
Best Practices
- Use 3-7 tabs maximum
- Keep tab labels short and clear
- First tab opens by default
- Test on mobile devices
- Enable deep linking for shareability
Accessibility
- Full keyboard navigation
- ARIA attributes for screen readers
- Focus indicators visible
- Semantic HTML structure