Chapter 14: Navbar with Icons
What is a “Navbar with Icons”?
It’s a navigation bar where each menu item has an icon next to (or instead of) the text.
Common places you see this style:
- Mobile apps (bottom nav bars)
- Admin dashboards
- SaaS applications
- Modern marketing websites
- Personal portfolios
- Documentation / developer sites
Most popular styles in 2025–2026
| Style | Where it’s used most | Text visible? | Best screen sizes | Mobile friendly? |
|---|---|---|---|---|
| Icon + Text (side by side) | Dashboards, desktop apps | Yes | Desktop & tablet | Good |
| Icon only (tooltips on hover) | Clean/minimal dashboards | No | Desktop | Needs care |
| Bottom navigation bar (mobile) | Mobile-first apps & websites | Yes (small) | Phones | Excellent |
| Top bar with large icons | Creative agencies, portfolios | Sometimes | Desktop | Medium |
| Hybrid (icons on desktop, text on mobile) | Responsive websites | Conditional | All devices | Very good |
Let’s build the most common and versatile versions step by step.
Version 1 – Classic Top Navbar with Icon + Text (very common)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<header class="header"> <nav class="navbar container"> <!-- Logo --> <a href="/" class="logo">AppName</a> <!-- Main navigation with icons --> <ul class="nav-menu"> <li> <a href="#" class="nav-item active"> <i class="fas fa-home"></i> <span>Home</span> </a> </li> <li> <a href="#" class="nav-item"> <i class="fas fa-compass"></i> <span>Discover</span> </a> </li> <li> <a href="#" class="nav-item"> <i class="fas fa-book-open"></i> <span>Learn</span> </a> </li> <li> <a href="#" class="nav-item"> <i class="fas fa-users"></i> <span>Community</span> </a> </li> </ul> <!-- Right side actions --> <div class="nav-actions"> <a href="#" class="nav-item search"> <i class="fas fa-search"></i> <span>Search</span> </a> <a href="#" class="nav-item profile"> <i class="fas fa-user-circle"></i> <span>Profile</span> </a> </div> <!-- Mobile hamburger --> <button class="hamburger" aria-label="Toggle menu"> <span></span> <span></span> <span></span> </button> </nav> </header> |
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
.navbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; background: white; border-bottom: 1px solid #e5e7eb; max-width: 1400px; margin: 0 auto; } .logo { font-size: 1.5rem; font-weight: 800; color: #111827; text-decoration: none; } .nav-menu { display: flex; list-style: none; gap: 2rem; margin: 0; } .nav-item { display: flex; align-items: center; gap: 8px; color: #374151; text-decoration: none; font-weight: 500; padding: 0.6rem 1rem; border-radius: 6px; transition: all 0.15s ease; } .nav-item:hover { background: #f3f4f6; color: #111827; } .nav-item.active { background: #eff6ff; color: #2563eb; font-weight: 600; } .nav-item i { font-size: 1.2rem; } .nav-actions { display: flex; gap: 1rem; } /* Mobile */ @media (max-width: 768px) { .nav-menu, .nav-actions > *:not(.hamburger) { display: none; } .hamburger { display: flex; flex-direction: column; gap: 5px; } } |
(You’ll need Font Awesome or any icon library: <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css”>)
Version 2 – Icon-only Navbar (with tooltips) – very clean & modern
HTML change
|
0 1 2 3 4 5 6 7 8 |
<a href="#" class="nav-item active" data-tooltip="Home"> <i class="fas fa-home"></i> </a> |
CSS additions
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.nav-item { position: relative; padding: 0.8rem; font-size: 1.35rem; } .nav-item:hover::after, .nav-item:focus::after { content: attr(data-tooltip); position: absolute; bottom: -36px; left: 50%; transform: translateX(-50%); background: #1f2937; color: white; padding: 0.45rem 0.9rem; border-radius: 6px; font-size: 0.82rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; } .nav-item:hover::after, .nav-item:focus::after { opacity: 1; } /* Optional: active indicator below icon */ .nav-item.active::before { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background: #2563eb; border-radius: 50%; } |
Version 3 – Bottom Navigation Bar with Icons (mobile-first style)
This is extremely common in mobile apps and mobile-friendly websites.
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<nav class="bottom-nav"> <a href="#" class="nav-item active"> <i class="fas fa-home"></i> <span>Home</span> </a> <a href="#" class="nav-item"> <i class="fas fa-search"></i> <span>Search</span> </a> <a href="#" class="nav-item add"> <i class="fas fa-plus-circle"></i> </a> <a href="#" class="nav-item"> <i class="fas fa-heart"></i> <span>Favorites</span> </a> <a href="#" class="nav-item"> <i class="fas fa-user"></i> <span>Profile</span> </a> </nav> |
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 70px; background: white; border-top: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-around; box-shadow: 0 -2px 10px rgba(0,0,0,0.08); z-index: 1000; } .nav-item { display: flex; flex-direction: column; align-items: center; color: #6b7280; text-decoration: none; font-size: 0.75rem; gap: 4px; } .nav-item i { font-size: 1.5rem; } .nav-item.active { color: #2563eb; } .nav-item.add { color: white; background: #2563eb; width: 56px; height: 56px; border-radius: 50%; margin-top: -28px; box-shadow: 0 6px 15px rgba(37,99,235,0.35); font-size: 1.8rem; } |
Quick Tips Teachers Always Emphasize
- Minimum touch target: 44×44 px (add padding!)
- Active state is very important: color + background or underline/dot
- Consistent icon size: 20–28px for top nav, 24–32px for bottom nav
- Use aria-label on icon-only items
- Hover + focus styles are mandatory for accessibility
- Font Awesome / Heroicons / Tabler Icons / Lucide — all good free choices
Would you like to go deeper into one of these directions?
Examples:
- Bottom nav bar with badge/notification counter
- Top navbar with icon-only on desktop, text+icon on mobile
- Animated active indicator that slides between items
- Navbar with dropdown menus that have icons
- How to make vertical sidebar with icons (dashboard style)
- How to add dark mode support
- How to use SVG icons instead of icon font
Just tell me what you want to focus on next — I’ll explain it slowly with complete code. 😊
