/

Documentation

/

Tabs

Tabs

The Tabs component offers organized navigation with two or three slots, featuring a smooth sliding indicator to highlight the active tab. Designed for clarity and ease of use, it helps users switch between content sections seamlessly while maintaining a clean, modern look.

2 Slots

Component

Featuring a smooth sliding indicator, it enhances navigation by visually highlighting the active tab—making it easy for users to switch views quickly and intuitively.

Example

Detach the component instance to use it inside other components.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

3 Slots

Component

Featuring a smooth sliding indicator, it enhances navigation by visually highlighting the active tab—making it easy for users to switch views quickly and intuitively.

Example

Detach the component instance to use it inside other components.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

Summary

The Tabs component offers clean, intuitive navigation for switching between content sections. Its smooth sliding indicator highlights the active tab, enhancing user experience with clear visual feedback and seamless transitions across your site.

Create a free website with Framer, the website builder loved by startups, designers and agencies.