How to Toggle a Sidebar in React: Complete Step by Step Guide
By Braincuber Team
Published on March 31, 2026
Sidebars are one of the most common UI elements in web applications. They're used in admin dashboards, navigation menus, settings panels, and much more. One of the best things about building with React is how easily you can add interactivity, like showing and hiding a sidebar, using state and conditional rendering. This complete tutorial will walk you through how to toggle a sidebar in React using simple logic and clean layout styles. Whether you're creating a full dashboard or just learning React layout patterns, this will be a great foundation.
What You'll Learn:
- How to use useState to track sidebar visibility
- How to show and hide UI elements conditionally
- Basic layout and styles for sidebars using Flexbox
- How to build a responsive toggle button
- Best practices for sidebar state management in React
Step 1: Set Up Your React Project
If you don't have a project already, create one using Create React App. This will give you a clean starting point with all the necessary dependencies installed.
npx create-react-app sidebar-toggle-demo
cd sidebar-toggle-demo
npm start
This will start your app at http://localhost:3000. You should see the default React welcome page. Now we're ready to build our sidebar toggle component.
Step 2: Create the Sidebar Layout
We'll build a simple layout with a sidebar, a main content area, and a toggle button to show/hide the sidebar. Replace the content of src/App.js with the following code:
import React, { useState } from 'react';
function App() {
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
const toggleSidebar = () => {
setIsSidebarOpen(!isSidebarOpen);
};
return (
{/* Sidebar */}
{isSidebarOpen && (
Sidebar
- Dashboard
- Settings
- Profile
- Logout
)}
{/* Main Content */}
Welcome to the Dashboard
This is the main content area. Use the button above to toggle the sidebar.
);
}
export default App;
This code creates a complete sidebar toggle implementation. The sidebar appears on the left side with a dark background, and the main content area takes up the remaining space. The toggle button dynamically changes its text based on the sidebar's current state.
Step 3: Understanding How It Works
Let's break down each component of this implementation to understand how the sidebar toggle works in React.
1. State with useState
We create a state variable called isSidebarOpen to track whether the sidebar is visible. The initial value is set to true so the sidebar is shown by default.
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
2. Toggle Function
The toggleSidebar function flips the state between true and false. When called, it sets the state to the opposite of its current value.
const toggleSidebar = () => {
setIsSidebarOpen(!isSidebarOpen);
};
3. Conditional Rendering
We only render the sidebar if isSidebarOpen is true. This is the power of React — we can dynamically render or hide any element based on state.
{isSidebarOpen && (
Sidebar content here
)}
4. Flexbox Layout
The display: 'flex' style puts the sidebar and content side-by-side. When the sidebar is hidden, the content automatically takes full width thanks to the flex: 1 property on the main content div.
| CSS Property | Purpose | Effect |
|---|---|---|
| display: 'flex' | Container layout | Places sidebar and content side-by-side |
| height: '100vh' | Full viewport height | Sidebar and content fill the entire screen height |
| flex: 1 | Content expansion | Main content takes all remaining space when sidebar is hidden |
| transition: '0.3s' | Smooth animation | Adds smooth transition when sidebar appears/disappears |
Step 4: Enhance the Sidebar with Best Practices
Now that we have a working sidebar toggle, let's explore best practices and enhancements you can add to make it production-ready.
Extract to Component
Move the sidebar into its own component file for better code organization and reusability across your application.
Add Navigation Links
Use React Router's Link component for sidebar navigation items to enable client-side routing between pages.
Responsive Design
Add media queries to automatically hide the sidebar on mobile devices and show a hamburger menu toggle instead.
Persist State
Use localStorage to remember the sidebar's open/closed state between page reloads for better user experience.
Pro Tip: Use CSS Transitions for Smooth Animations
Instead of conditionally rendering the sidebar, consider using CSS width transitions with max-width and overflow: hidden for smooth slide-in/slide-out animations. This provides a more polished user experience than instant show/hide.
{/* Sidebar with smooth width transition */}
Sidebar
- Dashboard
- Settings
- Profile
- Logout
Step 5: Test and Verify Your Implementation
After implementing the sidebar toggle, verify that everything works correctly by testing the following scenarios:
Initial State
Verify the sidebar is visible by default when the page loads (since we set useState(true)).
Toggle Hide
Click the "Hide Sidebar" button and verify the sidebar disappears and the button text changes to "Show Sidebar".
Content Expansion
Verify that the main content area expands to fill the full width when the sidebar is hidden.
Toggle Show
Click "Show Sidebar" and verify the sidebar reappears and the main content shifts back to accommodate it.
Next Steps for Learning
Once you've mastered the basic sidebar toggle, explore advanced patterns like nested sidebars, collapsible menu items, and integrating with state management libraries like Redux or Zustand for complex applications.
Frequently Asked Questions
How do I toggle a sidebar in React?
Use the useState hook to track sidebar visibility, create a toggle function that flips the boolean state, and use conditional rendering with {isSidebarOpen &&
What is conditional rendering in React?
Conditional rendering allows you to dynamically show or hide elements based on state or props. The most common pattern uses the && operator: {condition &&
How do I make the sidebar toggle smooth?
Instead of conditionally rendering, use CSS transitions on the width property. Set width to '250px' when open and '0px' when closed, with transition: 'width 0.3s ease' for smooth slide animations.
How do I persist sidebar state across page reloads?
Use localStorage to save the sidebar state. Read from localStorage in your useState initializer: useState(() => JSON.parse(localStorage.getItem('sidebarOpen')) ?? true), and save to localStorage whenever the state changes.
Should I use conditional rendering or CSS for sidebar toggle?
Use conditional rendering for simple show/hide with no animation. Use CSS transitions if you want smooth animations. For complex dashboards, consider combining both: conditional rendering for mobile and CSS transitions for desktop.
Need Help with React Development?
Our experts can help you build responsive React applications, optimize component architecture, and implement modern UI patterns for maximum user engagement and performance.