Skip to main content




Applies only to Traditional Web Apps




  • Edit
  • Use this pattern to display large sets of information which can be split into different areas, while always a click away. The headers can have other widgets, like counters, badges or icons.

    Use the Tabs pattern when you need to separate content into sections with a flat structure. However, avoid using it in large forms.

    How to use

    Fill in the placeholders Header and Content with the Blocks TabsHeaderItem and TabsContentItem, respectively. Use any number of these as you need. In the parameters, specify the initial active tab, along with the Tabs orientation and justification.

    1. Drag Tabs pattern into the preview.

    2. Set your content and publish.


    Input parameters


    Input Name Description Type Mandatory Default Value
    ActiveTab Set the Active Tab Text False none
    Orientation If Vertical, header is displayed side by side to the content; if Horizontal, header is displayed above content. Orientation Identifier False Entities.Orientation.Horizontal
    IsJustified The Tabs Header items are evenly distributed in the line, the first item is on the start and last item on the end. Boolean False 1
    IsRight Aligns the Tabs Header items to right. Only active if the Orientation parameter is set to Vertical. Boolean False False
    ExtendedClass Adds custom style classes to the Tabs Block. Text False none


    Input Name Description Type Mandatory Default Value
    DataTab Sets the name to connect to the TabsContentItem. Should be the same as the paired HeaderItem and unique Text True none


    Input Name Description Type Mandatory Default Value
    DataTab Value that connects with the TabsHeaderItem. Should be the same as the paired ContentItem and unique. Text True none

    Layout and classes

    CSS selectors

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


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

    Change the active header style

    Write the following CSS in the CSS editor and change the yourcolor value: { border-bottom: var( --border-size-m) solid yourcolor; }

    Or using CSS variables: var(--color-yourcolor) example: { background: border-bottom: var( --border-size-m) solid var(--color-red) }

    Add a background color to the tabs

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

    • Was this article helpful?