Expandable Tabs for Bricks Builder

Customize your expandable tabs using the controls below
Choose from 50+ built-in icons or upload your own SVG icons
Click Copy JS to copy the JavaScript code to clipboard
In Bricks Builder, add a Code element
Paste or upload the JavaScript code
To add the effect to any section: go to Section → Style → Attributes, add data-expandable-tabs as attribute name (leave value empty)

Interactive Expandable Tabs Preview

Tab Settings

Style Settings

HEX

HSL

HEX

HSL

HEX

HSL

HEX

HSL

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

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

Documentation

GETTING STARTED

MENU ANIMATIONS

CORE BACKGROUND

SHOWCASE

VISUAL EFFECTS

ANIMATED TEXT

INTERACTION

INSTANT MOTION

SURECART

BUTTONS

TRANSITION PAGES

Expandable Tabs

Select an Icon

Upload Custom SVG

Your Custom Icons