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

140

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

8 months ago

1.7k
Apple Dock Navigation Bar

Author:
Cristian

4 months ago

803
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

3 weeks ago

135
Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

3 days ago

6
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

3 months ago

534
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

2 months ago

396
Full Page loading overlay

Author:
Bunny

2 years ago

11.2k
boxed layout
boxed layout- navigaiton

Author:
Anonymous

1 year ago

8.5k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

2 months ago

321
Active Beauty Main Page

Author:
Maxim

2 months ago

246
cards
cards with background animation

Author:
Anonymous

1 year ago

10.6k
chat bar
live chat

Author:
gidy

5 days ago

14

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components