Tab navigation with alpine JS

This tailwind example is contributed by Mr Robot, on 15-Aug-2022. Component is made with Tailwind v3.4. It is responsive.

Tabs Navigations

Author Mr Robot

Tailwind v3.4 18k 18

Fork Fullscreen

<script src="//unpkg.com/alpinejs"></script>
<div x-data="{ 
            openTab: 1,
            activeClasses: 'border-l border-t border-r rounded-t text-blue-700',
            inactiveClasses: 'text-blue-500 hover:text-blue-700'
        }" class="p-6">
    <ul class="flex border-b">
        <li @click="openTab = 1" :class="{ '-mb-px': openTab === 1 }" class="-mb-px mr-1">
            <a href="#" :class="openTab === 1 ? activeClasses : inactiveClasses"
                class="bg-white inline-block py-2 px-4 font-semibold">
                Active
            </a>
        </li>
        <li @click="openTab = 2" :class="{ '-mb-px': openTab === 2 }" class="mr-1">
            
            <a href="#" :class="openTab === 2 ? activeClasses : inactiveClasses"
                class="bg-white inline-block py-2 px-4 font-semibold">
                Tab
            </a>
        </li>
        <li @click="openTab = 3" :class="{ '-mb-px': openTab === 3 }" class="mr-1">
            <a href="#" :class="openTab === 3 ? activeClasses : inactiveClasses"
                class="bg-white inline-block py-2 px-4 font-semibold">
                Tab
            </a>
        </li>
    </ul>
    <div class="w-full">
        <div x-show="openTab === 1">Tab #1</div>
        <div x-show="openTab === 2">Tab #2</div>
        <div x-show="openTab === 3">Tab #3</div>
    </div>
</div>

Related Examples

Tabs section

Simon Scheffer

3 years ago

14.7k
Tab navigation buttons

Simon Scheffer

3 years ago

18.2k
Working tabs switch

Fagundo67

3 years ago

15.7k
Tab Switch
tab-switching example with tailwind and vanilla JS

Prajwal Hallale

3 years ago

7.9k
Switch tabs button

gmer33

3 years ago

17.2k
Navigation multimenu
navigation menu, multimenu

Anonymous

3 years ago

12.3k
Icon group

Conan Hilton

3 years ago

10.3k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Navbar compoent

Amit Pachange

3 years ago

17.3k
Tab Menu
Tab menu

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

7.2k
Button Group

Prem..

4 years ago

10.5k
Steps for complex forms

Ron Hicks

4 years ago

12.4k
boxed layout
boxed layout- navigaiton

Anonymous

3 years ago

9.6k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.