Tabs & Pills

Use tabs and pills to navigate between different views or panes of content within the same page.

Bootstrap Reference

Quick Start

Tabs require a list of NavItem objects and a list of TabPane objects. FastStrap simplifies this with the Tabs component.

Live Preview

This is Content A

This is Content B

This is Content C

Tabs(
    TabPane("This is Content A", label="Profile"),
    TabPane("This is Content B", label="Settings"),
    TabPane("This is Content C", label="Security")
)

Visual Examples & Use Cases

1. Pills Variant

Pills look like rounded buttons and are often used for filtering or sub-navigation.

Code & Output

Live Preview (Pills)

Tabs(
    TabPane("...", label="Profile"),
    TabPane("...", label="Settings"),
    TabPane("...", label="Security"),
    pills=True
)

2. Vertical Alignment

For sidebar-style navigation, you can stack the nav items vertically.

Code & Output

Tabs(..., vertical=True)

3. HTMX Content Loading

Load tab content only when it's clicked to save initial page load time.

Tabs(
    TabPane(
        Div(hx_get="/api/user-stats", hx_trigger="load"), # Loads on click
        label="Analytics"
    )
)

Components Map

Component	Responsibility
`Tabs`	The main container that handles switching logic.
`TabPane`	A single container of content. Use the `label` argument to define the tab text.

Parameter Reference

FastStrap Param	Type	Bootstrap Class	Description
`pills`	`bool`	`.nav-pills`	Switches from underlined tabs to rounded pills.
`vertical`	`bool`	`.flex-column`	Aligns items vertically.
`fade`	`bool`	`.fade`	Adds transition animation when switching.
`fill`	`bool`	`.nav-fill`	Proportionally fills the entire width.
`justified`	`bool`	`.nav-justified`	Every item has the exact same width.

`faststrap.components.navigation.tabs.Tabs(*items, variant=None, justified=None, fill=None, vertical=None, htmx=None, **kwargs)`

Bootstrap Tabs navigation component.

Parameters:

Name	Type	Description	Default
`*items`	`tuple[str, Any, bool] \| tuple[str, Any]`	Tuples of (id, label) or (id, label, active)	`()`
`variant`	`TabType \| None`	'tabs' or 'pills'	`None`
`justified`	`bool \| None`	Make tabs full width	`None`
`fill`	`bool \| None`	Proportionally fill width	`None`
`vertical`	`bool \| None`	Stack tabs vertically	`None`
`htmx`	`bool \| None`	Enable HTMX-safe behavior	`None`
`**kwargs`	`Any`	Additional HTML attributes	`{}`