DocsAllOver Interactive Bottom Navigation Bar Indicator with CSS Snippets

Interactive Bottom Navigation Bar Indicator with CSS

Oct. 30, 2024

HTML, CSS, Js, Animation, Navbar

Full Screen

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar with Indicator</title>
    <!-- Boxicons CSS -->
    <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>
    <nav class="nav">
        <ul class="nav-content">
            <li class="nav-list">
                <a href="#" class="link-item active">
                    <i class='bx bxs-home link-icon'></i>
                    <span class="link-text">Home</span>
                </a>
            </li>
            <li class="nav-list">
                <a href="#" class="link-item">
                    <i class='bx bxs-caret-right-square link-icon'></i>
                    <span class="link-text">Content</span>
                </a>
            </li>
            <li class="nav-list">
                <a href="#" class="link-item">
                    <i class='bx bxs-bar-chart-square link-icon'></i>
                    <span class="link-text">Analytics</span>
                </a>
            </li>
            <li class="nav-list">
                <a href="#" class="link-item">
                    <i class='bx bxs-message-rounded link-icon'></i>
                    <span class="link-text">Comments</span>
                </a>
            </li>
            <li class="nav-list">
                <a href="#" class="link-item">
                    <i class='bx bxs-user link-icon'></i>
                    <span class="link-text">Profile</span>
                </a>
            </li>

            <span class="indicator"></span>
        </ul>
    </nav>
</body>

</html>

/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8540f4;
}
nav{
    border-radius: 12px;
    background: #FFF;
    padding: 0 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.nav-content{
    display: flex;
    height: 120px;
    align-items: center;
    list-style: none;
    position: relative;
}
.link-item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 120px;
    width: 95px;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.link-item.active{
    transform: translateY(-10px);
}
.link-icon{
    font-size: 38px;
    color: #999;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.link-item.active .link-icon{
    color: #8540f4;
}
.link-text{
    position: absolute;
    font-size: 12px;
    font-weight: 500;
    color: #8540f4;
    opacity: 0;
    transform: translateY(32px);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.link-item.active .link-text{
    opacity: 1;
}
.indicator{
    position: absolute;
    top: -14px;
    left: 48px;
    height: 36px;
    width: 36px;
    background-color: #FFF;
    border: 6px solid #8540f4;
    border-radius: 50%;
    transform: translateX(-50%);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.indicator::before,
.indicator::after{
    content: '';
    position: absolute;
    bottom: -8px;
    height: 24px;
    width: 19px;
}
.indicator::before{
    left: -22px;
    background-color: #FFF;
    border-top-right-radius: 25px;
    box-shadow: 1px -13px #8540f4;
}
.indicator::after{
    right: -22px;
    background-color: #FFF;
    border-top-left-radius: 25px;
    box-shadow: -1px -13px #8540f4;
}

const linkItems = document.querySelectorAll(".link-item");

linkItems.forEach((linkItem, index) => {
    linkItem.addEventListener("click", () => {
        document.querySelector(".active").classList.remove("active");
        linkItem.classList.add("active");

        const indicator = document.querySelector(".indicator");

        indicator.style.left = `${index * 95 + 48}px`;
    })
})

This CSS snippet showcases a visually appealing and interactive bottom navigation bar with a dynamic indicator that highlights the currently active tab. The bar features clear icons and text labels for easy navigation.

Key Features:

Responsive Design: The navigation bar adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices.
Customizable Styling: Easily modify the appearance of the navigation bar using CSS to match your website's design and branding.
Interactive Indicator: The indicator highlights the active tab with a visual cue, such as a change in color or border.
Clear Icons and Labels: The icons and text labels clearly represent each navigation item, making it easy for users to understand the purpose of each tab.

Implementation:

Create the HTML Structure: Set up the basic HTML structure for the navigation bar, including the container, navigation items, and the indicator element.
Apply CSS Styles: Use CSS to style the navigation bar, its items, and the indicator. Customize the colors, fonts, and spacing to match your website's design. Implement the CSS for the interactive indicator, which can be done using CSS pseudo-classes like :hover and :active.

By following these steps, you can create a visually appealing and interactive bottom navigation bar that enhances the user experience of your website.

Latest Snippets

View All