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

226

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

9 months ago

1.7k
Apple Dock Navigation Bar

Author:
Cristian

5 months ago

852
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

1 month ago

266
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

1 week ago

115
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 days ago

73
NFT Header with Hero

Author:
Abdul Baset Bappy

3 days ago

108
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Author:
Ahita Bisma Adlula

3 months ago

177
Simple dialpad

Author:
Brandon D

2 years ago

10.9k
Energy Efficiency Program - Oklahoma
Code for new IT proposal

Author:
Mario Williams

2 weeks ago

19
random design

Author:
QQ-VVN

1 month ago

56
Team Members

Author:
Abdul Baset Bappy

3 days ago

11
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

2 months ago

738

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components