How to create a navbar in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Creating a responsive navigation bar is fundamental for React applications, providing users with clear access to different sections and maintaining consistent branding. As the creator of CoreUI, I’ve implemented navigation systems across countless web applications and UI frameworks. The most effective approach is building a flexible navbar component with mobile menu support and active state management. This ensures optimal user experience across all devices while maintaining accessibility standards.
Use React state and conditional rendering to create a responsive navbar with mobile menu functionality and active link highlighting.
import { useState } from 'react'
import './Navbar.css'
function Navbar() {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
const [activeLink, setActiveLink] = useState('home')
const toggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen)
const handleLinkClick = (link) => {
setActiveLink(link)
setIsMobileMenuOpen(false) // Close mobile menu after selection
}
return (
<nav className="navbar">
<div className="navbar-brand">
<a href="/">MyApp</a>
</div>
<button
className="mobile-toggle"
onClick={toggleMobileMenu}
aria-label="Toggle navigation menu"
>
<span></span>
<span></span>
<span></span>
</button>
<ul className={`navbar-nav ${isMobileMenuOpen ? 'mobile-open' : ''}`}>
<li>
<a
href="/"
className={activeLink === 'home' ? 'active' : ''}
onClick={() => handleLinkClick('home')}
>
Home
</a>
</li>
<li>
<a
href="/about"
className={activeLink === 'about' ? 'active' : ''}
onClick={() => handleLinkClick('about')}
>
About
</a>
</li>
<li>
<a
href="/services"
className={activeLink === 'services' ? 'active' : ''}
onClick={() => handleLinkClick('services')}
>
Services
</a>
</li>
<li>
<a
href="/contact"
className={activeLink === 'contact' ? 'active' : ''}
onClick={() => handleLinkClick('contact')}
>
Contact
</a>
</li>
</ul>
</nav>
)
}
This navbar implementation uses React state to manage both mobile menu visibility and active link highlighting. The hamburger menu button shows/hides navigation links on mobile devices, while the active state provides visual feedback for the current page. The component automatically closes the mobile menu when a link is selected for better user experience.
Best Practice Note:
This is the foundation navbar pattern used in CoreUI’s responsive templates for consistent, professional navigation. Consider integrating with React Router for proper client-side routing and adding dropdown menus for complex navigation hierarchies in larger applications.
