Bottom Nav Bar
Mobile apps often use a fixed bottom navigation bar. Build it with CSS and jQuery to highlight the active item and smooth-scroll to sections.
jQuery
Intermediate
4 min read
Bottom Navigation Bar
Example
<nav class="position-fixed bottom-0 start-0 end-0 bg-white border-top d-flex d-md-none" style="z-index:1000">
<a class="flex-fill text-center py-2 nav-item active" href="#home"><i class="bi bi-house d-block"></i><small>Home</small></a>
<a class="flex-fill text-center py-2 nav-item" href="#search"><i class="bi bi-search d-block"></i><small>Search</small></a>
<a class="flex-fill text-center py-2 nav-item" href="#profile"><i class="bi bi-person d-block"></i><small>Profile</small></a>
</nav>
<script>
$(".nav-item").on("click", function() { $(".nav-item").removeClass("active"); $(this).addClass("active"); });
</script> Pro Tip
Bottom navigation should have 3-5 items max — beyond that, use a hamburger menu instead.