The tabs content block lets you organize and display related information in a clear, structured way. Instead of overwhelming users with too much data on one page, you can group details into tabs, making it easier to navigate between sections.
Tabs are created for each property value that you select from a related model. For example, you could display a list of direct reports as individual tabs, each showing the employee’s details, forms, or other related content.
| Feature | Details view | Forms view | Mixed view |
|---|---|---|---|
| Description | Shows static information, such as names, roles, or start dates. | Displays editable fields directly inside the tab. | Combines details and forms for a richer experience, with both read-only and editable fields. |
| HR use case |
Employee directory showing each direct report’s basic information. |
Performance goal-setting where managers and employees can adjust progress or add comments. |
Direct report tabs showing profile details alongside an editable form for updating contact info. |
Why use a tabs content block?
Tabs improve usability by breaking complex information into manageable sections. This helps employees quickly locate the information they need without scrolling through long pages.
Example use cases in HR
- Employee directory: Show each team member’s details under their own tab.
- Direct reports: Managers can view each of their team’s information in separate tabs.
- Performance reviews: Organize goals, feedback, and development plans into separate sections.
- Learning records: Separate completed, in-progress, and upcoming training for clarity.
Display options
- Details view: Show basic information, such as name, role, or start date.
- Forms view: Display editable fields directly within the tab, such as updating job information or contact details.
- Mixed view: Combine detail blocks and tab blocks for a richer experience.
Best practices
- Keep tab titles short: Use clear labels like Name, Job, or Reports to avoid clutter.
- Limit the number of tabs: Too many tabs can overwhelm users; group data where possible.
- Order tabs logically: Place the most important or frequently accessed information first.
- Ensure consistency: Keep the layout and content type similar across tabs for a smoother experience.
- Use for related models: Tabs work best when the content is directly linked, such as employees and their direct reports.