Home
Nick Girga
Elegant Dock

Elegant Dock

Useful Tailwind classes for constructing a basic Dock (usually used on mobile).

This tailwind example is contributed by Nick Girga, on 05-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Navigations Other

Author Nick Girga

673

Fork Fullscreen

<div class="flex flex-col items-center text-center gap-8 my-16">
    <h1 id="fake-example-heading" class="text-4xl font-bold">Home Page</h1>
</div>

<div class="dock fixed z-1">
    
    
    <button class="dock-item dock-item-active"
        id="dock-item-home"
        onclick="window.setCurrentPage('home')">
        <svg
            width="16px"
            height="16px"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            color="currentColor">
            <path
                d="M10 18V15C10 13.8954 10.8954 13 12 13V13C13.1046 13 14 13.8954 14 15V18"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round">
            </path>
            <path
                d="M2 8L11.7317 3.13416C11.9006 3.04971 12.0994 3.0497 12.2683 3.13416L22 8"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round">
            </path>
            <path
                d="M20 11V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V11"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round">
            </path>
        </svg>
        <span class="text-xs">Home</span>
    </button>

<button class="dock-item"
        id="dock-item-inbox"
        onclick="window.setCurrentPage('inbox')">
        <svg
            width="16px"
            height="16px"
            stroke-width="1.5"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            color="currentColor">
            <path
                d="M7 9L12 12.5L17 9"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round">
            </path>
            <path
                d="M2 17V7C2 5.89543 2.89543 5 4 5H20C21.1046 5 22 5.89543 22 7V17C22 18.1046 21.1046 19 20 19H4C2.89543 19 2 18.1046 2 17Z"
                stroke="currentColor"
                stroke-width="1.5">
            </path>
        </svg>
        <span class="text-xs">Inbox</span>
    </button>

<button class="dock-item"
        id="dock-item-settings"
        onclick="window.setCurrentPage('settings')">
        <svg
            width="16px"
            height="16px"
            stroke-width="1.5"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            color="currentColor">
            <path
                d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round">
            </path>
            <path
                d="M19.6224 10.3954L18.5247 7.7448L20 6L18 4L16.2647 5.48295L13.5578 4.36974L12.9353 2H10.981L10.3491 4.40113L7.70441 5.51596L6 4L4 6L5.45337 7.78885L4.3725 10.4463L2 11V13L4.40111 13.6555L5.51575 16.2997L4 18L6 20L7.79116 18.5403L10.397 19.6123L11 22H13L13.6045 19.6132L16.2551 18.5155C16.6969 18.8313 18 20 18 20L20 18L18.5159 16.2494L19.6139 13.598L21.9999 12.9772L22 11L19.6224 10.3954Z"
                stroke="currentColor"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round">
            </path>
        </svg>
        <span class="text-xs">Settings</span>
    </button>
    
</div>

<script>
    // get document objects
    const dockItemHome = document.getElementById('dock-item-home');
    const dockItemInbox = document.getElementById('dock-item-inbox');
    const dockItemSettings = document.getElementById('dock-item-settings');

// set current page
    window.currentPage = 'home';

// update dock item classes
    window.updateDockItemClasses = function() {
        if (window.currentPage == 'home') {
            if (!dockItemHome.classList.contains('dock-item-active')) {
                dockItemHome.classList.add('dock-item-active');
            }
        } else {
            if (dockItemHome.classList.contains('dock-item-active')) {
                dockItemHome.classList.remove('dock-item-active');
            }
        }
        if (window.currentPage == 'inbox') {
            if (!dockItemInbox.classList.contains('dock-item-active')) {
                dockItemInbox.classList.add('dock-item-active');
            }
        } else {
            if (dockItemInbox.classList.contains('dock-item-active')) {
                dockItemInbox.classList.remove('dock-item-active');
            }
        }
        if (window.currentPage == 'settings') {
            if (!dockItemSettings.classList.contains('dock-item-active')) {
                dockItemSettings.classList.add('dock-item-active');
            }
        } else {
            if (dockItemSettings.classList.contains('dock-item-active')) {
                dockItemSettings.classList.remove('dock-item-active');
            }
        }
    }

window.updateFakeHeading = function() {
        const fakeHeading = document.getElementById('fake-example-heading');
        switch(window.currentPage) {
            case 'home':
                fakeHeading.innerHTML = 'Home Page';
                break;
            case 'inbox':
                fakeHeading.innerHTML = 'Inbox Page';

break;
            case 'settings':
                fakeHeading.innerHTML = 'Settings Page';
                break;
        }
    }

// sets the current page
    window.setCurrentPage = function(page) {
        window.currentPage = page;
        window.updateDockItemClasses();
        window.updateFakeHeading();
    }
</script>

Related Examples

navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.3k
Apple Dock Navigation Bar

Author:
Cristian

10 months ago

1.7k
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

6 months ago

1.2k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

5 months ago

886
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

5 months ago

1.4k
NFT Header with Hero

Author:
Abdul Baset Bappy

5 months ago

931
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

Author:
gidy

2 weeks ago

78
delivery
It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

Author:
Nishimwe Jeanine

6 months ago

319
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

2 years ago

17.5k
Responsive Tailwind CSS Navbar
A clean and professional navigation bar built with Tailwind CSS. This component includes a logo, navigation links, and a mobile menu with a toggle button for smaller screens. Fully responsive and easy to integrate into any project. Ideal for portfolios, business websites, or modern web apps.

Author:
irahoza daniel

6 months ago

504
Image Gallery with Alpine.Js

Author:
Maxim

10 months ago

712
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components