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 v3.4. It is responsive.

Navigations Other

Author Nick Girga

Tailwind v3.4 1.3k 1

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

Abid Ullah

2 years ago

3.5k
Apple Dock Navigation Bar

Cristian

1 year ago

3k
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).

Nick Girga

1 year ago

1.8k
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 ,

Rathanak Phan

1 year ago

2k
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.

Lekhraj Ghimire

1 year ago

2.4k
NFT Header with Hero

Abdul Baset Bappy

1 year ago

1.8k
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?

gidy

10 months ago

1.1k
Landi page template
con un cuerpo libre

Raul antonio de la cruz hernandez

8 months ago

910
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

602
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

4 months ago

441
Growing Navigation Menu with Tailwind CSS
PREVIEW ON FULL SCREEN BECAUSE INSIDE THE NAV BAR IT CONTAINS (aria-current="page") which create some issues inside canvas. A clean and minimal vertical navigation menu built with Tailwind CSS featuring smooth line expansion, hover interactions, and active link highlighting. The component uses lightweight CSS transitions with aria-current support for accessible active states, making it ideal for documentation websites, portfolios, dashboards, and landing pages.

Arshid Iqbal

2 months ago

232
Command Palette with Search & Keyboard Navigation

JUGENDRA GANGWAR

4 weeks ago

65