Applies only to Traditional Web Apps

Tabs Reference

Collaborate with us

Edit this page on GitHub

Layout and classes

Element	CSS Class	Description
Active Header	.tabs-header-item.active	It's active header (represented as the one with a colored underline)
Active Tab	.tabs-content-item.active	It's active content

Here are some more advanced use-cases of the widget.

Write the following CSS in the CSS editor and change the yourcolor value:

.tabs-header-item.active {
    border-bottom: var( --border-size-m) solid yourcolor;
}

Or using CSS variables: var(--color-yourcolor)

Example:

.tabs-header-item.active {
    background: border-bottom: var( --border-size-m) solid var(--color-red)
}

Enclose the tabs with a container.
Add the classes background-blue-lighter text-neutral-0, this adds a light blue background and force the text to be white.
Publish the application.