Tabs

A tab bar that switches between panes already in the page, with the Bootstrap JavaScript bundled in tabler.js.

<twig:Tabler:Tabs>
    <twig:Tabler:Tabs:Item target="tab-overview" active>Overview</twig:Tabler:Tabs:Item>
    <twig:Tabler:Tabs:Item target="tab-activity">Activity</twig:Tabler:Tabs:Item>
    <twig:Tabler:Tabs:Item target="tab-settings">Settings</twig:Tabler:Tabs:Item>
</twig:Tabler:Tabs>
<twig:Tabler:Tabs:Content class="pt-3">
    <twig:Tabler:Tabs:Pane id="tab-overview" active>Jane Cooper is an admin since March 2024.</twig:Tabler:Tabs:Pane>
    <twig:Tabler:Tabs:Pane id="tab-activity">Signed in 2 hours ago from Paris.</twig:Tabler:Tabs:Pane>
    <twig:Tabler:Tabs:Pane id="tab-settings">Two-factor authentication is enabled.</twig:Tabler:Tabs:Pane>
</twig:Tabler:Tabs:Content>

<ul class="nav nav-tabs" data-bs-toggle="tabs" role="tablist">
    <li class="nav-item" role="presentation">
        <a href="#tab-overview" class="nav-link active" data-bs-toggle="tab">Overview</a>
    </li>
    <li class="nav-item" role="presentation">
        <a href="#tab-activity" class="nav-link" data-bs-toggle="tab">Activity</a>
    </li>
    <li class="nav-item" role="presentation">
        <a href="#tab-settings" class="nav-link" data-bs-toggle="tab">Settings</a>
    </li>
</ul>
<div class="tab-content pt-3">
    <div class="tab-pane active show" id="tab-overview" role="tabpanel">Jane Cooper is an admin since March 2024.</div>
    <div class="tab-pane" id="tab-activity" role="tabpanel">Signed in 2 hours ago from Paris.</div>
    <div class="tab-pane" id="tab-settings" role="tabpanel">Two-factor authentication is enabled.</div>
</div>

Tabs renders the bar, Tabs:Content the panes. Each Tabs:Item targets the id of a Tabs:Pane, without the #. Mark the first tab and its pane active.

Tabs: switches between panes in the page, without loading a new page.
Nav: static navigation, each item links to a URL. Use it when each tab is its own page.
Navbar: the header or sidebar of the app.

Pills

pills swaps the tabs for pills:

<twig:Tabler:Tabs pills>
    <twig:Tabler:Tabs:Item target="pills-monthly" active>Monthly</twig:Tabler:Tabs:Item>
    <twig:Tabler:Tabs:Item target="pills-yearly">Yearly</twig:Tabler:Tabs:Item>
</twig:Tabler:Tabs>
<twig:Tabler:Tabs:Content class="pt-3">
    <twig:Tabler:Tabs:Pane id="pills-monthly" active>€29 per user, billed every month.</twig:Tabler:Tabs:Pane>
    <twig:Tabler:Tabs:Pane id="pills-yearly">€290 per user, billed once a year.</twig:Tabler:Tabs:Pane>
</twig:Tabler:Tabs:Content>

<ul class="nav nav-pills" data-bs-toggle="tabs" role="tablist">
    <li class="nav-item" role="presentation">
        <a href="#pills-monthly" class="nav-link active" data-bs-toggle="tab">Monthly</a>
    </li>
    <li class="nav-item" role="presentation">
        <a href="#pills-yearly" class="nav-link" data-bs-toggle="tab">Yearly</a>
    </li>
</ul>
<div class="tab-content pt-3">
    <div class="tab-pane active show" id="pills-monthly" role="tabpanel">€29 per user, billed every month.</div>
    <div class="tab-pane" id="pills-yearly" role="tabpanel">€290 per user, billed once a year.</div>
</div>

Underline, bordered and fill

underline swaps the tabs for underlined links. bordered draws a border under the whole bar and underlines the active tab. fill makes the tabs share the full width. The panes are left out of this example:

<twig:Tabler:Tabs underline class="mb-3">
    <twig:Tabler:Tabs:Item target="underline-members" active>Members</twig:Tabler:Tabs:Item>
    <twig:Tabler:Tabs:Item target="underline-invitations">Invitations</twig:Tabler:Tabs:Item>
    <twig:Tabler:Tabs:Item target="underline-roles">Roles</twig:Tabler:Tabs:Item>
</twig:Tabler:Tabs>
<twig:Tabler:Tabs bordered class="mb-3">
    <twig:Tabler:Tabs:Item target="bordered-members" active>Members</twig:Tabler:Tabs:Item>
    <twig:Tabler:Tabs:Item target="bordered-invitations">Invitations</twig:Tabler:Tabs:Item>
    <twig:Tabler:Tabs:Item target="bordered-roles">Roles</twig:Tabler:Tabs:Item>
</twig:Tabler:Tabs>
<twig:Tabler:Tabs pills fill>
    <twig:Tabler:Tabs:Item target="fill-members" active>Members</twig:Tabler:Tabs:Item>
    <twig:Tabler:Tabs:Item target="fill-invitations">Invitations</twig:Tabler:Tabs:Item>
    <twig:Tabler:Tabs:Item target="fill-roles">Roles</twig:Tabler:Tabs:Item>
</twig:Tabler:Tabs>

<ul class="nav nav-underline mb-3" data-bs-toggle="tabs" role="tablist">
    <li class="nav-item" role="presentation">
        <a href="#underline-members" class="nav-link active" data-bs-toggle="tab">Members</a>
    </li>
    <li class="nav-item" role="presentation">
        <a href="#underline-invitations" class="nav-link" data-bs-toggle="tab">Invitations</a>
    </li>
    <li class="nav-item" role="presentation">
        <a href="#underline-roles" class="nav-link" data-bs-toggle="tab">Roles</a>
    </li>
</ul>
<ul class="nav nav-tabs nav-bordered mb-3" data-bs-toggle="tabs" role="tablist">
    <li class="nav-item" role="presentation">
        <a href="#bordered-members" class="nav-link active" data-bs-toggle="tab">Members</a>
    </li>
    <li class="nav-item" role="presentation">
        <a href="#bordered-invitations" class="nav-link" data-bs-toggle="tab">Invitations</a>
    </li>
    <li class="nav-item" role="presentation">
        <a href="#bordered-roles" class="nav-link" data-bs-toggle="tab">Roles</a>
    </li>
</ul>
<ul class="nav nav-pills nav-fill" data-bs-toggle="tabs" role="tablist">
    <li class="nav-item" role="presentation">
        <a href="#fill-members" class="nav-link active" data-bs-toggle="tab">Members</a>
    </li>
    <li class="nav-item" role="presentation">
        <a href="#fill-invitations" class="nav-link" data-bs-toggle="tab">Invitations</a>
    </li>
    <li class="nav-item" role="presentation">
        <a href="#fill-roles" class="nav-link" data-bs-toggle="tab">Roles</a>
    </li>
</ul>

pills wins over underline when both are set. bordered and fill combine with any style.

In a card

card fits the tab bar in a card header. Put the panes in the card body:

<div class="card">
    <div class="card-header">
        <twig:Tabler:Tabs card>
            <twig:Tabler:Tabs:Item target="card-details" active>Details</twig:Tabler:Tabs:Item>
            <twig:Tabler:Tabs:Item target="card-history">History</twig:Tabler:Tabs:Item>
        </twig:Tabler:Tabs>
    </div>
    <div class="card-body">
        <twig:Tabler:Tabs:Content>
            <twig:Tabler:Tabs:Pane id="card-details" active>Invoice INV-0142, €1,250.00, due on November 1.</twig:Tabler:Tabs:Pane>
            <twig:Tabler:Tabs:Pane id="card-history">Sent on October 2, paid on October 9.</twig:Tabler:Tabs:Pane>
        </twig:Tabler:Tabs:Content>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <a href="#card-details" class="nav-link active" data-bs-toggle="tab">Details</a>
            </li>
            <li class="nav-item" role="presentation">
                <a href="#card-history" class="nav-link" data-bs-toggle="tab">History</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content">
            <div class="tab-pane active show" id="card-details" role="tabpanel">
                Invoice INV-0142, €1,250.00, due on November 1.
            </div>
            <div class="tab-pane" id="card-history" role="tabpanel">Sent on October 2, paid on October 9.</div>
        </div>
    </div>
</div>

Props

Tabs:

Prop	Type	Default	Description
`pills`	bool	`false`	Pills (`nav-pills`) instead of tabs (`nav-tabs`)
`underline`	bool	`false`	Underlined links (`nav-underline`) instead of tabs; ignored with `pills`
`bordered`	bool	`false`	Border under the whole bar, active tab underlined (`nav-bordered`)
`fill`	bool	`false`	Tabs share the full width (`nav-fill`)
`card`	bool	`false`	Tab bar for a card header (`card-header-tabs`)

Other attributes go to the root <ul class="nav" role="tablist">.

Tabs:Item:

Prop	Type	Default	Description
`target`	string	(required)	`id` of the pane it shows, without `#`
`active`	bool	`false`	The tab selected first

Other attributes go to the <a class="nav-link" data-bs-toggle="tab">, not to the <li>.

Tabs:Pane:

Prop	Type	Default	Description
`id`	string	(required)	DOM id, matching the `target` of its `Tabs:Item`
`active`	bool	`false`	The pane shown first (`active show`)

Other attributes go to the <div class="tab-pane">. Tabs:Content has no props: attributes go to its <div class="tab-content">.

Sub-components

Component	Renders
`Tabs:Item`	`<li class="nav-item">` around an `<a href="#target" data-bs-toggle="tab">`
`Tabs:Content`	`<div class="tab-content">`, the container of the panes
`Tabs:Pane`	`<div class="tab-pane" role="tabpanel">`, one pane