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.

<div class="c-paper" data-uid="6a44e36bd2ae3" data-component="paper">
  <div class="c-paper__content">
    <!-- tabs.blade.php -->
    <div class="c-tabs" role="tablist" js-expand-container="" id="id_6a44e36bd2a57" data-uid="6a44e36bd2a66" data-component="tabs">
      <div class="c-tabs__header">
        <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_6a44e36bd2a57-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_6a44e36bd2a57-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_6a44e36bd2a57-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_6a44e36bd2a57-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_6a44e36bd2a57-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_6a44e36bd2a57-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>
</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

<div class="c-paper" data-uid="6a44e36bd2eee" data-component="paper">
  <div class="c-paper__content">
    <!-- tabs.blade.php -->
    <div class="c-tabs" role="tablist" js-expand-container="" id="id_6a44e36bd2e66" data-uid="6a44e36bd2e73" data-component="tabs">
      <div class="c-tabs__header">
        <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_6a44e36bd2e66-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_6a44e36bd2e66-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_6a44e36bd2e66-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_6a44e36bd2e66-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_6a44e36bd2e66-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_6a44e36bd2e66-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>
</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.

<div class="c-paper" data-uid="6a44e36bd3480" data-component="paper">
  <div class="c-paper__content">
    <!-- tabs.blade.php -->
    <div class="c-tabs" role="tablist" js-expand-container="" id="id_6a44e36bd33bb" data-uid="6a44e36bd33c7" data-component="tabs">
      <div class="c-tabs__header">
        <button role="tab" class="c-tabs__button" aria-controls="c-tabs__aria-id_6a44e36bd33bb-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_6a44e36bd33bb-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_6a44e36bd33bb-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_6a44e36bd33bb-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_6a44e36bd33bb-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_6a44e36bd33bb-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_6a44e36bd33bb-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_6a44e36bd33bb-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_6a44e36bd33bb-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_6a44e36bd33bb-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_6a44e36bd33bb-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_6a44e36bd33bb-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_6a44e36bd33bb-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_6a44e36bd33bb-1" aria-hidden="true">
        Doloribus incidunt sapiente inventore unde cumque eum.
      </div>
      <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_6a44e36bd33bb-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_6a44e36bd33bb-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_6a44e36bd33bb-4" aria-hidden="true">
        Doloribus incidunt sapiente inventore unde cumque eum.
      </div>
      <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_6a44e36bd33bb-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_6a44e36bd33bb-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_6a44e36bd33bb-7" aria-hidden="true">
        Doloribus incidunt sapiente inventore unde cumque eum.
      </div>
      <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_6a44e36bd33bb-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_6a44e36bd33bb-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_6a44e36bd33bb-10" aria-hidden="true">
        Doloribus incidunt sapiente inventore unde cumque eum.
      </div>
      <div class="c-tabs__content" role="tabpanel" id="c-tabs__aria-id_6a44e36bd33bb-11" aria-hidden="true">
        Sit architecto corrupti in assumenda nulla totam perspiciatis.
      </div>
    </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

Key	Default value	Type	Available values	Description
id		string	-	ID for the component
componentElement	div	string	-	The tag for the component
tabs	[]	array	-	List containing tabs with tab title and content.
headingElement	button	string	-	-
contentElement	div	string	-	-
id		string	-	The DOM id of the component.
classList	[]	array	-	Array containing wrapping classes array
attributeList	[]	array	-	Array containing keys and values rendered as attributes

Key	Default value	Type	Available 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.

Tabs

Tabs

Tabs with HTML content

About us

Many tabs

Parameters (Blade)

Parameters (CSS)