LIVE NOW

Visual Configurator is now active — Customize 50+ professional animations Visual Configurator is live!

Get Started
Expandable Tabs Configurator

How to Use in Bricks Builder

  1. Customize your expandable tabs using the controls below
  2. Click the Get Code button and copy the JavaScript
  3. In Bricks Builder, add a Code element and paste the JavaScript
  4. 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

JavaScript Code

Select an Icon