Tabs

The Tabs component provides a reusable pattern for tabs in the interface.

Tabs

A basic tabs component with three panels. The first tab is open by default; clicking another tab reveals its content.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo autem nihil veritatis natus, nemo numquam aut veniam, accusamus sapiente illum voluptates porro ad laborum repellendus dolore maiores distinctio obcaecati mollitia.

<!-- paper.blade.php -->
<div class="c-paper  " data-uid="69f0d0c38156a" data-component="paper">
    <!-- tabs.blade.php -->
    <div class="c-tabs" role="tablist" js-expand-container id="id_69f0d0c3814b7" data-uid="69f0d0c3814cc" data-component="tabs">
        <div class="c-tabs__header">
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c3814b7-0" aria-expanded="true" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        Tab one
                    </span>
                </button>
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c3814b7-1" aria-expanded="false" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        Tab two
                    </span>
                </button>
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c3814b7-2" aria-expanded="false" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        Tab three
                    </span>
                </button>
                    </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c3814b7-0" aria-hidden="false">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo autem nihil veritatis natus, nemo numquam aut veniam, accusamus sapiente illum voluptates porro ad laborum repellendus dolore maiores distinctio obcaecati mollitia.
            </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c3814b7-1" aria-hidden="true">
                Doloribus incidunt sapiente inventore! Unde cumque eum inventore! Sit architecto, corrupti in assumenda nulla, totam perspiciatis rem libero voluptates consequuntur illum fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c3814b7-2" aria-hidden="true">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus incidunt sapiente inventore! Unde cumque eum inventore! Sit architecto, corrupti in assumenda nulla, totam perspiciatis rem libero voluptates consequuntur illum fuga!
            </div>
            </div>
</div>

@paper
    @tabs([
        'tabs' => [
            [
                'title' => 'Tab one',
                'content' => 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo autem nihil veritatis natus, nemo numquam aut veniam, accusamus sapiente illum voluptates porro ad laborum repellendus dolore maiores distinctio obcaecati mollitia.'
            ],
            [
                'title' => 'Tab two',
                'content' => 'Doloribus incidunt sapiente inventore! Unde cumque eum inventore! Sit architecto, corrupti in assumenda nulla, totam perspiciatis rem libero voluptates consequuntur illum fuga! Lorem ipsum dolor sit amet consectetur adipisicing elit.'
            ],
            [
                'title' => 'Tab three',
                'content' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus incidunt sapiente inventore! Unde cumque eum inventore! Sit architecto, corrupti in assumenda nulla, totam perspiciatis rem libero voluptates consequuntur illum fuga!'
            ],
        ],
    ])
    @endtabs
@endpaper

Tabs with HTML content

Tab content supports raw HTML markup, allowing rich content such as headings, lists, and links inside each panel.

About us

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit architecto corrupti in assumenda nulla.

First point
Second point
Third point

<!-- paper.blade.php -->
<div class="c-paper  " data-uid="69f0d0c381996" data-component="paper">
    <!-- tabs.blade.php -->
    <div class="c-tabs" role="tablist" js-expand-container id="id_69f0d0c38192a" data-uid="69f0d0c381936" data-component="tabs">
        <div class="c-tabs__header">
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c38192a-0" aria-expanded="true" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        About
                    </span>
                </button>
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c38192a-1" aria-expanded="false" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        Contact
                    </span>
                </button>
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c38192a-2" aria-expanded="false" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        Links
                    </span>
                </button>
                    </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c38192a-0" aria-hidden="false">
                <h3>About us</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit architecto corrupti in assumenda nulla.</p><ul><li>First point</li><li>Second point</li><li>Third point</li></ul>
            </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c38192a-1" aria-hidden="true">
                <p>Lorem ipsum dolor sit amet. <a href="#">Learn more</a> about our services.</p>
            </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c38192a-2" aria-hidden="true">
                <ul><li><a href="#">Link one</a></li><li><a href="#">Link two</a></li><li><a href="#">Link three</a></li></ul>
            </div>
            </div>
</div>

@paper
    @tabs([
        'tabs' => [
            [
                'title' => 'About',
                'content' => '<h3>About us</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit architecto corrupti in assumenda nulla.</p><ul><li>First point</li><li>Second point</li><li>Third point</li></ul>'
            ],
            [
                'title' => 'Contact',
                'content' => '<p>Lorem ipsum dolor sit amet. <a href="#">Learn more</a> about our services.</p>'
            ],
            [
                'title' => 'Links',
                'content' => '<ul><li><a href="#">Link one</a></li><li><a href="#">Link two</a></li><li><a href="#">Link three</a></li></ul>'
            ],
        ],
    ])
    @endtabs
@endpaper

Many tabs

When the number of tabs exceeds the available container width, the tab header scrolls horizontally to reveal hidden tabs.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

<!-- paper.blade.php -->
<div class="c-paper  " data-uid="69f0d0c381d7a" data-component="paper">
    <!-- tabs.blade.php -->
    <div class="c-tabs" role="tablist" js-expand-container id="id_69f0d0c381ce3" data-uid="69f0d0c381cee" data-component="tabs">
        <div class="c-tabs__header">
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c381ce3-0" aria-expanded="true" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        January
                    </span>
                </button>
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c381ce3-1" aria-expanded="false" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        February
                    </span>
                </button>
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c381ce3-2" aria-expanded="false" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        March
                    </span>
                </button>
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c381ce3-3" aria-expanded="false" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        April
                    </span>
                </button>
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c381ce3-4" aria-expanded="false" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        May
                    </span>
                </button>
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c381ce3-5" aria-expanded="false" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        June
                    </span>
                </button>
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c381ce3-6" aria-expanded="false" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        July
                    </span>
                </button>
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c381ce3-7" aria-expanded="false" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        August
                    </span>
                </button>
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c381ce3-8" aria-expanded="false" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        September
                    </span>
                </button>
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c381ce3-9" aria-expanded="false" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        October
                    </span>
                </button>
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c381ce3-10" aria-expanded="false" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        November
                    </span>
                </button>
                            <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_69f0d0c381ce3-11" aria-expanded="false" js-expand-button>
                    <span class="c-tabs__button-wrapper" tabindex="-1">
                        December
                    </span>
                </button>
                    </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c381ce3-0" aria-hidden="false">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c381ce3-1" aria-hidden="true">
                Doloribus incidunt sapiente inventore unde cumque eum.
            </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c381ce3-2" aria-hidden="true">
                Sit architecto corrupti in assumenda nulla totam perspiciatis.
            </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c381ce3-3" aria-hidden="true">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c381ce3-4" aria-hidden="true">
                Doloribus incidunt sapiente inventore unde cumque eum.
            </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c381ce3-5" aria-hidden="true">
                Sit architecto corrupti in assumenda nulla totam perspiciatis.
            </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c381ce3-6" aria-hidden="true">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c381ce3-7" aria-hidden="true">
                Doloribus incidunt sapiente inventore unde cumque eum.
            </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c381ce3-8" aria-hidden="true">
                Sit architecto corrupti in assumenda nulla totam perspiciatis.
            </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c381ce3-9" aria-hidden="true">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c381ce3-10" aria-hidden="true">
                Doloribus incidunt sapiente inventore unde cumque eum.
            </div>
                    <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_69f0d0c381ce3-11" aria-hidden="true">
                Sit architecto corrupti in assumenda nulla totam perspiciatis.
            </div>
            </div>
</div>

@paper
    @tabs([
        'tabs' => [
            ['title' => 'January', 'content' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit.'],
            ['title' => 'February', 'content' => 'Doloribus incidunt sapiente inventore unde cumque eum.'],
            ['title' => 'March', 'content' => 'Sit architecto corrupti in assumenda nulla totam perspiciatis.'],
            ['title' => 'April', 'content' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit.'],
            ['title' => 'May', 'content' => 'Doloribus incidunt sapiente inventore unde cumque eum.'],
            ['title' => 'June', 'content' => 'Sit architecto corrupti in assumenda nulla totam perspiciatis.'],
            ['title' => 'July', 'content' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit.'],
            ['title' => 'August', 'content' => 'Doloribus incidunt sapiente inventore unde cumque eum.'],
            ['title' => 'September', 'content' => 'Sit architecto corrupti in assumenda nulla totam perspiciatis.'],
            ['title' => 'October', 'content' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit.'],
            ['title' => 'November', 'content' => 'Doloribus incidunt sapiente inventore unde cumque eum.'],
            ['title' => 'December', 'content' => 'Sit architecto corrupti in assumenda nulla totam perspiciatis.'],
        ],
    ])
    @endtabs
@endpaper

API

Parameter	Default	Description
id		ID for the component
componentElement	div	The tag for the component
tabs	[]	List containing tabs with tab title and content.
headingElement	button	-
contentElement	div	-

CSS API

Variable	Default	Type	Values	Description
--c-tabs--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-tabs--border-width	var(--border-width)	range	-	Size
--c-tabs--color--primary	var(--color--primary)	color	-	Primary
--c-tabs--color--surface-border	var(--color--surface-border)	color	-	Manual companion token for borders on surface elements.
--c-tabs--color--surface-contrast-muted	var(--color--surface-contrast-muted)	color	-	Derived muted contrast for text and icons on surface backgrounds.

Similar components

Tags Table Toast