How to Toggle a Sidebar in React

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.

In this tutorial, we’ll 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

* How to build a responsive toggle button

Step 1: Set Up Your Project

If you don’t have a project already, create one:

npx create-react-app sidebar-toggle-demo
cd sidebar-toggle-demo
npm start

This will start your app at http://localhost:3000.

Step 2: Create the Sidebar Layout

We’ll build a simple layout with:

* A sidebar

* A main content area

* A toggle button to show/hide the sidebar

Replace the content of src/App.js with:

import React, { useState } from 'react';
function App() {
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
  const toggleSidebar = () => {
    setIsSidebarOpen(!isSidebarOpen);
  };
  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      {/* Sidebar */}
      {isSidebarOpen && (
        <div style={{
          width: '250px',
          backgroundColor: '#333',
          color: '#fff',
          padding: '20px',
          transition: '0.3s'
        }}>
          <h2>Sidebar</h2>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            <li>Dashboard</li>
            <li>Settings</li>
            <li>Profile</li>
            <li>Logout</li>
          </ul>
        </div>
      )}
      {/* Main Content */}
      <div style={{ flex: 1, padding: '20px' }}>
        <button onClick={toggleSidebar} style={{
          padding: '10px 20px',
          marginBottom: '20px',
          backgroundColor: '#007bff',
          color: '#fff',
          border: 'none',
          cursor: 'pointer'
        }}>
          {isSidebarOpen ? 'Hide Sidebar' : 'Show Sidebar'}
        </button>
        <h1>Welcome to the Dashboard</h1>
        <p>This is the main content area. Use the button above to toggle the sidebar.</p>
      </div>
    </div>
  );
}
export default App;

How It Works

Let’s break this down:

1. State with useState

We create a state variable called isSidebarOpen to track whether the sidebar is visible:

const [isSidebarOpen, setIsSidebarOpen] = useState(true);

2. Toggle Function

The toggleSidebar function flips the state:

const toggleSidebar = () => {
  setIsSidebarOpen(!isSidebarOpen);
};

3. Conditional Rendering

We only render the sidebar if isSidebarOpen is true:

{isSidebarOpen && <div>Sidebar here</div>}

This is the power of React, we can dynamically render or hide any element based on state.

4. Flexbox Layout

The display: 'flex' style puts the sidebar and content side-by-side. When the sidebar is hidden, the content takes full width.

In this tutorial, we built a simple but powerful sidebar toggle feature using React’s state and conditional rendering. This is one of the most common patterns in dashboard layouts and admin interfaces.

To read more about Overview of React Query for Beginners, refer to our blog Overview of React Query for Beginners.