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

817

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.5k
Apple Dock Navigation Bar

Author:
Cristian

11 months ago

1.9k
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

7 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

6 months ago

925
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

6 months ago

1.6k
NFT Header with Hero

Author:
Abdul Baset Bappy

6 months ago

1k
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

1 month ago

109
material ios navbar mobile apple endroid
material ios navbar mobile apple endroid

Author:
Omer fils ELENGA

3 weeks ago

60
Moving Background Animation

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

3k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

9 months ago

1.3k
Text Overlay Effect
This is a text overlay effect, featuring a subtle background title and a prominent foreground heading. This design enhances visual interest while maintaining a clean, modern aesthetic.

Author:
Anum Shahana

1 year ago

1.4k
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

8 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components