How to create a sidebar in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Creating a sidebar navigation is essential for organizing content and providing intuitive navigation in React applications, especially for dashboards and admin interfaces. With over 25 years of experience in software development and as the creator of CoreUI, I’ve built countless sidebar components for enterprise applications. The most effective approach is using React state to control sidebar visibility with responsive design and proper accessibility features. This provides a professional, user-friendly navigation experience that works seamlessly across all devices.
Use React state with CSS classes to create a toggleable sidebar with responsive behavior and accessibility support.
import { useState } from 'react'
import './Sidebar.css'
function Sidebar() {
const [isOpen, setIsOpen] = useState(false)
const toggleSidebar = () => setIsOpen(!isOpen)
return (
<div className="app">
<button
className="sidebar-toggle"
onClick={toggleSidebar}
aria-label="Toggle sidebar"
>
☰
</button>
<aside className={`sidebar ${isOpen ? 'open' : ''}`}>
<nav>
<ul>
<li><a href="/dashboard">Dashboard</a></li>
<li><a href="/users">Users</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/analytics">Analytics</a></li>
<li><a href="/settings">Settings</a></li>
</ul>
</nav>
</aside>
<main className={`main-content ${isOpen ? 'sidebar-open' : ''}`}>
<h1>Main Content</h1>
<p>Your application content goes here</p>
</main>
</div>
)
}
This sidebar implementation uses React state to control the open/closed state with CSS classes for visual transitions. The toggle button includes proper ARIA labels for screen readers, and the main content area adjusts its layout based on sidebar state. The component structure supports responsive behavior where the sidebar can overlay on mobile or push content on desktop.
Best Practice Note:
This is the same sidebar pattern used in CoreUI’s admin templates for professional dashboard layouts. Consider adding keyboard navigation with arrow keys and escape key handling to enhance accessibility for power users and screen reader compatibility.
