When I first started working with React over eight years ago, creating reusable UI components was always a challenge. One component I often needed was a sidebar, a navigation panel that could collapse, expand, and adapt to different screen sizes.
In this article, I’ll walk you through how to build a clean, responsive React sidebar component from scratch. I’ll share two approaches based on my experience: a simple toggle sidebar using React state and a more advanced version with animations and customizable options.
Build a Custom Sidebar
You might wonder why not use ready-made libraries like React Pro Sidebar or Material UI’s Drawer. While those are great, sometimes you want full control over behavior and styling — especially when you want a sidebar that fits your brand and specific UX needs.
Building your own sidebar lets you:
- Customize the layout and animation exactly how you want
- Keep your bundle size smaller by avoiding heavy dependencies
- Learn React state management and conditional rendering in a practical way
Method 1: Simple Toggle Sidebar with React State
This is the most straightforward way to create a sidebar. You toggle its visibility with a button, and the sidebar slides in and out.
Step 1: Set up Your React Component
Here’s the full code example for a basic sidebar:
import React, { useState } from 'react';
const Sidebar = () => {
const [isOpen, setIsOpen] = useState(false);
const toggleSidebar = () => setIsOpen(!isOpen);
return (
<div style={{ display: 'flex' }}>
{/* Sidebar */}
<div
style={{
width: isOpen ? '250px' : '0',
height: '100vh',
backgroundColor: '#111',
color: '#fff',
overflowX: 'hidden',
transition: '0.3s',
paddingTop: '60px',
position: 'fixed',
top: 0,
left: 0,
zIndex: 1000,
}}
>
<a
href="#"
style={{
padding: '8px 8px 8px 32px',
textDecoration: 'none',
fontSize: '25px',
color: '#fff',
display: isOpen ? 'block' : 'none',
transition: '0.3s',
}}
>
Dashboard
</a>
<a
href="#"
style={{
padding: '8px 8px 8px 32px',
textDecoration: 'none',
fontSize: '25px',
color: '#fff',
display: isOpen ? 'block' : 'none',
transition: '0.3s',
}}
>
Reports
</a>
<a
href="#"
style={{
padding: '8px 8px 8px 32px',
textDecoration: 'none',
fontSize: '25px',
color: '#fff',
display: isOpen ? 'block' : 'none',
transition: '0.3s',
}}
>
Settings
</a>
</div>
{/* Main content */}
<div style={{ marginLeft: isOpen ? '250px' : '0', transition: '0.3s', padding: '16px', width: '100%' }}>
<button onClick={toggleSidebar} style={{ fontSize: '20px', cursor: 'pointer' }}>
{isOpen ? 'Close' : 'Open'} Menu
</button>
<h2>Welcome to Your React App</h2>
<p>This is a simple sidebar example with toggle functionality.</p>
</div>
</div>
);
};
export default Sidebar;You can refer to the screenshot below to see the output.
- The sidebar’s width toggles between 0 and 250px based on the isOpen state.
- Links inside the sidebar appear only when it’s open.
- The main content shifts right when the sidebar is open, creating a smooth slide effect.
- The toggle button changes its label dynamically.
This approach is great for basic apps or prototypes. It’s light, easy to understand, and requires no extra dependencies.
Method 2: Advanced Sidebar with Animation and Customization
For production apps, you might want more polish, like smooth slide animations, overlay backgrounds, and customizable menu items.
Here’s a more advanced sidebar example using CSS transitions and props for flexibility.
Full Code Example
import React, { useState } from 'react';
const Sidebar = ({ menuItems }) => {
const [isOpen, setIsOpen] = useState(false);
const toggleSidebar = () => setIsOpen(!isOpen);
return (
<>
{/* Overlay */}
<div
onClick={toggleSidebar}
style={{
position: 'fixed',
top: 0,
left: 0,
height: '100vh',
width: '100vw',
backgroundColor: 'rgba(0,0,0,0.5)',
opacity: isOpen ? 1 : 0,
visibility: isOpen ? 'visible' : 'hidden',
transition: 'opacity 0.3s ease',
zIndex: 999,
}}
/>
{/* Sidebar */}
<nav
style={{
position: 'fixed',
top: 0,
left: 0,
height: '100vh',
width: '280px',
backgroundColor: '#222',
color: '#fff',
padding: '20px',
transform: isOpen ? 'translateX(0)' : 'translateX(-100%)',
transition: 'transform 0.3s ease',
zIndex: 1000,
boxShadow: '2px 0 5px rgba(0,0,0,0.5)',
}}
>
<button
onClick={toggleSidebar}
style={{
background: 'none',
border: 'none',
color: '#fff',
fontSize: '24px',
cursor: 'pointer',
marginBottom: '20px',
}}
aria-label="Close sidebar"
>
×
</button>
<ul style={{ listStyle: 'none', padding: 0 }}>
{menuItems.map((item, index) => (
<li key={index} style={{ margin: '20px 0' }}>
<a
href={item.link}
style={{ color: '#fff', textDecoration: 'none', fontSize: '18px' }}
>
{item.label}
</a>
</li>
))}
</ul>
</nav>
{/* Main content */}
<div style={{ padding: '20px' }}>
<button
onClick={toggleSidebar}
style={{
fontSize: '18px',
padding: '10px 15px',
cursor: 'pointer',
marginBottom: '20px',
}}
aria-label="Open sidebar"
>
☰ Open Menu
</button>
<h1>Dashboard</h1>
<p>Here’s your main application content. Click the menu button to open the sidebar.</p>
</div>
</>
);
};
// Usage example with menu items for a USA-based business app
const App = () => {
const menuItems = [
{ label: 'Home', link: '#' },
{ label: 'Orders', link: '#' },
{ label: 'Customers', link: '#' },
{ label: 'Reports', link: '#' },
{ label: 'Settings', link: '#' },
];
return <Sidebar menuItems={menuItems} />;
};
export default App;You can refer to the screenshot below to see the output.
What’s Different Here?
- The sidebar slides in and out smoothly using CSS transform.
- An overlay appears behind the sidebar when open, dimming the background and improving focus.
- The menu items are passed as props, making the component reusable and dynamic.
- Accessibility improvements with aria-label on buttons.
- The close button inside the sidebar allows users to close it easily.
Tips From Experience
- Responsive Design: For mobile screens, consider making the sidebar overlay the content rather than pushing it aside.
- Keyboard Accessibility: Add keyboard event handlers to allow closing the sidebar with the Esc key.
- State Management: For larger apps, you might want to manage sidebar state globally with Context or Redux.
- Animations: Use CSS transitions or libraries like Framer Motion for more advanced animations.
- Styling: Use CSS modules or styled-components for scoped styling in bigger projects.
Building a sidebar component in React is a practical way to enhance your app’s navigation. Whether you start with a simple toggle sidebar or move to a more advanced, animated version, the key is to keep the user experience smooth and intuitive.
You may read:
- Open Source React Component Libraries
- MUI React Component Library
- How to Import CSS Files in React Components
- Optimize React Functional Components with React.memo
Bijay Kumar is an experienced Python and AI professional who enjoys helping developers learn modern technologies through practical tutorials and examples. His expertise includes Python development, Machine Learning, Artificial Intelligence, automation, and data analysis using libraries like Pandas, NumPy, TensorFlow, Matplotlib, SciPy, and Scikit-Learn. At PythonGuides.com, he shares in-depth guides designed for both beginners and experienced developers. More about us.
