Expandable Tabs
Expandable tab navigation with icons, smooth animations, and smart navigation (links or scroll). Fully customizable styles, responsive, and interactive.
Made with Workshop
Build your own component with AI
Expandable tab navigation with icons, smooth animations, and smart navigation (links or scroll). Fully customizable styles, responsive, and interactive.
Made with Workshop
Build your own component with AI
The Expandable Tabs Component is a modern, interactive tab navigation system built. It provides an elegant way to organize navigation with expandable labels, animated transitions, and integrated navigation behaviors such as opening links or scrolling to sections.
Each tab supports an icon + label combination, where labels expand smoothly when active, providing a compact yet informative UI. Users can configure each tab for different navigation types: no navigation, external or internal links, or scroll-to-element functionality with adjustable offsets and smooth scrolling.
The component is highly customizable through props and Framer controls, allowing adjustments for active colors, backgrounds, border radius, icon sizes, font styles, gaps, and padding. It also handles outside clicks, automatically deselecting tabs when clicking away.
Key Features:
Animated Tab Expansion: Smooth transitions for icons and labels.
Navigation Types: Link handling (internal/external) or scroll-to-element support with offsets.
Customizable Styling: Colors, spacing, font size, weight, border radius, and padding.
Icon Library: Prebuilt icons (home, bell, settings, etc.) included.
Responsive & Interactive: Hover effects, smooth animations, and compact design.
State Management: Controlled via props with callbacks for onChange and onNavigate.
This component is ideal for dashboards, landing pages, or applications needing compact, animated navigation that enhances user experience while remaining flexible and easy to integrate.
