View as Markdown

Navs and Tabs

Build navigation components and accessible dynamic tabbed interfaces with Bootstrap.

100%
Loading... 
<div>
    <twig:Nav type="tabs" role="tablist" class="mb-3">
        <twig:Nav:Item presentation>
            <twig:Nav:Link tag="button" id="demo-home-tab" target="#demo-home" active>Home</twig:Nav:Link>
        </twig:Nav:Item>
        <twig:Nav:Item presentation>
            <twig:Nav:Link tag="button" id="demo-profile-tab" target="#demo-profile">Profile</twig:Nav:Link>
        </twig:Nav:Item>
        <twig:Nav:Item presentation>
            <twig:Nav:Link tag="button" id="demo-contact-tab" target="#demo-contact">Contact</twig:Nav:Link>
        </twig:Nav:Item>
    </twig:Nav>
    <twig:TabContent>
        <twig:TabPane id="demo-home" labelledBy="demo-home-tab" active fade>Home tab content.</twig:TabPane>
        <twig:TabPane id="demo-profile" labelledBy="demo-profile-tab" fade>Profile tab content.</twig:TabPane>
        <twig:TabPane id="demo-contact" labelledBy="demo-contact-tab" fade>Contact tab content.</twig:TabPane>
    </twig:TabContent>
</div>

Installation

php bin/console ux:install navs-tabs --kit bootstrap

Install the following Composer dependencies:

composer require twig/extra-bundle twig/html-extra:^3.12.0

Install the following front-end dependencies:

npm install bootstrap@^5.3.0
# ...or with Symfony AssetMapper
php bin/console importmap:require bootstrap bootstrap/dist/css/bootstrap.min.css

Copy the following file(s) into your app:

{# @prop tag &#039;ul&#039;|&#039;nav&#039;|&#039;div&#039; The HTML element used for the navigation container. #}
{# @prop type &#039;tabs&#039;|&#039;pills&#039;|&#039;underline&#039;|null The Bootstrap navigation style. #}
{# @prop fill boolean Whether items proportionally fill the available width. #}
{# @prop justified boolean Whether items use equal widths. #}
{# @prop vertical boolean Whether items are stacked vertically. #}
{# @prop align &#039;start&#039;|&#039;center&#039;|&#039;end&#039;|null The horizontal alignment of the navigation items. #}
{# @prop role string|null The ARIA role applied to the navigation container. #}
{# @block content The navigation links or `Nav:Item` components. #}
{%- props
    tag = &#039;ul&#039;,
    type = null,
    fill = false,
    justified = false,
    vertical = false,
    align = null,
    role = null
-%}

{%- set final_tag = tag in [&#039;nav&#039;, &#039;div&#039;] ? tag : &#039;ul&#039; -%}
{%- set nav_classes = html_classes({
    nav: true,
    (&#039;nav-&#039; ~ type): type in [&#039;tabs&#039;, &#039;pills&#039;, &#039;underline&#039;],
    &#039;nav-fill&#039;: fill,
    &#039;nav-justified&#039;: justified,
    &#039;flex-column&#039;: vertical,
    (&#039;justify-content-&#039; ~ align): align in [&#039;start&#039;, &#039;center&#039;, &#039;end&#039;],
}) -%}
{%- set default_attrs = {class: nav_classes} -%}
{%- if role not in [null, &#039;&#039;] -%}
    {%- set default_attrs = default_attrs|merge({role: role}) -%}
{%- endif -%}

&lt;{{ final_tag }} {{ attributes.defaults(default_attrs) }}&gt;
    {%- block content -%}{% endblock -%}
&lt;/{{ final_tag }}&gt;

{# @prop presentation boolean Whether the item has the presentation role in a dynamic tab list. #}
{# @block content The navigation link, typically a `Nav:Link` component. #}
{%- props presentation = false -%}
{%- set default_attrs = {class: &#039;nav-item&#039;} -%}
{%- if presentation -%}
    {%- set default_attrs = default_attrs|merge({role: &#039;presentation&#039;}) -%}
{%- endif -%}

&lt;li {{ attributes.defaults(default_attrs) }}&gt;
    {%- block content -%}{% endblock -%}
&lt;/li&gt;

{# @prop tag &#039;a&#039;|&#039;button&#039; The HTML element used for the navigation control. #}
{# @prop href string|null The destination used by anchor navigation links. #}
{# @prop id string|null The unique identifier of a dynamic tab control. #}
{# @prop target string|null The selector of the associated tab panel. #}
{# @prop toggle &#039;tab&#039;|&#039;pill&#039;|null The Bootstrap JavaScript behavior. #}
{# @prop active boolean Whether the navigation link or tab is active. #}
{# @prop disabled boolean Whether the navigation link or tab is disabled. #}
{# @prop content string The fallback label when no content block is provided. #}
{# @block content The navigation link or tab label. #}
{%- props
    tag = &#039;a&#039;,
    href = &#039;#&#039;,
    id = null,
    target = null,
    toggle = null,
    active = false,
    disabled = false,
    content = &#039;&#039;
-%}

{%- set final_tag = tag == &#039;button&#039; ? &#039;button&#039; : &#039;a&#039; -%}
{%- set link_classes = html_classes(&#039;nav-link&#039;, {
    active: active,
    disabled: disabled,
}) -%}
{%- set default_attrs = {class: link_classes} -%}
{%- if id not in [null, &#039;&#039;] -%}
    {%- set default_attrs = default_attrs|merge({id: id}) -%}
{%- endif -%}
{%- if target not in [null, &#039;&#039;] -%}
    {%- set default_attrs = default_attrs|merge({
        role: &#039;tab&#039;,
        &#039;data-bs-toggle&#039;: toggle in [&#039;tab&#039;, &#039;pill&#039;] ? toggle : &#039;tab&#039;,
        &#039;data-bs-target&#039;: target,
        &#039;aria-controls&#039;: target|trim(&#039;#&#039;),
        &#039;aria-selected&#039;: active ? &#039;true&#039; : &#039;false&#039;,
    }) -%}
{%- elseif active -%}
    {%- set default_attrs = default_attrs|merge({&#039;aria-current&#039;: &#039;page&#039;}) -%}
{%- endif -%}
{%- if final_tag == &#039;button&#039; -%}
    {%- set default_attrs = default_attrs|merge({type: &#039;button&#039;}) -%}
    {%- if disabled -%}
        {%- set default_attrs = default_attrs|merge({disabled: true}) -%}
    {%- endif -%}
{%- elseif disabled -%}
    {%- set default_attrs = default_attrs|merge({&#039;aria-disabled&#039;: &#039;true&#039;, tabindex: &#039;-1&#039;}) -%}
{%- elseif href not in [null, &#039;&#039;] -%}
    {%- set default_attrs = default_attrs|merge({href: href}) -%}
{%- endif -%}

&lt;{{ final_tag }} {{ attributes.defaults(default_attrs) }}&gt;
    {%- block content -%}{{- content -}}{%- endblock -%}
&lt;/{{ final_tag }}&gt;

{# @block content The associated `TabPane` components. #}
&lt;div {{ attributes.defaults({class: &#039;tab-content&#039;}) }}&gt;
    {%- block content -%}{% endblock -%}
&lt;/div&gt;

{# @prop id string The unique identifier targeted by a tab control. #}
{# @prop labelledBy string|null The identifier of the tab control labelling the panel. #}
{# @prop active boolean Whether the panel is initially visible. #}
{# @prop fade boolean Whether the panel uses Bootstrap&#039;s fade transition. #}
{# @block content The tab panel content. #}
{%- props
    id,
    labelledBy = null,
    active = false,
    fade = false
-%}

{%- set pane_classes = html_classes(&#039;tab-pane&#039;, {
    fade: fade,
    show: fade and active,
    active: active,
}) -%}
{%- set default_attrs = {
    class: pane_classes,
    id: id,
    role: &#039;tabpanel&#039;,
    tabindex: &#039;0&#039;,
} -%}
{%- if labelledBy not in [null, &#039;&#039;] -%}
    {%- set default_attrs = default_attrs|merge({&#039;aria-labelledby&#039;: labelledBy}) -%}
{%- endif -%}

&lt;div {{ attributes.defaults(default_attrs) }}&gt;
    {%- block content -%}{% endblock -%}
&lt;/div&gt;

Usage

<twig:Nav>
    <twig:Nav:Item>
        <twig:Nav:Link href="#" active>Active</twig:Nav:Link>
    </twig:Nav:Item>
    <twig:Nav:Item>
        <twig:Nav:Link href="#">Link</twig:Nav:Link>
    </twig:Nav:Item>
    <twig:Nav:Item>
        <twig:Nav:Link disabled>Disabled</twig:Nav:Link>
    </twig:Nav:Item>
</twig:Nav>
<twig:TabContent>
    <twig:TabPane id="demo-home" labelledBy="demo-home-tab" active fade>
        Home tab content.
    </twig:TabPane>
    <twig:TabPane id="demo-profile" labelledBy="demo-profile-tab" fade>
        Profile tab content.
    </twig:TabPane>
    <twig:TabPane id="demo-contact" labelledBy="demo-contact-tab" fade>
        Contact tab content.
    </twig:TabPane>
</twig:TabContent>

Accessibility

Use aria-current="page" for active navigation links. Dynamic tab interfaces instead need role="tablist", role="tab", role="tabpanel", and the aria-selected, aria-controls, and aria-labelledby relationships shown in the examples.

Prefer buttons for dynamic tabs. Do not put role="tablist" directly on a nav landmark; place it on a nested div instead. Vertical tab lists also need aria-orientation="vertical".

Examples

Base nav

Build navigation with list markup or direct links inside a nav element.

100%
Loading... 
<div class="d-flex flex-column gap-3">
    <twig:Nav>
        <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
    </twig:Nav>

    <twig:Nav tag="nav" aria-label="Primary navigation">
        <twig:Nav:Link href="#" active>Active</twig:Nav:Link>
        <twig:Nav:Link href="#">Link</twig:Nav:Link>
        <twig:Nav:Link href="#">Link</twig:Nav:Link>
        <twig:Nav:Link disabled>Disabled</twig:Nav:Link>
    </twig:Nav>
</div>

Horizontal alignment

Align navigation items with Bootstrap flexbox utilities through the align prop.

100%
Loading... 
<div class="d-flex flex-column gap-3">
    <twig:Nav align="center">
        <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
    </twig:Nav>

    <twig:Nav align="end">
        <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
    </twig:Nav>
</div>

Vertical

Stack navigation links vertically with list or landmark markup.

100%
Loading... 
<div class="d-flex gap-5">
    <twig:Nav vertical>
        <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
    </twig:Nav>

    <twig:Nav tag="nav" vertical aria-label="Secondary navigation">
        <twig:Nav:Link href="#" active>Active</twig:Nav:Link>
        <twig:Nav:Link href="#">Link</twig:Nav:Link>
        <twig:Nav:Link href="#">Link</twig:Nav:Link>
        <twig:Nav:Link disabled>Disabled</twig:Nav:Link>
    </twig:Nav>
</div>

Tabs

Apply the static tab appearance to navigation links.

100%
Loading... 
<twig:Nav type="tabs">
    <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
</twig:Nav>

Pills

Render active navigation links with Bootstrap's pill style.

100%
Loading... 
<twig:Nav type="pills">
    <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
</twig:Nav>

Underline

Use the underline style introduced in Bootstrap 5.3.

100%
Loading... 
<twig:Nav type="underline">
    <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
</twig:Nav>

Fill and justify

Fill the available width proportionally or give every navigation item the same width.

100%
Loading... 
<div class="d-flex flex-column gap-3">
    <twig:Nav type="pills" fill>
        <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Much longer nav link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
    </twig:Nav>

    <twig:Nav tag="nav" type="pills" justified aria-label="Equal width navigation">
        <twig:Nav:Link href="#" active>Active</twig:Nav:Link>
        <twig:Nav:Link href="#">Much longer nav link</twig:Nav:Link>
        <twig:Nav:Link href="#">Link</twig:Nav:Link>
        <twig:Nav:Link disabled>Disabled</twig:Nav:Link>
    </twig:Nav>
</div>

Responsive flex

Combine the component with responsive flex utilities for breakpoint-specific layouts.

100%
Loading... 
<twig:Nav tag="nav" type="pills" class="flex-column flex-sm-row" aria-label="Responsive navigation">
    <twig:Nav:Link href="#" active class="flex-sm-fill text-sm-center">Active</twig:Nav:Link>
    <twig:Nav:Link href="#" class="flex-sm-fill text-sm-center">Longer nav link</twig:Nav:Link>
    <twig:Nav:Link href="#" class="flex-sm-fill text-sm-center">Link</twig:Nav:Link>
    <twig:Nav:Link disabled class="flex-sm-fill text-sm-center">Disabled</twig:Nav:Link>
</twig:Nav>

Tabs with dropdowns

Add a Bootstrap dropdown to a static tabs navigation.

100%
Loading... 
<twig:Nav type="tabs">
    <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item class="dropdown">
        <twig:Nav:Link href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">Dropdown</twig:Nav:Link>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
    </twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
</twig:Nav>

Pills with dropdowns

Add a Bootstrap dropdown to a static pills navigation.

100%
Loading... 
<twig:Nav type="pills">
    <twig:Nav:Item><twig:Nav:Link href="#" active>Active</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item class="dropdown">
        <twig:Nav:Link href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">Dropdown</twig:Nav:Link>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
    </twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link href="#">Link</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item><twig:Nav:Link disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
</twig:Nav>

JavaScript tabs

Connect tab buttons to focusable content panels with Bootstrap's Tab plugin.

100%
Loading... 
<twig:Nav type="tabs" role="tablist" class="mb-3">
    <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="home-tab" target="#home-tab-pane" active>Home</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="profile-tab" target="#profile-tab-pane">Profile</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="contact-tab" target="#contact-tab-pane">Contact</twig:Nav:Link></twig:Nav:Item>
    <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="disabled-tab" target="#disabled-tab-pane" disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
</twig:Nav>
<twig:TabContent>
    <twig:TabPane id="home-tab-pane" labelledBy="home-tab" active fade>This is the Home tab content.</twig:TabPane>
    <twig:TabPane id="profile-tab-pane" labelledBy="profile-tab" fade>This is the Profile tab content.</twig:TabPane>
    <twig:TabPane id="contact-tab-pane" labelledBy="contact-tab" fade>This is the Contact tab content.</twig:TabPane>
    <twig:TabPane id="disabled-tab-pane" labelledBy="disabled-tab" fade>This tab is disabled.</twig:TabPane>
</twig:TabContent>

JavaScript nav

Keep the navigation landmark while placing role="tablist" on a nested container.

100%
Loading... 
<nav aria-label="Account sections">
    <twig:Nav tag="div" type="tabs" role="tablist" class="mb-3">
        <twig:Nav:Link tag="button" id="nav-home-tab" target="#nav-home" active>Home</twig:Nav:Link>
        <twig:Nav:Link tag="button" id="nav-profile-tab" target="#nav-profile">Profile</twig:Nav:Link>
        <twig:Nav:Link tag="button" id="nav-contact-tab" target="#nav-contact">Contact</twig:Nav:Link>
        <twig:Nav:Link tag="button" id="nav-disabled-tab" target="#nav-disabled" disabled>Disabled</twig:Nav:Link>
    </twig:Nav>
</nav>
<twig:TabContent>
    <twig:TabPane id="nav-home" labelledBy="nav-home-tab" active fade>This is the Home tab content.</twig:TabPane>
    <twig:TabPane id="nav-profile" labelledBy="nav-profile-tab" fade>This is the Profile tab content.</twig:TabPane>
    <twig:TabPane id="nav-contact" labelledBy="nav-contact-tab" fade>This is the Contact tab content.</twig:TabPane>
    <twig:TabPane id="nav-disabled" labelledBy="nav-disabled-tab" fade>This tab is disabled.</twig:TabPane>
</twig:TabContent>

JavaScript pills

Use the same dynamic tab semantics with Bootstrap's pill appearance.

100%
Loading... 
<div>
    <twig:Nav type="pills" role="tablist" class="mb-3">
        <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="pills-home-tab" target="#pills-home" toggle="pill" active>Home</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="pills-profile-tab" target="#pills-profile" toggle="pill">Profile</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="pills-contact-tab" target="#pills-contact" toggle="pill">Contact</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="pills-disabled-tab" target="#pills-disabled" toggle="pill" disabled>Disabled</twig:Nav:Link></twig:Nav:Item>
    </twig:Nav>
    <twig:TabContent>
        <twig:TabPane id="pills-home" labelledBy="pills-home-tab" active fade>This is the Home pill content.</twig:TabPane>
        <twig:TabPane id="pills-profile" labelledBy="pills-profile-tab" fade>This is the Profile pill content.</twig:TabPane>
        <twig:TabPane id="pills-contact" labelledBy="pills-contact-tab" fade>This is the Contact pill content.</twig:TabPane>
        <twig:TabPane id="pills-disabled" labelledBy="pills-disabled-tab" fade>This pill is disabled.</twig:TabPane>
    </twig:TabContent>
</div>

Vertical pills

Build a vertical dynamic tab interface and expose its orientation to assistive technologies.

100%
Loading... 
<div class="d-flex align-items-start">
    <twig:Nav tag="div" type="pills" vertical role="tablist" class="me-3" aria-orientation="vertical">
        <twig:Nav:Link tag="button" id="vertical-home-tab" target="#vertical-home" toggle="pill" active>Home</twig:Nav:Link>
        <twig:Nav:Link tag="button" id="vertical-profile-tab" target="#vertical-profile" toggle="pill">Profile</twig:Nav:Link>
        <twig:Nav:Link tag="button" id="vertical-disabled-tab" target="#vertical-disabled" toggle="pill" disabled>Disabled</twig:Nav:Link>
        <twig:Nav:Link tag="button" id="vertical-messages-tab" target="#vertical-messages" toggle="pill">Messages</twig:Nav:Link>
        <twig:Nav:Link tag="button" id="vertical-settings-tab" target="#vertical-settings" toggle="pill">Settings</twig:Nav:Link>
    </twig:Nav>
    <twig:TabContent>
        <twig:TabPane id="vertical-home" labelledBy="vertical-home-tab" active fade>Home content.</twig:TabPane>
        <twig:TabPane id="vertical-profile" labelledBy="vertical-profile-tab" fade>Profile content.</twig:TabPane>
        <twig:TabPane id="vertical-disabled" labelledBy="vertical-disabled-tab" fade>Disabled content.</twig:TabPane>
        <twig:TabPane id="vertical-messages" labelledBy="vertical-messages-tab" fade>Messages content.</twig:TabPane>
        <twig:TabPane id="vertical-settings" labelledBy="vertical-settings-tab" fade>Settings content.</twig:TabPane>
    </twig:TabContent>
</div>

Fade effect

Add Bootstrap's fade transition to tab panels. The initially active panel also receives show.

100%
Loading... 
<div class="w-75">
    <twig:Nav type="tabs" role="tablist" class="mb-3">
        <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="fade-home-tab" target="#fade-home" active>Home</twig:Nav:Link></twig:Nav:Item>
        <twig:Nav:Item presentation><twig:Nav:Link tag="button" id="fade-profile-tab" target="#fade-profile">Profile</twig:Nav:Link></twig:Nav:Item>
    </twig:Nav>
    <twig:TabContent>
        <twig:TabPane id="fade-home" labelledBy="fade-home-tab" active fade>The active panel also receives the `show` class.</twig:TabPane>
        <twig:TabPane id="fade-profile" labelledBy="fade-profile-tab" fade>Inactive panels only receive the `fade` class.</twig:TabPane>
    </twig:TabContent>
</div>

API Reference

<twig:Nav>

Prop Type Default
tag 
 'ul'|'nav'|'div' 'ul'
type 
 'tabs'|'pills'|'underline'|null null
fill 
 boolean false
justified 
 boolean false
vertical 
 boolean false
align 
 'start'|'center'|'end'|null null
role 
 string|null null
Block Description
content The navigation links or Nav:Item components.

<twig:Nav:Item>

Prop Type Default
presentation 
 boolean false
Block Description
content The navigation link, typically a Nav:Link component.

<twig:Nav:Link>

Prop Type Default
tag 
 'a'|'button' 'a'
href 
 string|null '#'
id 
 string|null null
target 
 string|null null
toggle 
 'tab'|'pill'|null null
active 
 boolean false
disabled 
 boolean false
content 
 string ''
Block Description
content The navigation link or tab label.

<twig:TabContent>

Block Description
content The associated TabPane components.

<twig:TabPane>

Prop Type Default
id 
 string -
labelledBy 
 string|null null
active 
 boolean false
fade 
 boolean false
Block Description
content The tab panel content.