GenXora's tab component is useful for multilingual articles, specifications, installation steps, comparisons, or separating a demo from its code.
Overview
Tabs reduce visual length by grouping closely related information. They work best when every panel is part of the same topic and the labels make the difference between panels obvious.
- Product specifications
- Language versions
- Installation methods
- Code examples
Configuration
Create radio inputs, connect each label through its for attribute, and place the corresponding content inside classes containing Text-1, Text-2, and so on.
<input id="demoTab1" name="demoTabs" type="radio" checked> <div class="tbHd"> <label for="demoTab1" data-text="First tab"></label> </div>
Best practices
- Use short, descriptive tab labels.
- Do not hide critical disclosures in a later tab.
- Keep heading levels consistent inside every panel.
- Test keyboard navigation and mobile overflow.
Avoid creating too many tabs. Three to five panels are usually enough.