Expandable Tabs for Bricks Builder

NEW

Library

Visual configurator

SureCart

Resources

Get Started Login

Documentation

v2.0

GETTING STARTED

Installing transitions

MENU ANIMATIONS

New

New

CORE BACKGROUND

Ambient Gradient

Network effect Snowfall

New!

Wave Background

New!

New

SHOWCASE

New

VISUAL EFFECTS

New

New

New

ANIMATED TEXT

New

New

New

INTERACTION

New

Horizontal Parallax

Timeline Gradient Vertical Parallax

INSTANT MOTION

SURECART

Installing templates SureCart 001 Product Page SureCart 002 Product Page SureCart 003 Product Page SureCart 004 Product Page

BUTTONS

Magnetic effect

TRANSITION PAGES

Transition Page 1

Soon

Transition Page 2

Soon

Transition Page 3

Soon

Transition Page 4

Soon

Transition Page 5

Soon

Transition Page 6

Soon

Transition Page 7

Soon

Expandable Tabs Configurator

How to Use in Bricks Builder

Customize your expandable tabs using the controls below
Click the Get Code button and copy the JavaScript
In Bricks Builder, add a Code element and paste the JavaScript
Add the attribute
expandable-tabs📋
to any container element

This tool creates a custom script with your settings built-in. You only need to add the data attribute to implement your expandable tabs effect!

BricksFusion Exclusive Get Your Expandable Tabs Effect

Add an elegant expandable tabs navigation to your website with this custom-crafted JavaScript snippet.

Easy implementation with simple data attributes
Smooth animations with customizable timing
Fully responsive and mobile-friendly
Customizable icons, colors and behaviors
Automatic active page detection

Tab Settings

Style Settings

Background Color

Active Tab Background

Border Color

Primary Color

Border Radius 16px

Tab Height 36px

Animation Settings

Animation Duration 300ms

Animation Delay 50ms

Behavior Settings

Auto-detect Active Page

Automatically highlight the tab for the current page

How it works: When enabled, the menu will automatically detect which page the user is on based on the URL and keep that tab expanded/active. This helps users understand their current location in the navigation.

Expand on Hover

Tabs will expand when hovered instead of clicked

Close on Click Outside

Tabs will close when clicking elsewhere on the page

Collapse on Second Click

Clicking an active tab collapses it

Icon Position

Left

Right