Home
Nick Girga
Material 3 NavBar [Light]

Material 3 NavBar [Light]

A navbar/dock that conforms to Google's Material 3 design guidelines

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

Navigations Navbar

Author Nick Girga

691

Fork Fullscreen

<div class="navbar fixed bottom-0 z-1">
        
        <div class="navbar-container">

<button id="navbar-home"
                class="navbar-item navbar-item-active"
                onclick="window.fakePageChange('navbar-home','Home Page');">
                <div class="navbar-item-icon">
                    <span class="material-symbols-outlined !text-lg">home</span>
                </div>
                Home
            </button>
            
            
            <button id="navbar-search"
                class="navbar-item"
                onclick="window.fakePageChange('navbar-search','Search Page');">
                <div class="navbar-item-icon">
                    <span class="material-symbols-outlined !text-lg">search</span>
                </div>
                Search
            </button>

<button id="navbar-library"
                class="navbar-item"
                onclick="window.fakePageChange('navbar-library','Library Page');">
                <div class="navbar-item-icon">
                    <span class="material-symbols-outlined !text-lg">collections_bookmark</span>
                </div>
                Library
            </button>

<button id="navbar-settings"
                class="navbar-item"
                onclick="window.fakePageChange('navbar-settings','Settings Page');">
                <div class="navbar-item-icon">
                    <span class="material-symbols-outlined !text-lg">settings</span>
                </div>
                Settings
            </button>

</div>
    </div>
</body>

<script>
    // Change the fake page (just a demo for the live preview)
    window.fakePageChange = function(navbarItemId, fakePageHeadingText) {
        // disable all navbar item indicators
        const navbarItems = document.querySelectorAll('.navbar-item');
        for (const item of navbarItems) {
            if (item.classList.contains('navbar-item-active'))
                item.classList.remove('navbar-item-active');
        }

// enable specified navbar item
        document.getElementById(navbarItemId).classList.add('navbar-item-active');

// change fake page heading
        document.getElementById('fake-page-heading').innerHTML = fakePageHeadingText;
    }
</script>

Related Examples