Tabs are an effective way to organize content on your page, keeping it neat and easy to navigate. All content within Reactive’s tabs is fully readable by search engines, ensuring your site remains SEO-friendly.

How to Get Started with the Tabs Element
To use the Tabs Element, simply drag it onto your page. Once added, you’ll see new dropzones within the element where you can place other content elements.

To create new tabs, click the Add button under the Main dropdown menu on the right side of your page. To remove a tab, click the bin icon next to its name. To reorder tabs, simply click and drag them to the desired position.

You can select the layout style of your tabs:

• Fluid – tabs automatically adjust to fit the width of the container, which is useful for responsive designs or varying content lengths.

• Static – tabs maintain a fixed width, ideal for designs where consistent tab size is important.

Tabs Panel Colors
Reactive allows you to customize the visual style of your tabs for both default and hover states:

• Default Colors:

  • Text color

  • Background color

  • Border color

• Hover Colors:

  • Text color

  • Background color

  • Border color

Tips for Using Tabs Effectively:

• Use contrasting text and background colors to make active tabs stand out.

• Reserve hover colors for subtle visual feedback that enhances usability.

• Consider Fluid layout for mobile-friendly pages and Static layout for precise desktop designs.