Tab Bar
The Tab Bar element provides tabbed navigation within a page. Each tab maps to a page in your application — clicking a tab navigates to that page. Use it to organize content into sections like "Overview", "Details", and "Settings".
Adding a Tab Bar
- Open the Website Builder and select a page
- Find Tab Bar in the Navigation category of the Elements Panel
- Drag it onto your page
- Configure tabs in the Floating Design Panel
Properties
General Tab
| Property | Description |
|---|---|
| Tabs | List of tabs. Each tab has a label, target page, and optional icon |
| Style | Visual style: Underline, Pills, or Buttons |
| Position | Where the tab bar appears: Top or Bottom |
| Active Color | Color of the active/selected tab |
| Show Icons | Display icons alongside tab labels |
| Scrollable | Enable horizontal scrolling for many tabs |
Color Tab
Customize the container background and border colors.
Dimensions Tab
Adjust padding, margin, border radius, and size of the tab bar container.
Tab Styles
| Style | Description |
|---|---|
| Underline | Active tab has a colored bottom border |
| Pills | Active tab has a rounded colored background |
| Buttons | Tabs appear as bordered buttons |
Use Cases
- Section Navigation: Switch between Overview, Details, and Settings sections
- Category Tabs: Browse items by category (e.g., All, Popular, Recent)
- Bottom Navigation: Place at bottom for mobile-style nav bar
Best Practices
- Keep tab labels short (1-2 words)
- Use 3-5 tabs maximum for best usability
- Enable scrollable for more than 5 tabs
- Use icons alongside labels for visual clarity