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
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
