Skip to main content
The tab component builds a tabbed interface where each tab is a link to a page or section. Tabs can be in two states: active or inactive.

​
Basic Usage

SELECT 'tab' AS component;
SELECT 'Projects' AS title;
SELECT 'Tasks' AS title, true AS active;
SELECT 'Settings' AS title;

​
Top-Level Properties

​
center
boolean
Center the tabs horizontally
​
class
text
Custom CSS class for the tab container
​
id
text
HTML identifier for the tab container

​
Tab Properties

​
title
text
required
Text displayed on the tab. If link is not set, creates a link to ?tab={title}#{id}
​
link
url
Custom URL to navigate to when clicked. By default, links to the current page with ?tab={title}#{id}.
​
active
boolean
Whether this tab is currently active (highlighted)
​
icon
icon
Icon to display on the tab (from tabler-icons.io)
​
color
color
Color of the tab text and border
​
description
text
Tooltip shown when hovering over the tab
​
class
text
Custom CSS class for the individual tab
​
id
text
HTML identifier for the tab. Used for page anchoring.

​
Examples

​
Basic Tabs

SELECT 'tab' AS component;

SELECT 'Overview' AS title, true AS active;
SELECT 'Details' AS title;
SELECT 'Settings' AS title;

​
Tabs with Icons

SELECT 'tab' AS component;

SELECT 'Home' AS title,
       'home' AS icon,
       true AS active;

SELECT 'Users' AS title,
       'users' AS icon;

SELECT 'Settings' AS title,
       'settings' AS icon;

​
Centered Tabs with Colors

SELECT 'tab' AS component, true AS center;

SELECT 'Hero' AS title,
       '?component=hero#component' AS link,
       'home' AS icon,
       'The hero component' AS description;

SELECT 'Tab' AS title,
       '?component=tab#component' AS link,
       'user' AS icon,
       'purple' AS color,
       true AS active;

SELECT 'Card' AS title,
       '?component=card#component' AS link,
       'credit-card' AS icon;

​
Dynamic Tabs Based on URL Parameter

SELECT 'tab' AS component;

SELECT 'Projects' AS title,
       $tab = 'Projects' AS active;

SELECT 'Tasks' AS title,
       $tab = 'Tasks' AS active;

SELECT 'Reports' AS title,
       $tab = 'Reports' AS active;

-- Display different content based on active tab
SELECT 'table' AS component WHERE $tab = 'Projects' OR $tab IS NULL;
SELECT * FROM projects WHERE $tab = 'Projects' OR $tab IS NULL;

SELECT 'table' AS component WHERE $tab = 'Tasks';
SELECT * FROM tasks WHERE $tab = 'Tasks';

SELECT 'table' AS component WHERE $tab = 'Reports';
SELECT * FROM reports WHERE $tab = 'Reports';

SELECT 'tab' AS component;

SELECT 'Dashboard' AS title,
       '/dashboard.sql' AS link,
       true AS active;

SELECT 'Analytics' AS title,
       '/analytics.sql' AS link;

SELECT 'Reports' AS title,
       '/reports.sql' AS link;

​
Tabs from Database

SELECT 'tab' AS component;

SELECT 
    category_name AS title,
    category_id = COALESCE($category, 1) AS active,
    '?category=' || category_id AS link
FROM categories
ORDER BY display_order;

-- Display products for selected category
SELECT 'card' AS component;

SELECT 
    product_name AS title,
    description,
    image_url AS top_image
FROM products
WHERE category_id = COALESCE($category, 1);

​
Tabs with Anchors

SELECT 'tab' AS component;

SELECT 'Section 1' AS title,
       'section1' AS id,
       true AS active;

SELECT 'Section 2' AS title,
       'section2' AS id;

SELECT 'Section 3' AS title,
       'section3' AS id;

-- Content sections
SELECT 'text' AS component,
       'section1' AS id,
       'Content for section 1' AS contents;

SELECT 'text' AS component,
       'section2' AS id,
       'Content for section 2' AS contents;

SELECT 'text' AS component,
       'section3' AS id,
       'Content for section 3' AS contents;

​
Tabs with Tooltips

SELECT 'tab' AS component;

SELECT 'All' AS title,
       'Show all items' AS description,
       true AS active;

SELECT 'Active' AS title,
       'Show only active items' AS description;

SELECT 'Archived' AS title,
       'Show archived items' AS description;

​
Use Cases

​
Content Organization

Organize related content into logical sections: 
SELECT 'tab' AS component;

SELECT 'About' AS title, $tab = 'About' OR $tab IS NULL AS active;
SELECT 'Services' AS title, $tab = 'Services' AS active;
SELECT 'Contact' AS title, $tab = 'Contact' AS active;

​
Dashboard Views

Switch between different dashboard views: 
SELECT 'tab' AS component;

SELECT 'Overview' AS title,
       'chart-line' AS icon,
       $view = 'overview' OR $view IS NULL AS active;

SELECT 'Sales' AS title,
       'currency-dollar' AS icon,
       $view = 'sales' AS active;

SELECT 'Users' AS title,
       'users' AS icon,
       $view = 'users' AS active;

​
Filter Data

Filter displayed data by category: 
SELECT 'tab' AS component;

SELECT 'All' AS title, $status IS NULL AS active;
SELECT 'Pending' AS title, $status = 'pending' AS active;
SELECT 'Completed' AS title, $status = 'completed' AS active;
SELECT 'Cancelled' AS title, $status = 'cancelled' AS active;

SELECT 'table' AS component;
SELECT * FROM orders
WHERE $status IS NULL OR status = $status;

​
Styling Tips

  • Use icons to make tabs more visually distinct
  • Add tooltips via description for clarification
  • Use color to highlight important tabs
  • Center tabs for symmetrical layouts
  • Keep tab titles short and clear

​
Default Behavior

When no link is specified:
  • Clicking a tab navigates to the current page
  • Adds ?tab={title} to the URL
  • If id is set, adds #{id} as page anchor
  • Scrolls to the tab location after submission
  • button - For button-style navigation
  • shell - For top-level navigation menus
  • breadcrumb - For hierarchical navigation

Build docs developers (and LLMs) love

Get started for freeTalk to us