Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a bottom navigation menu with CSS?
A bottom navigation menu is a fixed navigation bar that stays at the bottom of the viewport. It's commonly used in mobile applications and modern web designs for easy access to main sections. The menu is created using the position: fixed and bottom: 0 CSS properties.
Syntax
nav {
position: fixed;
bottom: 0;
width: 100%;
}
Example: Complete Bottom Navigation Menu
The following example creates a responsive bottom navigation menu with hover effects −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
padding-bottom: 80px;
}
nav {
position: fixed;
bottom: 0;
width: 100%;
background-color: #2c2c2c;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.nav-links {
display: flex;
justify-content: space-around;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.nav-item {
flex: 1;
text-align: center;
}
.nav-link {
display: block;
padding: 15px 10px;
color: #b689fd;
text-decoration: none;
font-size: 14px;
transition: background-color 0.3s ease;
}
.nav-link:hover {
background-color: #4a4a4a;
}
.nav-link.active {
background-color: #001a2b;
color: #ffffff;
}
.content {
height: 200vh;
background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
}
</style>
</head>
<body>
<div class="content">
<h1>Bottom Navigation Demo</h1>
<p>Scroll down to see the fixed bottom navigation menu in action.</p>
<p>This content extends beyond the viewport to demonstrate the fixed positioning.</p>
</div>
<nav>
<ul class="nav-links">
<li class="nav-item"><a href="#" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Search</a></li>
<li class="nav-item"><a href="#" class="nav-link">Profile</a></li>
<li class="nav-item"><a href="#" class="nav-link">Settings</a></li>
</ul>
</nav>
</body>
</html>
A fixed bottom navigation menu with four links (Home, Search, Profile, Settings) appears at the bottom of the page. The Home link is highlighted with a dark blue background, and hovering over other links shows a gray background effect.
Key CSS Properties
| Property | Value | Purpose |
|---|---|---|
position |
fixed |
Keeps menu fixed to viewport |
bottom |
0 |
Positions menu at bottom edge |
width |
100% |
Spans full width of screen |
z-index |
1000 |
Ensures menu stays above other content |
Best Practices
For optimal bottom navigation menus, consider these important points −
- Add
padding-bottomto the body to prevent content from being hidden behind the fixed menu - Use
box-shadowto create visual separation from page content - Implement smooth transitions for hover effects to enhance user experience
- Use flexbox for responsive and evenly distributed menu items
Conclusion
Bottom navigation menus are created using position: fixed and bottom: 0 properties. They provide persistent access to key navigation options and work well for both mobile and desktop interfaces when styled properly.
Updated on: 2026-03-15T14:17:02+05:30
1K+ Views
Advertisements