DEV Community: William Baker

Building Loading Spinners with react-loader-spinner in React

William Baker — Mon, 19 Jan 2026 16:54:56 +0000

react-loader-spinner is a collection of animated loading spinner components for React applications. It provides a variety of spinner styles to indicate loading states, making it easy to provide visual feedback during async operations. This guide walks through setting up and creating loading spinners using react-loader-spinner with React, from installation to a working implementation. This is part 50 of a series on using react-loader-spinner with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect)
Familiarity with JavaScript/TypeScript
Understanding of async operations

Installation

Install react-loader-spinner using your preferred package manager:

npm install react-loader-spinner

Or with yarn:

yarn add react-loader-spinner

Or with pnpm:

pnpm add react-loader-spinner

After installation, your package.json should include:

{
  "dependencies": {
    "react-loader-spinner": "^5.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

react-loader-spinner requires no additional setup. Import the spinner components and you're ready to use them.

First Example / Basic Usage

Let's create a simple loading spinner. Create a new file src/LoaderExample.jsx:

// src/LoaderExample.jsx
import React, { useState } from 'react';
import { Oval } from 'react-loader-spinner';

function LoaderExample() {
  const [isLoading, setIsLoading] = useState(false);

  const handleLoad = async () => {
    setIsLoading(true);
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 2000));
    setIsLoading(false);
  };

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2>Loading Spinner Example</h2>
      <button
        onClick={handleLoad}
        disabled={isLoading}
        style={{
          padding: '10px 20px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: isLoading ? 'not-allowed' : 'pointer',
          marginBottom: '20px'
        }}
      >
        {isLoading ? 'Loading...' : 'Start Loading'}
      </button>
      {isLoading && (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <Oval
            height={50}
            width={50}
            color="#007bff"
            visible={true}
            ariaLabel="loading"
            secondaryColor="#cccccc"
            strokeWidth={2}
            strokeWidthSecondary={2}
          />
        </div>
      )}
    </div>
  );
}

export default LoaderExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import LoaderExample from './LoaderExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <LoaderExample />
    </div>
  );
}

export default App;

This creates a loading spinner that appears when the button is clicked and disappears after the async operation completes.

Understanding the Basics

react-loader-spinner provides many spinner types:

Oval: Oval-shaped spinner
ThreeDots: Three dots animation
TailSpin: Tail spin animation
Rings: Multiple rings
Puff: Puff animation
Grid: Grid pattern
Audio: Audio waveform
BallTriangle: Ball triangle animation
Bars: Bars animation
Circles: Multiple circles
And many more...

Key concepts:

Spinner Components: Each spinner type is a separate component
Visible Prop: Control visibility with the visible prop
Customization: Size, color, and animation speed can be customized
Accessibility: Use ariaLabel for screen readers
Conditional Rendering: Show/hide spinners based on loading state

Here's an example with different spinner types:

// src/MultipleSpinnersExample.jsx
import React, { useState } from 'react';
import { Oval, ThreeDots, TailSpin, Rings, Puff } from 'react-loader-spinner';

function MultipleSpinnersExample() {
  const [selectedSpinner, setSelectedSpinner] = useState('Oval');

  const spinners = {
    Oval: <Oval height={50} width={50} color="#007bff" visible={true} ariaLabel="loading" />,
    ThreeDots: <ThreeDots height={50} width={50} color="#007bff" visible={true} ariaLabel="loading" />,
    TailSpin: <TailSpin height={50} width={50} color="#007bff" visible={true} ariaLabel="loading" />,
    Rings: <Rings height={50} width={50} color="#007bff" visible={true} ariaLabel="loading" />,
    Puff: <Puff height={50} width={50} color="#007bff" visible={true} ariaLabel="loading" />
  };

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2>Multiple Spinner Types</h2>
      <div style={{ marginBottom: '20px' }}>
        <label>Select Spinner: </label>
        <select
          value={selectedSpinner}
          onChange={(e) => setSelectedSpinner(e.target.value)}
          style={{ padding: '5px', marginLeft: '10px' }}
        >
          {Object.keys(spinners).map(type => (
            <option key={type} value={type}>{type}</option>
          ))}
        </select>
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '200px' }}>
        {spinners[selectedSpinner]}
      </div>
    </div>
  );
}

export default MultipleSpinnersExample;

Practical Example / Building Something Real

Let's build a comprehensive loading system with different spinner types and use cases:

// src/LoadingSystem.jsx
import React, { useState } from 'react';
import { Oval, ThreeDots, TailSpin, Rings } from 'react-loader-spinner';

function LoadingSystem() {
  const [loadingStates, setLoadingStates] = useState({
    button: false,
    page: false,
    inline: false,
    overlay: false
  });

  const simulateApiCall = async (type) => {
    setLoadingStates(prev => ({ ...prev, [type]: true }));
    await new Promise(resolve => setTimeout(resolve, 2000));
    setLoadingStates(prev => ({ ...prev, [type]: false }));
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>Loading System Examples</h1>

      {/* Button Loading */}
      <section style={{ marginBottom: '40px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h2>Button Loading</h2>
        <button
          onClick={() => simulateApiCall('button')}
          disabled={loadingStates.button}
          style={{
            padding: '10px 20px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: loadingStates.button ? 'not-allowed' : 'pointer',
            display: 'flex',
            alignItems: 'center',
            gap: '10px'
          }}
        >
          {loadingStates.button && (
            <Oval
              height={20}
              width={20}
              color="white"
              visible={true}
              ariaLabel="loading"
            />
          )}
          {loadingStates.button ? 'Loading...' : 'Submit'}
        </button>
      </section>

      {/* Inline Loading */}
      <section style={{ marginBottom: '40px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h2>Inline Loading</h2>
        <button
          onClick={() => simulateApiCall('inline')}
          style={{
            padding: '10px 20px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            marginBottom: '20px'
          }}
        >
          Load Data
        </button>
        {loadingStates.inline ? (
          <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
            <TailSpin
              height={40}
              width={40}
              color="#007bff"
              visible={true}
              ariaLabel="loading"
            />
          </div>
        ) : (
          <div style={{ padding: '20px', backgroundColor: '#f8f9fa', borderRadius: '4px' }}>
            <p>Data loaded successfully!</p>
          </div>
        )}
      </section>

      {/* Page Loading */}
      <section style={{ marginBottom: '40px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h2>Page Loading</h2>
        <button
          onClick={() => simulateApiCall('page')}
          style={{
            padding: '10px 20px',
            backgroundColor: '#ffc107',
            color: 'black',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Load Page Content
        </button>
        {loadingStates.page && (
          <div style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            zIndex: 1000
          }}>
            <div style={{ textAlign: 'center' }}>
              <Rings
                height={80}
                width={80}
                color="#007bff"
                visible={true}
                ariaLabel="loading"
              />
              <p style={{ marginTop: '20px', fontSize: '18px' }}>Loading page content...</p>
            </div>
          </div>
        )}
      </section>

      {/* Overlay Loading */}
      <section style={{ marginBottom: '40px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px', position: 'relative' }}>
        <h2>Overlay Loading</h2>
        <button
          onClick={() => simulateApiCall('overlay')}
          style={{
            padding: '10px 20px',
            backgroundColor: '#dc3545',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Process Data
        </button>
        <div style={{
          padding: '20px',
          backgroundColor: '#f8f9fa',
          borderRadius: '4px',
          marginTop: '20px',
          minHeight: '200px'
        }}>
          <p>Content area that can be overlaid with a loading spinner.</p>
        </div>
        {loadingStates.overlay && (
          <div style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            borderRadius: '8px'
          }}>
            <ThreeDots
              height={50}
              width={50}
              color="#ffffff"
              visible={true}
              ariaLabel="loading"
            />
          </div>
        )}
      </section>
    </div>
  );
}

export default LoadingSystem;

Now create a reusable loading hook:

// src/hooks/useLoading.js
import { useState, useCallback } from 'react';

export const useLoading = (initialState = false) => {
  const [isLoading, setIsLoading] = useState(initialState);

  const startLoading = useCallback(() => {
    setIsLoading(true);
  }, []);

  const stopLoading = useCallback(() => {
    setIsLoading(false);
  }, []);

  const withLoading = useCallback(async (asyncFn) => {
    setIsLoading(true);
    try {
      const result = await asyncFn();
      return result;
    } finally {
      setIsLoading(false);
    }
  }, []);

  return {
    isLoading,
    startLoading,
    stopLoading,
    withLoading
  };
};

Create a component using the hook:

// src/LoadingWithHook.jsx
import React from 'react';
import { useLoading } from './hooks/useLoading';
import { Oval } from 'react-loader-spinner';

function LoadingWithHook() {
  const { isLoading, withLoading } = useLoading();

  const fetchData = async () => {
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 2000));
    return { data: 'Loaded data' };
  };

  const handleClick = async () => {
    const result = await withLoading(fetchData);
    console.log(result);
  };

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2>Loading with Custom Hook</h2>
      <button
        onClick={handleClick}
        disabled={isLoading}
        style={{
          padding: '10px 20px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: isLoading ? 'not-allowed' : 'pointer',
          marginBottom: '20px'
        }}
      >
        {isLoading ? 'Loading...' : 'Fetch Data'}
      </button>
      {isLoading && (
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <Oval
            height={50}
            width={50}
            color="#007bff"
            visible={true}
            ariaLabel="loading"
          />
        </div>
      )}
    </div>
  );
}

export default LoadingWithHook;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import LoadingSystem from './LoadingSystem';
import LoadingWithHook from './LoadingWithHook';
import './App.css';

function App() {
  return (
    <div className="App">
      <LoadingSystem />
      <LoadingWithHook />
    </div>
  );
}

export default App;

This example demonstrates:

Multiple spinner types
Button loading states
Inline loading indicators
Page-level loading
Overlay loading
Custom loading hook
Async operation handling

Common Issues / Troubleshooting

Spinner not displaying: Make sure the visible prop is set to true. Also check that the component is being rendered (not conditionally hidden).
Spinner too small or large: Adjust the height and width props to control the spinner size. These values are in pixels.
Color not changing: Use the color prop to set the spinner color. It accepts any valid CSS color value (hex, rgb, named colors).
Spinner not animating: Ensure the visible prop is true. The spinner only animates when visible.
Multiple spinners: You can use multiple spinner instances on the same page. Each spinner manages its own visibility independently.
Accessibility: Always provide an ariaLabel prop for screen readers. This helps users with assistive technologies understand what's loading.

Next Steps

Now that you have an understanding of react-loader-spinner:

Explore all available spinner types
Learn about advanced customization options
Implement loading states in forms and data fetching
Add loading indicators to async operations
Create custom loading components
Learn about other loading libraries (react-spinners, react-loading)
Check the official repository: https://github.com/mhnpd/react-loader-spinner
Look for part 51 of this series for more advanced topics

Summary

You've successfully set up react-loader-spinner in your React application and created loading indicators for buttons, inline content, page loading, and overlays. react-loader-spinner provides a variety of spinner types to indicate loading states with minimal configuration.

SEO Keywords

react-loader-spinner
React loading spinner
react-loader-spinner tutorial
React loading indicator
react-loader-spinner installation
React spinner component
react-loader-spinner example
React async loading
react-loader-spinner setup
React loading states
react-loader-spinner customization
React spinner types
react-loader-spinner hooks
React loading library
react-loader-spinner getting started

Getting Started with React TabTab: Building Tab Interfaces

William Baker — Mon, 19 Jan 2026 16:53:55 +0000

React TabTab is a simple and flexible library for creating tab interfaces in React applications. It provides an easy way to organize content into tabs with minimal configuration, making it perfect for beginners who want to add tabbed navigation to their apps quickly. This guide walks through setting up and creating tab interfaces using React TabTab with React, from installation to a working implementation. This is part 49 of a series on using React TabTab with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React components
Familiarity with JavaScript/TypeScript

Installation

Install React TabTab using your preferred package manager:

npm install react-tabtab

Or with yarn:

yarn add react-tabtab

Or with pnpm:

pnpm add react-tabtab

After installation, your package.json should include:

{
  "dependencies": {
    "react-tabtab": "^3.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React TabTab requires minimal setup. Import the component and you're ready to use it.

First Example / Basic Usage

Let's create a simple tab interface. Create a new file src/TabTabExample.jsx:

// src/TabTabExample.jsx
import React from 'react';
import { Tabs, TabList, Tab, TabPanel } from 'react-tabtab';

function TabTabExample() {
  return (
    <div style={{ padding: '20px' }}>
      <h2>Basic Tabs Example</h2>
      <Tabs>
        <TabList>
          <Tab>Tab 1</Tab>
          <Tab>Tab 2</Tab>
          <Tab>Tab 3</Tab>
        </TabList>
        <TabPanel>
          <h3>Content for Tab 1</h3>
          <p>This is the content of the first tab.</p>
        </TabPanel>
        <TabPanel>
          <h3>Content for Tab 2</h3>
          <p>This is the content of the second tab.</p>
        </TabPanel>
        <TabPanel>
          <h3>Content for Tab 3</h3>
          <p>This is the content of the third tab.</p>
        </TabPanel>
      </Tabs>
    </div>
  );
}

export default TabTabExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import TabTabExample from './TabTabExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <TabTabExample />
    </div>
  );
}

export default App;

This creates a basic tab interface with three tabs and their corresponding content panels.

Understanding the Basics

React TabTab uses a simple component structure:

Tabs: Main container component
TabList: Container for tab buttons
Tab: Individual tab button
TabPanel: Content panel for each tab
Automatic state: Manages tab state internally
Simple API: Minimal configuration needed

Key concepts:

Component Structure: Tabs contain TabList and TabPanel components
Tab Order: The order of Tab components should match TabPanel components
Content Display: Only the active tab's panel is displayed
Default Tab: First tab is active by default
Styling: Can be customized with CSS

Here's an example with custom styling:

// src/StyledTabsExample.jsx
import React from 'react';
import { Tabs, TabList, Tab, TabPanel } from 'react-tabtab';

function StyledTabsExample() {
  return (
    <div style={{ padding: '20px' }}>
      <h2>Styled Tabs Example</h2>
      <Tabs>
        <TabList style={{
          display: 'flex',
          borderBottom: '2px solid #ddd',
          marginBottom: '20px',
          padding: 0
        }}>
          <Tab style={{
            padding: '10px 20px',
            cursor: 'pointer',
            border: 'none',
            backgroundColor: 'transparent',
            borderBottom: '2px solid transparent',
            marginRight: '10px'
          }}>
            Home
          </Tab>
          <Tab style={{
            padding: '10px 20px',
            cursor: 'pointer',
            border: 'none',
            backgroundColor: 'transparent',
            borderBottom: '2px solid transparent',
            marginRight: '10px'
          }}>
            About
          </Tab>
          <Tab style={{
            padding: '10px 20px',
            cursor: 'pointer',
            border: 'none',
            backgroundColor: 'transparent',
            borderBottom: '2px solid transparent',
            marginRight: '10px'
          }}>
            Contact
          </Tab>
        </TabList>
        <TabPanel>
          <div style={{ padding: '20px', backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
            <h3>Home Content</h3>
            <p>Welcome to the home page.</p>
          </div>
        </TabPanel>
        <TabPanel>
          <div style={{ padding: '20px', backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
            <h3>About Content</h3>
            <p>Learn more about us.</p>
          </div>
        </TabPanel>
        <TabPanel>
          <div style={{ padding: '20px', backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
            <h3>Contact Content</h3>
            <p>Get in touch with us.</p>
          </div>
        </TabPanel>
      </Tabs>
    </div>
  );
}

export default StyledTabsExample;

Practical Example / Building Something Real

Let's build a complete tabbed interface with different content types:

// src/TabbedInterface.jsx
import React, { useState } from 'react';
import { Tabs, TabList, Tab, TabPanel } from 'react-tabtab';

function TabbedInterface() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Form submitted!');
    setFormData({ name: '', email: '', message: '' });
  };

  const dataItems = [
    { id: 1, title: 'Item 1', description: 'Description for item 1' },
    { id: 2, title: 'Item 2', description: 'Description for item 2' },
    { id: 3, title: 'Item 3', description: 'Description for item 3' }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>Tabbed Interface</h1>
      <Tabs>
        <TabList style={{
          display: 'flex',
          borderBottom: '2px solid #ddd',
          marginBottom: '20px',
          padding: 0
        }}>
          <Tab style={{
            padding: '10px 20px',
            cursor: 'pointer',
            border: 'none',
            backgroundColor: 'transparent',
            borderBottom: '2px solid transparent',
            marginRight: '10px',
            fontWeight: '500'
          }}>
            Form
          </Tab>
          <Tab style={{
            padding: '10px 20px',
            cursor: 'pointer',
            border: 'none',
            backgroundColor: 'transparent',
            borderBottom: '2px solid transparent',
            marginRight: '10px',
            fontWeight: '500'
          }}>
            Data
          </Tab>
          <Tab style={{
            padding: '10px 20px',
            cursor: 'pointer',
            border: 'none',
            backgroundColor: 'transparent',
            borderBottom: '2px solid transparent',
            marginRight: '10px',
            fontWeight: '500'
          }}>
            Info
          </Tab>
        </TabList>

        <TabPanel>
          <div style={{
            padding: '30px',
            border: '1px solid #ddd',
            borderRadius: '8px',
            backgroundColor: '#f8f9fa'
          }}>
            <h2>Contact Form</h2>
            <form onSubmit={handleSubmit}>
              <div style={{ marginBottom: '16px' }}>
                <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
                  Name
                </label>
                <input
                  type="text"
                  name="name"
                  value={formData.name}
                  onChange={handleInputChange}
                  style={{
                    width: '100%',
                    padding: '8px',
                    border: '1px solid #ddd',
                    borderRadius: '4px',
                    boxSizing: 'border-box'
                  }}
                />
              </div>
              <div style={{ marginBottom: '16px' }}>
                <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
                  Email
                </label>
                <input
                  type="email"
                  name="email"
                  value={formData.email}
                  onChange={handleInputChange}
                  style={{
                    width: '100%',
                    padding: '8px',
                    border: '1px solid #ddd',
                    borderRadius: '4px',
                    boxSizing: 'border-box'
                  }}
                />
              </div>
              <div style={{ marginBottom: '16px' }}>
                <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
                  Message
                </label>
                <textarea
                  name="message"
                  value={formData.message}
                  onChange={handleInputChange}
                  rows={4}
                  style={{
                    width: '100%',
                    padding: '8px',
                    border: '1px solid #ddd',
                    borderRadius: '4px',
                    boxSizing: 'border-box',
                    resize: 'vertical'
                  }}
                />
              </div>
              <button
                type="submit"
                style={{
                  padding: '10px 20px',
                  backgroundColor: '#007bff',
                  color: 'white',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
              >
                Submit
              </button>
            </form>
          </div>
        </TabPanel>

        <TabPanel>
          <div style={{
            padding: '30px',
            border: '1px solid #ddd',
            borderRadius: '8px',
            backgroundColor: '#f8f9fa'
          }}>
            <h2>Data List</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
              {dataItems.map(item => (
                <div
                  key={item.id}
                  style={{
                    padding: '15px',
                    backgroundColor: 'white',
                    borderRadius: '4px',
                    border: '1px solid #ddd'
                  }}
                >
                  <h3 style={{ margin: '0 0 5px 0' }}>{item.title}</h3>
                  <p style={{ margin: 0, color: '#666' }}>{item.description}</p>
                </div>
              ))}
            </div>
          </div>
        </TabPanel>

        <TabPanel>
          <div style={{
            padding: '30px',
            border: '1px solid #ddd',
            borderRadius: '8px',
            backgroundColor: '#f8f9fa'
          }}>
            <h2>Information</h2>
            <p>This is the information tab. You can add any content here.</p>
            <ul>
              <li>Feature 1: Easy to use</li>
              <li>Feature 2: Flexible styling</li>
              <li>Feature 3: Simple API</li>
            </ul>
          </div>
        </TabPanel>
      </Tabs>
    </div>
  );
}

export default TabbedInterface;

Add custom styles in App.css:

/* src/App.css */
.react-tabtab-tab {
  transition: all 0.3s;
}

.react-tabtab-tab:hover {
  background-color: #f8f9fa;
}

.react-tabtab-tab-active {
  border-bottom-color: #007bff !important;
  color: #007bff;
}

Update your App.jsx:

// src/App.jsx
import React from 'react';
import TabbedInterface from './TabbedInterface';
import './App.css';

function App() {
  return (
    <div className="App">
      <TabbedInterface />
    </div>
  );
}

export default App;

This example demonstrates:

Tabbed interface with multiple content types
Form in a tab panel
Data display in a tab panel
Information panel in a tab
Custom styling
State management within tabs

Common Issues / Troubleshooting

Tabs not switching: Make sure you have the same number of Tab components as TabPanel components. The order should match.
Content not displaying: Ensure TabPanel components are placed after TabList and inside the Tabs component.
Styling not applying: Use inline styles or CSS classes to customize the appearance. Check that your CSS is being loaded correctly.
Tabs not aligned: Use flexbox or CSS Grid to align tabs properly. The TabList can be styled as a flex container.
Active tab not highlighted: Add custom styles for the active tab state. You may need to use CSS classes or inline styles based on the active state.
Multiple tab instances: Each Tabs component manages its own state independently. You can have multiple tab instances on the same page.

Next Steps

Now that you have a basic understanding of React TabTab:

Learn about advanced tab configurations
Explore custom tab styling and theming
Implement tab state management
Add animations and transitions
Integrate with React Router for navigation
Learn about other tab libraries (react-tabs, reach-ui tabs)
Check the official repository:

Look for part 50 of this series for more advanced topics

Summary

You've successfully set up React TabTab in your React application and created tabbed interfaces with forms, data display, and information panels. React TabTab provides a simple solution for organizing content into tabs with minimal configuration.

SEO Keywords

react-tabtab
React tab component
react-tabtab tutorial
React tab interface
react-tabtab installation
React accessible tabs
react-tabtab example
React tab navigation
react-tabtab setup
React simple tabs
react-tabtab customization
React tab library
react-tabtab styling
React tab panels
react-tabtab getting started

Advanced Tab Interfaces with react-tabs in React

William Baker — Mon, 19 Jan 2026 16:51:27 +0000

react-tabs is a flexible and accessible library for creating tab interfaces in React applications. It provides a complete tab system with keyboard navigation, ARIA attributes, and extensive customization options. This guide walks through advanced usage of react-tabs with React, including custom configurations, controlled tabs, and complex tab patterns. This is part 48 of a series on using react-tabs with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useCallback)
Familiarity with JavaScript/TypeScript
Understanding of CSS for styling

Installation

Install react-tabs using your preferred package manager:

npm install react-tabs

Or with yarn:

yarn add react-tabs

Or with pnpm:

pnpm add react-tabs

After installation, your package.json should include:

{
  "dependencies": {
    "react-tabs": "^5.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Import react-tabs styles in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'react-tabs/style/react-tabs.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple tab interface. Create a new file src/TabsExample.jsx:

// src/TabsExample.jsx
import React from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

function TabsExample() {
  return (
    <div style={{ padding: '20px' }}>
      <h2>Basic Tabs Example</h2>
      <Tabs>
        <TabList>
          <Tab>Tab 1</Tab>
          <Tab>Tab 2</Tab>
          <Tab>Tab 3</Tab>
        </TabList>

        <TabPanel>
          <h3>Content for Tab 1</h3>
          <p>This is the content of the first tab.</p>
        </TabPanel>
        <TabPanel>
          <h3>Content for Tab 2</h3>
          <p>This is the content of the second tab.</p>
        </TabPanel>
        <TabPanel>
          <h3>Content for Tab 3</h3>
          <p>This is the content of the third tab.</p>
        </TabPanel>
      </Tabs>
    </div>
  );
}

export default TabsExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import TabsExample from './TabsExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <TabsExample />
    </div>
  );
}

export default App;

This creates a basic tab interface with three tabs and their corresponding content panels.

Understanding the Basics

react-tabs provides several key components:

Tabs: Main container component
TabList: Container for tab buttons
Tab: Individual tab button
TabPanel: Content panel for each tab
Controlled mode: Manage tab state externally
Keyboard navigation: Built-in arrow key navigation
Accessibility: Full ARIA support

Key concepts for advanced usage:

Controlled Tabs: Use selectedIndex and onSelect for controlled behavior
Default Index: Set initial tab with defaultIndex prop
Disabled Tabs: Disable specific tabs with disabled prop
Custom Styling: Override default styles with CSS classes
Event Handlers: Use onSelect to handle tab changes

Here's an example with controlled tabs and custom styling:

// src/ControlledTabsExample.jsx
import React, { useState } from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

function ControlledTabsExample() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  const handleSelect = (index) => {
    setSelectedIndex(index);
    console.log(`Selected tab: ${index}`);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Controlled Tabs Example</h2>
      <Tabs selectedIndex={selectedIndex} onSelect={handleSelect}>
        <TabList>
          <Tab>Home</Tab>
          <Tab>About</Tab>
          <Tab disabled>Disabled</Tab>
          <Tab>Contact</Tab>
        </TabList>

        <TabPanel>
          <h3>Home Content</h3>
          <p>Welcome to the home page.</p>
        </TabPanel>
        <TabPanel>
          <h3>About Content</h3>
          <p>Learn more about us.</p>
        </TabPanel>
        <TabPanel>
          <h3>Disabled Tab</h3>
          <p>This tab is disabled.</p>
        </TabPanel>
        <TabPanel>
          <h3>Contact Content</h3>
          <p>Get in touch with us.</p>
        </TabPanel>
      </Tabs>
      <p style={{ marginTop: '20px' }}>Selected tab index: {selectedIndex}</p>
    </div>
  );
}

export default ControlledTabsExample;

Practical Example / Building Something Real

Let's build a comprehensive tabbed interface with forms, data display, and settings:

// src/AdvancedTabsInterface.jsx
import React, { useState } from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

function AdvancedTabsInterface() {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [data, setData] = useState([
    { id: 1, name: 'Item 1', value: 100 },
    { id: 2, name: 'Item 2', value: 200 },
    { id: 3, name: 'Item 3', value: 300 }
  ]);

  const handleFormChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleFormSubmit = (e) => {
    e.preventDefault();
    alert('Form submitted!');
    setFormData({ name: '', email: '', message: '' });
  };

  const handleSelect = (index) => {
    setSelectedIndex(index);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>Advanced Tabs Interface</h1>
      <Tabs
        selectedIndex={selectedIndex}
        onSelect={handleSelect}
        selectedTabClassName="react-tabs__tab--selected"
        selectedTabPanelClassName="react-tabs__tab-panel--selected"
      >
        <TabList style={{
          display: 'flex',
          borderBottom: '2px solid #ddd',
          marginBottom: '20px'
        }}>
          <Tab style={{
            padding: '10px 20px',
            cursor: 'pointer',
            border: 'none',
            backgroundColor: 'transparent',
            borderBottom: '2px solid transparent',
            marginRight: '10px'
          }}>
            Form
          </Tab>
          <Tab style={{
            padding: '10px 20px',
            cursor: 'pointer',
            border: 'none',
            backgroundColor: 'transparent',
            borderBottom: '2px solid transparent',
            marginRight: '10px'
          }}>
            Data
          </Tab>
          <Tab style={{
            padding: '10px 20px',
            cursor: 'pointer',
            border: 'none',
            backgroundColor: 'transparent',
            borderBottom: '2px solid transparent',
            marginRight: '10px'
          }}>
            Settings
          </Tab>
        </TabList>

        <TabPanel>
          <div style={{
            padding: '20px',
            border: '1px solid #ddd',
            borderRadius: '8px',
            backgroundColor: '#f8f9fa'
          }}>
            <h2>Contact Form</h2>
            <form onSubmit={handleFormSubmit}>
              <div style={{ marginBottom: '16px' }}>
                <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
                  Name
                </label>
                <input
                  type="text"
                  name="name"
                  value={formData.name}
                  onChange={handleFormChange}
                  style={{
                    width: '100%',
                    padding: '8px',
                    border: '1px solid #ddd',
                    borderRadius: '4px',
                    boxSizing: 'border-box'
                  }}
                />
              </div>
              <div style={{ marginBottom: '16px' }}>
                <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
                  Email
                </label>
                <input
                  type="email"
                  name="email"
                  value={formData.email}
                  onChange={handleFormChange}
                  style={{
                    width: '100%',
                    padding: '8px',
                    border: '1px solid #ddd',
                    borderRadius: '4px',
                    boxSizing: 'border-box'
                  }}
                />
              </div>
              <div style={{ marginBottom: '16px' }}>
                <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
                  Message
                </label>
                <textarea
                  name="message"
                  value={formData.message}
                  onChange={handleFormChange}
                  rows={4}
                  style={{
                    width: '100%',
                    padding: '8px',
                    border: '1px solid #ddd',
                    borderRadius: '4px',
                    boxSizing: 'border-box',
                    resize: 'vertical'
                  }}
                />
              </div>
              <button
                type="submit"
                style={{
                  padding: '10px 20px',
                  backgroundColor: '#007bff',
                  color: 'white',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
              >
                Submit
              </button>
            </form>
          </div>
        </TabPanel>

        <TabPanel>
          <div style={{
            padding: '20px',
            border: '1px solid #ddd',
            borderRadius: '8px',
            backgroundColor: '#f8f9fa'
          }}>
            <h2>Data Table</h2>
            <table style={{
              width: '100%',
              borderCollapse: 'collapse',
              backgroundColor: 'white',
              borderRadius: '4px',
              overflow: 'hidden'
            }}>
              <thead>
                <tr style={{ backgroundColor: '#007bff', color: 'white' }}>
                  <th style={{ padding: '12px', textAlign: 'left' }}>ID</th>
                  <th style={{ padding: '12px', textAlign: 'left' }}>Name</th>
                  <th style={{ padding: '12px', textAlign: 'left' }}>Value</th>
                </tr>
              </thead>
              <tbody>
                {data.map(item => (
                  <tr key={item.id} style={{ borderBottom: '1px solid #ddd' }}>
                    <td style={{ padding: '12px' }}>{item.id}</td>
                    <td style={{ padding: '12px' }}>{item.name}</td>
                    <td style={{ padding: '12px' }}>${item.value}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </TabPanel>

        <TabPanel>
          <div style={{
            padding: '20px',
            border: '1px solid #ddd',
            borderRadius: '8px',
            backgroundColor: '#f8f9fa'
          }}>
            <h2>Settings</h2>
            <div style={{ marginBottom: '16px' }}>
              <label style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                <input type="checkbox" />
                <span>Enable notifications</span>
              </label>
            </div>
            <div style={{ marginBottom: '16px' }}>
              <label style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                <input type="checkbox" />
                <span>Dark mode</span>
              </label>
            </div>
            <div style={{ marginBottom: '16px' }}>
              <label style={{ display: 'block', marginBottom: '4px' }}>
                Language
              </label>
              <select style={{
                width: '100%',
                padding: '8px',
                border: '1px solid #ddd',
                borderRadius: '4px'
              }}>
                <option>English</option>
                <option>Spanish</option>
                <option>French</option>
              </select>
            </div>
            <button
              style={{
                padding: '10px 20px',
                backgroundColor: '#28a745',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer'
              }}
            >
              Save Settings
            </button>
          </div>
        </TabPanel>
      </Tabs>
    </div>
  );
}

export default AdvancedTabsInterface;

Add custom styles in App.css:

/* src/App.css */
.react-tabs {
  -webkit-tap-highlight-color: transparent;
}

.react-tabs__tab-list {
  border-bottom: 2px solid #ddd;
  margin: 0 0 20px;
  padding: 0;
}

.react-tabs__tab {
  display: inline-block;
  border: none;
  bottom: -2px;
  position: relative;
  list-style: none;
  padding: 10px 20px;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 2px solid transparent;
  margin-right: 10px;
}

.react-tabs__tab--selected {
  background: transparent;
  border-color: #007bff;
  color: #007bff;
  border-radius: 0;
  border-bottom: 2px solid #007bff;
}

.react-tabs__tab--disabled {
  color: #ccc;
  cursor: not-allowed;
}

.react-tabs__tab:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);
}

.react-tabs__tab-panel {
  display: none;
}

.react-tabs__tab-panel--selected {
  display: block;
}

Update your App.jsx:

// src/App.jsx
import React from 'react';
import AdvancedTabsInterface from './AdvancedTabsInterface';
import './App.css';

function App() {
  return (
    <div className="App">
      <AdvancedTabsInterface />
    </div>
  );
}

export default App;

This example demonstrates:

Controlled tabs with state management
Form in a tab panel
Data table in a tab panel
Settings panel in a tab
Custom styling
Keyboard navigation support

Common Issues / Troubleshooting

Tabs not switching: Make sure you're using TabPanel components for each Tab. The number of Tab components should match the number of TabPanel components.
Styling not applying: Import the CSS file (import 'react-tabs/style/react-tabs.css'). You can also override styles using CSS classes or inline styles.
Controlled tabs not working: When using controlled mode, make sure you're providing both selectedIndex and onSelect props. The onSelect handler should update the state.
Keyboard navigation not working: react-tabs includes keyboard navigation by default. Make sure the tabs are focused. Use Tab key to navigate between tabs and arrow keys to switch tabs.
Disabled tabs still clickable: Use the disabled prop on the Tab component to disable it. Disabled tabs won't respond to clicks or keyboard navigation.
Accessibility warnings: react-tabs includes ARIA attributes by default. If you see accessibility warnings, make sure you're using the components correctly and not overriding ARIA attributes unnecessarily.

Next Steps

Now that you have an advanced understanding of react-tabs:

Explore advanced customization options and theming
Learn about nested tabs and complex tab structures
Implement custom tab components and animations
Add tab persistence and URL synchronization
Integrate with React Router for navigation
Learn about other tab libraries (react-tabs, reach-ui tabs)
Check the official repository: https://github.com/reactjs/react-tabs
Look for part 49 of this series for more advanced topics

Summary

You've successfully integrated react-tabs into your React application with advanced features including controlled tabs, custom styling, form integration, and comprehensive tab interfaces. react-tabs provides a flexible, accessible solution for creating tab interfaces with full keyboard navigation support.

SEO Keywords

react-tabs
React tab component
react-tabs tutorial
React tab interface
react-tabs installation
React accessible tabs
react-tabs example
React tab navigation
react-tabs setup
React controlled tabs
react-tabs customization
React tab library
react-tabs keyboard navigation
React tab panels
react-tabs getting started

Building Sticky Elements with react-stickynode in React

William Baker — Mon, 19 Jan 2026 16:50:31 +0000

React Sticky Node is a performant library for creating sticky (fixed-position) elements in React applications. It provides a simple way to make elements stick to the top of the viewport when scrolling, with support for boundaries, offsets, and smooth transitions. This guide walks through setting up and creating sticky elements using React Sticky Node with React, from installation to a working implementation. This is part 47 of a series on using React Sticky Node with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect)
Familiarity with JavaScript/TypeScript
Understanding of CSS positioning

Installation

Install React Sticky Node using your preferred package manager:

npm install react-stickynode

Or with yarn:

yarn add react-stickynode

Or with pnpm:

pnpm add react-stickynode

After installation, your package.json should include:

{
  "dependencies": {
    "react-stickynode": "^3.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Sticky Node requires minimal setup. Import the component and you're ready to use it.

First Example / Basic Usage

Let's create a simple sticky header. Create a new file src/StickyExample.jsx:

// src/StickyExample.jsx
import React from 'react';
import Sticky from 'react-stickynode';

function StickyExample() {
  return (
    <div>
      <Sticky top={0}>
        <header style={{
          backgroundColor: '#2c3e50',
          color: 'white',
          padding: '15px 30px',
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
          zIndex: 1000
        }}>
          <h1 style={{ margin: 0, fontSize: '24px' }}>Sticky Header</h1>
        </header>
      </Sticky>
      <div style={{ padding: '40px', minHeight: '200vh' }}>
        <h2>Scroll down to see the header stick to the top</h2>
        <p>The header will stick to the top when you scroll past it.</p>
        <div style={{ height: '1500px', backgroundColor: '#f0f0f0', padding: '20px' }}>
          <p>Long content area to demonstrate sticky behavior...</p>
        </div>
      </div>
    </div>
  );
}

export default StickyExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import StickyExample from './StickyExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <StickyExample />
    </div>
  );
}

export default App;

This creates a header that sticks to the top of the viewport when you scroll past it.

Understanding the Basics

React Sticky Node provides several key features:

Sticky component: Wraps elements to make them sticky
top prop: Sets the offset from the top when sticky
bottomBoundary: Sets a boundary where sticky behavior stops
innerZ: Z-index for the sticky element
enabled: Enable/disable sticky behavior
State callbacks: Callbacks for sticky state changes

Key concepts:

Sticky Behavior: Element becomes fixed when scrolling past its original position
Top Offset: Distance from top of viewport when sticky
Boundaries: Limits where sticky behavior applies
State Management: Track when element becomes sticky or unsticky
Performance: Optimized for smooth scrolling performance

Here's an example with navigation and boundaries:

// src/StickyNavigation.jsx
import React, { useState } from 'react';
import Sticky from 'react-stickynode';

function StickyNavigation() {
  const [status, setStatus] = useState('');

  const handleStateChange = (status) => {
    setStatus(status.status);
  };

  const navItems = ['Home', 'About', 'Services', 'Contact'];

  return (
    <div>
      <Sticky
        top={0}
        bottomBoundary={1200}
        innerZ={1000}
        onStateChange={handleStateChange}
      >
        <nav style={{
          backgroundColor: '#007bff',
          color: 'white',
          padding: '15px 30px',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        }}>
          <div style={{ fontSize: '20px', fontWeight: 'bold' }}>
            Logo
          </div>
          <div style={{ display: 'flex', gap: '20px' }}>
            {navItems.map(item => (
              <a
                key={item}
                href={`#${item.toLowerCase()}`}
                style={{
                  color: 'white',
                  textDecoration: 'none',
                  padding: '5px 10px',
                  borderRadius: '4px',
                  transition: 'background-color 0.3s'
                }}
                onMouseEnter={(e) => e.target.style.backgroundColor = 'rgba(255,255,255,0.2)'}
                onMouseLeave={(e) => e.target.style.backgroundColor = 'transparent'}
              >
                {item}
              </a>
            ))}
          </div>
        </nav>
      </Sticky>
      <div style={{ padding: '40px', minHeight: '200vh' }}>
        <p>Status: {status}</p>
        <div style={{ height: '1500px', backgroundColor: '#f8f9fa', padding: '20px' }}>
          <p>Scroll to see the navigation stick to the top.</p>
          <p>It will stop being sticky after scrolling past 1200px.</p>
        </div>
      </div>
    </div>
  );
}

export default StickyNavigation;

Practical Example / Building Something Real

Let's build a complete layout with sticky sidebar and navigation:

// src/LayoutWithSticky.jsx
import React, { useState } from 'react';
import Sticky from 'react-stickynode';

function LayoutWithSticky() {
  const [navStatus, setNavStatus] = useState('');

  const menuItems = [
    { id: 1, label: 'Home', href: '#home' },
    { id: 2, label: 'About', href: '#about' },
    { id: 3, label: 'Services', href: '#services' },
    { id: 4, label: 'Portfolio', href: '#portfolio' },
    { id: 5, label: 'Contact', href: '#contact' }
  ];

  return (
    <div>
      <Sticky
        top={0}
        innerZ={1000}
        onStateChange={(status) => setNavStatus(status.status)}
      >
        <header style={{
          backgroundColor: '#ffffff',
          boxShadow: navStatus === Sticky.STATUS_FIXED 
            ? '0 2px 8px rgba(0,0,0,0.15)' 
            : 'none',
          padding: '15px 30px',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          transition: 'box-shadow 0.3s'
        }}>
          <div style={{
            fontSize: '24px',
            fontWeight: 'bold',
            color: '#2c3e50'
          }}>
            MyApp
          </div>
          <nav style={{ display: 'flex', gap: '30px' }}>
            {menuItems.map(item => (
              <a
                key={item.id}
                href={item.href}
                style={{
                  color: '#2c3e50',
                  textDecoration: 'none',
                  padding: '8px 15px',
                  borderRadius: '4px',
                  transition: 'all 0.3s',
                  fontWeight: '500'
                }}
                onMouseEnter={(e) => {
                  e.target.style.backgroundColor = '#f8f9fa';
                  e.target.style.color = '#007bff';
                }}
                onMouseLeave={(e) => {
                  e.target.style.backgroundColor = 'transparent';
                  e.target.style.color = '#2c3e50';
                }}
              >
                {item.label}
              </a>
            ))}
          </nav>
        </header>
      </Sticky>

      <div style={{ display: 'flex', minHeight: '100vh' }}>
        <aside style={{ width: '250px', backgroundColor: '#f8f9fa', padding: '20px' }}>
          <Sticky top={80} bottomBoundary={'.main-content'}>
            <div style={{
              backgroundColor: 'white',
              padding: '20px',
              borderRadius: '8px',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
            }}>
              <h3 style={{ marginTop: 0 }}>Sidebar</h3>
              <ul style={{ listStyle: 'none', padding: 0 }}>
                <li style={{ marginBottom: '10px' }}>
                  <a href="#section1" style={{ color: '#007bff', textDecoration: 'none' }}>
                    Section 1
                  </a>
                </li>
                <li style={{ marginBottom: '10px' }}>
                  <a href="#section2" style={{ color: '#007bff', textDecoration: 'none' }}>
                    Section 2
                  </a>
                </li>
                <li style={{ marginBottom: '10px' }}>
                  <a href="#section3" style={{ color: '#007bff', textDecoration: 'none' }}>
                    Section 3
                  </a>
                </li>
              </ul>
            </div>
          </Sticky>
        </aside>

        <main className="main-content" style={{ flex: 1, padding: '40px' }}>
          <section id="section1" style={{ marginBottom: '60px', minHeight: '800px' }}>
            <h2>Section 1</h2>
            <p>This is section 1 content. The sidebar will stick when scrolling.</p>
          </section>
          <section id="section2" style={{ marginBottom: '60px', minHeight: '800px' }}>
            <h2>Section 2</h2>
            <p>This is section 2 content.</p>
          </section>
          <section id="section3" style={{ marginBottom: '60px', minHeight: '800px' }}>
            <h2>Section 3</h2>
            <p>This is section 3 content.</p>
          </section>
        </main>
      </div>
    </div>
  );
}

export default LayoutWithSticky;

Now create a sticky table header:

// src/StickyTableHeader.jsx
import React from 'react';
import Sticky from 'react-stickynode';

function StickyTableHeader() {
  const tableData = Array.from({ length: 50 }, (_, i) => ({
    id: i + 1,
    name: `Item ${i + 1}`,
    category: ['Electronics', 'Clothing', 'Books', 'Home'][i % 4],
    price: (Math.random() * 1000).toFixed(2)
  }));

  return (
    <div style={{ padding: '40px' }}>
      <h2>Table with Sticky Header</h2>
      <Sticky top={0} innerZ={100}>
        <table style={{
          width: '100%',
          borderCollapse: 'collapse',
          backgroundColor: 'white',
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        }}>
          <thead>
            <tr style={{ backgroundColor: '#007bff', color: 'white' }}>
              <th style={{ padding: '12px', textAlign: 'left', border: '1px solid #ddd' }}>
                ID
              </th>
              <th style={{ padding: '12px', textAlign: 'left', border: '1px solid #ddd' }}>
                Name
              </th>
              <th style={{ padding: '12px', textAlign: 'left', border: '1px solid #ddd' }}>
                Category
              </th>
              <th style={{ padding: '12px', textAlign: 'left', border: '1px solid #ddd' }}>
                Price
              </th>
            </tr>
          </thead>
        </table>
      </Sticky>
      <table style={{
        width: '100%',
        borderCollapse: 'collapse',
        marginTop: 0
      }}>
        <tbody>
          {tableData.map(item => (
            <tr key={item.id} style={{ borderBottom: '1px solid #ddd' }}>
              <td style={{ padding: '12px', border: '1px solid #ddd' }}>{item.id}</td>
              <td style={{ padding: '12px', border: '1px solid #ddd' }}>{item.name}</td>
              <td style={{ padding: '12px', border: '1px solid #ddd' }}>{item.category}</td>
              <td style={{ padding: '12px', border: '1px solid #ddd' }}>${item.price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default StickyTableHeader;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import LayoutWithSticky from './LayoutWithSticky';
import StickyTableHeader from './StickyTableHeader';
import './App.css';

function App() {
  return (
    <div className="App">
      <LayoutWithSticky />
      <StickyTableHeader />
    </div>
  );
}

export default App;

This example demonstrates:

Sticky navigation header
Sticky sidebar with boundaries
Sticky table header
State change callbacks
Custom styling based on sticky state
Multiple sticky elements

Common Issues / Troubleshooting

Element not sticking: Make sure there's enough content to scroll. If the page content is shorter than the viewport, the element won't become sticky. Also check that the top prop is set correctly.
Z-index issues: Use the innerZ prop to set the z-index of the sticky element. This ensures it appears above other content when sticky.
Sticky not releasing: Set the bottomBoundary prop to define where the sticky behavior should stop. This can be a pixel value or a CSS selector.
Performance issues: React Sticky Node is optimized for performance, but if you have many sticky elements, consider using enabled prop to conditionally enable/disable sticky behavior.
State not updating: Use the onStateChange callback to track sticky state changes. The status can be STATUS_ORIGINAL, STATUS_RELEASED, or STATUS_FIXED.
Boundary not working: Make sure the boundary selector or value is correct. For CSS selectors, ensure the element exists in the DOM when the Sticky component mounts.

Next Steps

Now that you have an understanding of React Sticky Node:

Explore advanced boundary configurations
Learn about state management and callbacks
Implement conditional sticky behavior
Add animations and transitions
Integrate with React Router for navigation
Learn about other sticky libraries
Check the official repository: https://github.com/yahoo/react-stickynode
Look for part 48 of this series for more advanced topics

Summary

You've successfully set up React Sticky Node in your React application and created sticky navigation headers, sidebars, and table headers. React Sticky Node provides a performant solution for creating elements that stick to the viewport when scrolling.

SEO Keywords

react-stickynode
React sticky element
react-stickynode tutorial
React fixed position
react-stickynode installation
React sticky header
react-stickynode example
React sticky navigation
react-stickynode setup
React sticky sidebar
react-stickynode customization
React scroll sticky
react-stickynode boundaries
React sticky library
react-stickynode getting started

Getting Started with React Headroom: Building Auto-Hiding Navigation

William Baker — Mon, 19 Jan 2026 16:49:32 +0000

React Headroom is a lightweight library that automatically hides and shows navigation headers based on scroll direction. When users scroll down, the header hides to maximize content space, and when they scroll up, it reappears for easy navigation access. This guide walks through setting up and creating auto-hiding navigation using React Headroom with React, from installation to a working implementation. This is part 46 of a series on using React Headroom with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React components
Familiarity with JavaScript/TypeScript

Installation

Install React Headroom using your preferred package manager:

npm install react-headroom

Or with yarn:

yarn add react-headroom

Or with pnpm:

pnpm add react-headroom

After installation, your package.json should include:

{
  "dependencies": {
    "react-headroom": "^3.1.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Headroom requires minimal setup. Import the component and you're ready to use it.

First Example / Basic Usage

Let's create a simple auto-hiding header. Create a new file src/HeadroomExample.jsx:

// src/HeadroomExample.jsx
import React from 'react';
import Headroom from 'react-headroom';

function HeadroomExample() {
  return (
    <div>
      <Headroom>
        <header style={{
          backgroundColor: '#2c3e50',
          color: 'white',
          padding: '15px 30px',
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        }}>
          <h1 style={{ margin: 0, fontSize: '24px' }}>My Website</h1>
        </header>
      </Headroom>
      <div style={{ padding: '40px', minHeight: '200vh' }}>
        <h2>Scroll down to see the header hide</h2>
        <p>Scroll up to see it reappear.</p>
        <div style={{ height: '1500px', backgroundColor: '#f0f0f0', padding: '20px' }}>
          <p>This is a long content area to demonstrate the headroom effect.</p>
          <p>Keep scrolling down...</p>
          <p>And scrolling...</p>
          <p>The header will hide when you scroll down.</p>
          <p>Scroll back up to see it appear again.</p>
        </div>
      </div>
    </div>
  );
}

export default HeadroomExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import HeadroomExample from './HeadroomExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <HeadroomExample />
    </div>
  );
}

export default App;

This creates a header that automatically hides when scrolling down and reappears when scrolling up.

Understanding the Basics

React Headroom provides several key features:

Headroom component: Wraps your header to enable auto-hide functionality
Automatic detection: Detects scroll direction and hides/shows accordingly
Smooth animations: Smooth transitions when hiding and showing
Customization: Configurable thresholds and animation options
Zero configuration: Works out of the box with sensible defaults

Key concepts:

Scroll Detection: Headroom monitors scroll events to determine direction
Hide on Scroll Down: Header hides when user scrolls down
Show on Scroll Up: Header reappears when user scrolls up
Smooth Transitions: Uses CSS transitions for smooth animations
Threshold: Configurable scroll distance before hiding/showing

Here's an example with a navigation menu:

// src/NavigationHeadroom.jsx
import React from 'react';
import Headroom from 'react-headroom';

function NavigationHeadroom() {
  const navItems = ['Home', 'About', 'Services', 'Contact'];

  return (
    <div>
      <Headroom>
        <nav style={{
          backgroundColor: '#007bff',
          color: 'white',
          padding: '15px 30px',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        }}>
          <div style={{ fontSize: '20px', fontWeight: 'bold' }}>
            Logo
          </div>
          <div style={{ display: 'flex', gap: '20px' }}>
            {navItems.map(item => (
              <a
                key={item}
                href={`#${item.toLowerCase()}`}
                style={{
                  color: 'white',
                  textDecoration: 'none',
                  padding: '5px 10px',
                  borderRadius: '4px',
                  transition: 'background-color 0.3s'
                }}
                onMouseEnter={(e) => e.target.style.backgroundColor = 'rgba(255,255,255,0.2)'}
                onMouseLeave={(e) => e.target.style.backgroundColor = 'transparent'}
              >
                {item}
              </a>
            ))}
          </div>
        </nav>
      </Headroom>
      <div style={{ padding: '40px', minHeight: '200vh' }}>
        <h2>Navigation with Headroom</h2>
        <p>Scroll down to see the navigation hide.</p>
        <div style={{ height: '1500px', backgroundColor: '#f8f9fa', padding: '20px' }}>
          <p>Long content area...</p>
        </div>
      </div>
    </div>
  );
}

export default NavigationHeadroom;

Practical Example / Building Something Real

Let's build a complete website layout with an auto-hiding header:

// src/WebsiteWithHeadroom.jsx
import React from 'react';
import Headroom from 'react-headroom';

function WebsiteWithHeadroom() {
  const menuItems = [
    { id: 1, label: 'Home', href: '#home' },
    { id: 2, label: 'About', href: '#about' },
    { id: 3, label: 'Services', href: '#services' },
    { id: 4, label: 'Portfolio', href: '#portfolio' },
    { id: 5, label: 'Contact', href: '#contact' }
  ];

  return (
    <div>
      <Headroom
        style={{
          zIndex: 1000
        }}
        pinStart={64}
        upTolerance={10}
        downTolerance={10}
      >
        <header style={{
          backgroundColor: '#ffffff',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
          padding: '15px 30px',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}>
          <div style={{
            fontSize: '24px',
            fontWeight: 'bold',
            color: '#2c3e50'
          }}>
            MyApp
          </div>
          <nav style={{ display: 'flex', gap: '30px', alignItems: 'center' }}>
            {menuItems.map(item => (
              <a
                key={item.id}
                href={item.href}
                style={{
                  color: '#2c3e50',
                  textDecoration: 'none',
                  padding: '8px 15px',
                  borderRadius: '4px',
                  transition: 'all 0.3s',
                  fontWeight: '500'
                }}
                onMouseEnter={(e) => {
                  e.target.style.backgroundColor = '#f8f9fa';
                  e.target.style.color = '#007bff';
                }}
                onMouseLeave={(e) => {
                  e.target.style.backgroundColor = 'transparent';
                  e.target.style.color = '#2c3e50';
                }}
              >
                {item.label}
              </a>
            ))}
            <button
              style={{
                padding: '10px 20px',
                backgroundColor: '#007bff',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                fontWeight: '500',
                transition: 'background-color 0.3s'
              }}
              onMouseEnter={(e) => e.target.style.backgroundColor = '#0056b3'}
              onMouseLeave={(e) => e.target.style.backgroundColor = '#007bff'}
            >
              Get Started
            </button>
          </nav>
        </header>
      </Headroom>

      <main>
        <section id="home" style={{
          padding: '100px 40px',
          textAlign: 'center',
          backgroundColor: '#f8f9fa',
          minHeight: '100vh'
        }}>
          <h1 style={{ fontSize: '48px', marginBottom: '20px' }}>Welcome to MyApp</h1>
          <p style={{ fontSize: '20px', color: '#666', marginBottom: '30px' }}>
            Scroll down to see the header automatically hide
          </p>
        </section>

        <section id="about" style={{
          padding: '80px 40px',
          backgroundColor: 'white',
          minHeight: '100vh'
        }}>
          <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>About Us</h2>
          <p style={{ fontSize: '18px', lineHeight: '1.6', color: '#666' }}>
            This is the about section. The header will hide when you scroll down
            and reappear when you scroll up, providing a better user experience
            by maximizing screen space while keeping navigation accessible.
          </p>
        </section>

        <section id="services" style={{
          padding: '80px 40px',
          backgroundColor: '#f8f9fa',
          minHeight: '100vh'
        }}>
          <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>Our Services</h2>
          <p style={{ fontSize: '18px', lineHeight: '1.6', color: '#666' }}>
            Service content goes here. Keep scrolling to see the headroom effect in action.
          </p>
        </section>

        <section id="portfolio" style={{
          padding: '80px 40px',
          backgroundColor: 'white',
          minHeight: '100vh'
        }}>
          <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>Portfolio</h2>
          <p style={{ fontSize: '18px', lineHeight: '1.6', color: '#666' }}>
            Portfolio content goes here.
          </p>
        </section>

        <section id="contact" style={{
          padding: '80px 40px',
          backgroundColor: '#f8f9fa',
          minHeight: '100vh'
        }}>
          <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>Contact Us</h2>
          <p style={{ fontSize: '18px', lineHeight: '1.6', color: '#666' }}>
            Contact information goes here.
          </p>
        </section>
      </main>
    </div>
  );
}

export default WebsiteWithHeadroom;

Now create a blog layout with headroom:

// src/BlogWithHeadroom.jsx
import React from 'react';
import Headroom from 'react-headroom';

function BlogWithHeadroom() {
  const blogPosts = Array.from({ length: 10 }, (_, i) => ({
    id: i + 1,
    title: `Blog Post ${i + 1}`,
    excerpt: `This is the excerpt for blog post ${i + 1}. It contains some sample text to demonstrate the headroom effect.`
  }));

  return (
    <div>
      <Headroom
        style={{
          zIndex: 1000
        }}
      >
        <header style={{
          backgroundColor: '#2c3e50',
          color: 'white',
          padding: '15px 30px',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        }}>
          <div style={{ fontSize: '24px', fontWeight: 'bold' }}>
            My Blog
          </div>
          <nav style={{ display: 'flex', gap: '20px' }}>
            <a href="#home" style={{ color: 'white', textDecoration: 'none' }}>Home</a>
            <a href="#posts" style={{ color: 'white', textDecoration: 'none' }}>Posts</a>
            <a href="#about" style={{ color: 'white', textDecoration: 'none' }}>About</a>
          </nav>
        </header>
      </Headroom>

      <main style={{ padding: '40px', maxWidth: '800px', margin: '0 auto' }}>
        <h1 style={{ marginBottom: '30px' }}>Blog Posts</h1>
        {blogPosts.map(post => (
          <article
            key={post.id}
            style={{
              marginBottom: '40px',
              padding: '20px',
              backgroundColor: '#f8f9fa',
              borderRadius: '8px',
              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
            }}
          >
            <h2 style={{ marginBottom: '10px' }}>{post.title}</h2>
            <p style={{ color: '#666', lineHeight: '1.6' }}>{post.excerpt}</p>
          </article>
        ))}
      </main>
    </div>
  );
}

export default BlogWithHeadroom;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import WebsiteWithHeadroom from './WebsiteWithHeadroom';
import './App.css';

function App() {
  return (
    <div className="App">
      <WebsiteWithHeadroom />
    </div>
  );
}

export default App;

This example demonstrates:

Auto-hiding navigation header
Smooth hide/show animations
Customizable scroll thresholds
Full website layout
Blog layout with headroom
Responsive navigation

Common Issues / Troubleshooting

Header not hiding: Make sure the content is scrollable. If the page content is shorter than the viewport, there's nothing to scroll and the header won't hide. Add enough content to enable scrolling.
Header hiding too quickly: Adjust the downTolerance prop to increase the scroll distance before hiding. Higher values require more scrolling before the header hides.
Header not reappearing: Check the upTolerance prop. This controls how much you need to scroll up before the header reappears. Lower values make it reappear sooner.
Z-index issues: If the header appears behind other elements, set a higher zIndex in the Headroom component's style prop.
Animation not smooth: React Headroom uses CSS transitions by default. If animations seem choppy, check for CSS conflicts or performance issues.
Header not pinning at top: Use the pinStart prop to control when the header should start pinning. This is useful if you have content above the header that should scroll normally first.

Next Steps

Now that you have a basic understanding of React Headroom:

Learn about advanced configuration options
Explore different animation styles
Implement custom scroll thresholds
Add header state callbacks
Integrate with React Router for navigation
Learn about other sticky header libraries
Check the official repository: https://github.com/KyleAMathews/react-headroom
Look for part 47 of this series for more advanced topics

Summary

You've successfully set up React Headroom in your React application and created auto-hiding navigation headers that improve user experience by maximizing content space while keeping navigation accessible. React Headroom provides a simple solution for creating headers that automatically hide and show based on scroll direction.

SEO Keywords

react-headroom
React auto-hiding header
react-headroom tutorial
React sticky navigation
react-headroom installation
React scroll header
react-headroom example
React hide on scroll
react-headroom setup
React navigation header
react-headroom customization
React scroll detection
react-headroom animations
React header library
react-headroom getting started

Advanced Context Menus with mantine-contextmenu in React

William Baker — Mon, 19 Jan 2026 16:48:20 +0000

mantine-contextmenu is a powerful library for creating context menus (right-click menus) in React applications using Mantine UI components. It provides a flexible API for displaying contextual actions, submenus, and custom content when users right-click on elements. This guide walks through advanced usage of mantine-contextmenu with React and Mantine, including custom configurations, nested menus, and complex interaction patterns. This is part 45 of a series on using mantine-contextmenu with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Mantine UI installed and configured
Basic knowledge of React hooks (useState, useCallback)
Familiarity with Mantine UI components
Understanding of JavaScript/TypeScript

Installation

Install mantine-contextmenu and Mantine dependencies:

npm install mantine-contextmenu @mantine/core @mantine/hooks

Or with yarn:

yarn add mantine-contextmenu @mantine/core @mantine/hooks

Or with pnpm:

pnpm add mantine-contextmenu @mantine/core @mantine/hooks

After installation, your package.json should include:

{
  "dependencies": {
    "mantine-contextmenu": "^1.0.0",
    "@mantine/core": "^6.0.0",
    "@mantine/hooks": "^6.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Set up Mantine provider and context menu provider in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { MantineProvider } from '@mantine/core';
import { ContextMenuProvider } from 'mantine-contextmenu';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <MantineProvider>
      <ContextMenuProvider>
        <App />
      </ContextMenuProvider>
    </MantineProvider>
  </React.StrictMode>
  );

First Example / Basic Usage

Let's create a simple context menu. Create a new file src/ContextMenuExample.jsx:

// src/ContextMenuExample.jsx
import React from 'react';
import { useContextMenu } from 'mantine-contextmenu';
import { Box, Button } from '@mantine/core';

function ContextMenuExample() {
  const showContextMenu = useContextMenu();

  const handleRightClick = (event) => {
    showContextMenu({
      event,
      items: [
        {
          key: 'copy',
          label: 'Copy',
          onClick: () => {
            console.log('Copy clicked');
            alert('Copied!');
          }
        },
        {
          key: 'paste',
          label: 'Paste',
          onClick: () => {
            console.log('Paste clicked');
            alert('Pasted!');
          }
        },
        {
          key: 'delete',
          label: 'Delete',
          onClick: () => {
            console.log('Delete clicked');
            alert('Deleted!');
          },
          color: 'red'
        }
      ]
    });
  };

  return (
    <Box p="xl">
      <h2>Context Menu Example</h2>
      <Box
        onContextMenu={handleRightClick}
        p="md"
        style={{
          border: '2px dashed #ddd',
          borderRadius: '8px',
          cursor: 'context-menu',
          minHeight: '200px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }}
      >
        Right-click here to open context menu
      </Box>
    </Box>
  );
}

export default ContextMenuExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ContextMenuExample from './ContextMenuExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ContextMenuExample />
    </div>
  );
}

export default App;

Understanding the Basics

mantine-contextmenu provides several key features:

useContextMenu hook: Hook to access context menu functionality
showContextMenu function: Displays the context menu at the specified position
Menu items: Array of items with labels, icons, and actions
Submenus: Nested menu items for complex hierarchies
Custom content: Support for custom React components in menus
Mantine integration: Seamless integration with Mantine UI components

Key concepts for advanced usage:

Event handling: Use onContextMenu to capture right-click events
Menu configuration: Configure items, positioning, and behavior
Submenus: Create nested menu structures
Custom rendering: Use custom components for menu items
State management: Manage menu state and item states

Here's an example with submenus and icons:

// src/AdvancedContextMenuExample.jsx
import React from 'react';
import { useContextMenu } from 'mantine-contextmenu';
import { Box, Button } from '@mantine/core';
import { IconCopy, IconCut, IconPaste, IconTrash, IconEdit } from '@tabler/icons-react';

function AdvancedContextMenuExample() {
  const showContextMenu = useContextMenu();

  const handleRightClick = (event) => {
    showContextMenu({
      event,
      items: [
        {
          key: 'edit',
          label: 'Edit',
          icon: <IconEdit size={16} />,
          onClick: () => alert('Edit clicked')
        },
        {
          key: 'copy',
          label: 'Copy',
          icon: <IconCopy size={16} />,
          onClick: () => alert('Copy clicked')
        },
        {
          key: 'cut',
          label: 'Cut',
          icon: <IconCut size={16} />,
          onClick: () => alert('Cut clicked')
        },
        {
          key: 'paste',
          label: 'Paste',
          icon: <IconPaste size={16} />,
          onClick: () => alert('Paste clicked')
        },
        {
          key: 'divider',
          type: 'divider'
        },
        {
          key: 'delete',
          label: 'Delete',
          icon: <IconTrash size={16} />,
          color: 'red',
          onClick: () => alert('Delete clicked')
        },
        {
          key: 'more',
          label: 'More',
          children: [
            {
              key: 'rename',
              label: 'Rename',
              onClick: () => alert('Rename clicked')
            },
            {
              key: 'duplicate',
              label: 'Duplicate',
              onClick: () => alert('Duplicate clicked')
            }
          ]
        }
      ]
    });
  };

  return (
    <Box p="xl">
      <h2>Advanced Context Menu</h2>
      <Box
        onContextMenu={handleRightClick}
        p="md"
        style={{
          border: '2px dashed #ddd',
          borderRadius: '8px',
          cursor: 'context-menu',
          minHeight: '200px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }}
      >
        Right-click here for advanced menu with submenus
      </Box>
    </Box>
  );
}

export default AdvancedContextMenuExample;

Practical Example / Building Something Real

Let's build a file manager with context menus:

// src/FileManagerWithContextMenu.jsx
import React, { useState } from 'react';
import { useContextMenu } from 'mantine-contextmenu';
import { Box, Paper, Text, Group, ActionIcon } from '@mantine/core';
import { IconFolder, IconFile, IconEdit, IconTrash, IconCopy, IconCut, IconPaste } from '@tabler/icons-react';

function FileManagerWithContextMenu() {
  const showContextMenu = useContextMenu();
  const [files, setFiles] = useState([
    { id: 1, name: 'Documents', type: 'folder' },
    { id: 2, name: 'Images', type: 'folder' },
    { id: 3, name: 'report.pdf', type: 'file' },
    { id: 4, name: 'photo.jpg', type: 'file' },
    { id: 5, name: 'notes.txt', type: 'file' }
  ]);
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileRightClick = (event, file) => {
    event.preventDefault();
    setSelectedFile(file);

    const menuItems = [
      {
        key: 'open',
        label: 'Open',
        onClick: () => {
          alert(`Opening ${file.name}`);
        }
      },
      {
        key: 'edit',
        label: 'Edit',
        icon: <IconEdit size={16} />,
        onClick: () => {
          alert(`Editing ${file.name}`);
        }
      },
      {
        key: 'divider1',
        type: 'divider'
      },
      {
        key: 'copy',
        label: 'Copy',
        icon: <IconCopy size={16} />,
        onClick: () => {
          alert(`Copied ${file.name}`);
        }
      },
      {
        key: 'cut',
        label: 'Cut',
        icon: <IconCut size={16} />,
        onClick: () => {
          alert(`Cut ${file.name}`);
        }
      },
      {
        key: 'paste',
        label: 'Paste',
        icon: <IconPaste size={16} />,
        disabled: true,
        onClick: () => {
          alert('Paste clicked');
        }
      },
      {
        key: 'divider2',
        type: 'divider'
      },
      {
        key: 'rename',
        label: 'Rename',
        onClick: () => {
          const newName = prompt('Enter new name:', file.name);
          if (newName) {
            setFiles(files.map(f => 
              f.id === file.id ? { ...f, name: newName } : f
            ));
          }
        }
      },
      {
        key: 'delete',
        label: 'Delete',
        icon: <IconTrash size={16} />,
        color: 'red',
        onClick: () => {
          if (confirm(`Delete ${file.name}?`)) {
            setFiles(files.filter(f => f.id !== file.id));
          }
        }
      }
    ];

    showContextMenu({
      event,
      items: menuItems
    });
  };

  return (
    <Box p="xl">
      <h2>File Manager with Context Menu</h2>
      <Box mt="md">
        {files.map(file => (
          <Paper
            key={file.id}
            p="md"
            mb="sm"
            onContextMenu={(e) => handleFileRightClick(e, file)}
            style={{
              cursor: 'context-menu',
              border: selectedFile?.id === file.id ? '2px solid #007bff' : '1px solid #ddd',
              borderRadius: '8px'
            }}
          >
            <Group>
              {file.type === 'folder' ? (
                <IconFolder size={24} color="#ffc107" />
              ) : (
                <IconFile size={24} color="#007bff" />
              )}
              <Text>{file.name}</Text>
            </Group>
          </Paper>
        ))}
      </Box>
      <Text size="sm" color="dimmed" mt="md">
        Right-click on any file or folder to see the context menu
      </Text>
    </Box>
  );
}

export default FileManagerWithContextMenu;

Now create a table with row context menus:

// src/TableWithContextMenu.jsx
import React, { useState } from 'react';
import { useContextMenu } from 'mantine-contextmenu';
import { Box, Table, Text, Badge } from '@mantine/core';
import { IconEdit, IconTrash, IconEye, IconDownload } from '@tabler/icons-react';

function TableWithContextMenu() {
  const showContextMenu = useContextMenu();
  const [users, setUsers] = useState([
    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User' }
  ]);

  const handleRowRightClick = (event, user) => {
    showContextMenu({
      event,
      items: [
        {
          key: 'view',
          label: 'View Details',
          icon: <IconEye size={16} />,
          onClick: () => {
            alert(`Viewing ${user.name}`);
          }
        },
        {
          key: 'edit',
          label: 'Edit User',
          icon: <IconEdit size={16} />,
          onClick: () => {
            alert(`Editing ${user.name}`);
          }
        },
        {
          key: 'download',
          label: 'Download',
          icon: <IconDownload size={16} />,
          onClick: () => {
            alert(`Downloading ${user.name}'s data`);
          }
        },
        {
          key: 'divider',
          type: 'divider'
        },
        {
          key: 'delete',
          label: 'Delete User',
          icon: <IconTrash size={16} />,
          color: 'red',
          onClick: () => {
            if (confirm(`Delete ${user.name}?`)) {
              setUsers(users.filter(u => u.id !== user.id));
            }
          }
        }
      ]
    });
  };

  return (
    <Box p="xl">
      <h2>Table with Context Menu</h2>
      <Table mt="md" striped highlightOnHover>
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
          </tr>
        </thead>
        <tbody>
          {users.map(user => (
            <tr
              key={user.id}
              onContextMenu={(e) => handleRowRightClick(e, user)}
              style={{ cursor: 'context-menu' }}
            >
              <td>{user.name}</td>
              <td>{user.email}</td>
              <td>
                <Badge color={user.role === 'Admin' ? 'red' : 'blue'}>
                  {user.role}
                </Badge>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
      <Text size="sm" color="dimmed" mt="md">
        Right-click on any row to see the context menu
      </Text>
    </Box>
  );
}

export default TableWithContextMenu;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import FileManagerWithContextMenu from './FileManagerWithContextMenu';
import TableWithContextMenu from './TableWithContextMenu';
import './App.css';

function App() {
  return (
    <div className="App">
      <FileManagerWithContextMenu />
      <TableWithContextMenu />
    </div>
  );
}

export default App;

This example demonstrates:

File manager with context menus
Table rows with context menus
Menu items with icons
Submenus and dividers
Dynamic menu items based on context
State management for selected items

Common Issues / Troubleshooting

Context menu not appearing: Ensure ContextMenuProvider wraps your app and MantineProvider is set up correctly. Also make sure you're calling showContextMenu with a valid event object.
Menu positioning issues: The menu automatically positions itself based on the event coordinates. If it appears in the wrong place, check that you're passing the correct event object from onContextMenu.
Menu items not working: Ensure onClick handlers are properly defined. Check for JavaScript errors in the console that might prevent handlers from executing.
Submenus not displaying: Make sure submenu items are defined in the children property of a menu item. The structure should be: { key: 'parent', label: 'Parent', children: [...] }.
Styling conflicts: If the menu doesn't look right, check for CSS conflicts with Mantine styles. You can customize menu appearance using Mantine's theming system.
Event propagation: If the context menu appears but immediately disappears, you might need to call event.preventDefault() in your onContextMenu handler to prevent default browser behavior.

Next Steps

Now that you have an advanced understanding of mantine-contextmenu:

Explore advanced menu configurations and theming
Learn about custom menu item rendering
Implement keyboard navigation for accessibility
Add menu item states (disabled, loading, etc.)
Integrate with Mantine's notification system
Learn about other context menu libraries
Check the official repository: https://github.com/icflorescu/mantine-contextmenu
Look for part 46 of this series for more advanced topics

Summary

You've successfully integrated mantine-contextmenu into your React application with advanced features including file manager context menus, table row menus, submenus, and custom menu items. mantine-contextmenu provides a powerful, Mantine-integrated solution for creating context menus with extensive customization options.

SEO Keywords

mantine-contextmenu
React context menu
mantine-contextmenu tutorial
React right-click menu
mantine-contextmenu installation
React Mantine context menu
mantine-contextmenu example
React contextual menu
mantine-contextmenu setup
React menu library
mantine-contextmenu customization
React context menu hooks
mantine-contextmenu submenus
React Mantine UI
mantine-contextmenu getting started

Building Circular Navigation Menus with react-planet in React

William Baker — Mon, 19 Jan 2026 16:47:13 +0000

React Planet is a library for creating circular, orbital navigation menus in React applications. It provides a unique way to display menu items in a circular arrangement around a central button, creating an engaging and space-efficient navigation experience. This guide walks through setting up and creating circular navigation menus using React Planet with React, from installation to a working implementation. This is part 44 of a series on using React Planet with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Familiarity with JavaScript/TypeScript
Understanding of CSS for styling

Installation

Install React Planet using your preferred package manager:

npm install react-planet

Or with yarn:

yarn add react-planet

Or with pnpm:

pnpm add react-planet

After installation, your package.json should include:

{
  "dependencies": {
    "react-planet": "^1.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Planet requires minimal setup. Import the component and you're ready to use it.

First Example / Basic Usage

Let's create a simple circular menu. Create a new file src/PlanetMenuExample.jsx:

// src/PlanetMenuExample.jsx
import React from 'react';
import { Planet } from 'react-planet';

function PlanetMenuExample() {
  const menuItems = [
    { id: 1, content: '🏠', tooltip: 'Home' },
    { id: 2, content: 'ℹ️', tooltip: 'About' },
    { id: 3, content: '⚙️', tooltip: 'Settings' },
    { id: 4, content: '📧', tooltip: 'Contact' }
  ];

  return (
    <div style={{ 
      padding: '50px', 
      display: 'flex', 
      justifyContent: 'center', 
      alignItems: 'center',
      minHeight: '400px'
    }}>
      <Planet
        centerContent={<div style={{
          width: '60px',
          height: '60px',
          borderRadius: '50%',
          backgroundColor: '#007bff',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
          fontSize: '24px',
          cursor: 'pointer',
          boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
        }}>☰</div>}
        hideOrbit
        open
      >
        {menuItems.map(item => (
          <div
            key={item.id}
            style={{
              width: '50px',
              height: '50px',
              borderRadius: '50%',
              backgroundColor: '#28a745',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '24px',
              cursor: 'pointer',
              boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
              transition: 'transform 0.2s'
            }}
            title={item.tooltip}
            onClick={() => alert(`Clicked ${item.tooltip}`)}
          >
            {item.content}
          </div>
        ))}
      </Planet>
    </div>
  );
}

export default PlanetMenuExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import PlanetMenuExample from './PlanetMenuExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <PlanetMenuExample />
    </div>
  );
}

export default App;

This creates a basic circular menu with items arranged around a central button.

Understanding the Basics

React Planet provides several key features:

Planet component: The main component that creates the circular menu
centerContent: The central button/content that triggers the menu
Orbital items: Menu items that orbit around the center
Animation: Smooth animations for opening and closing
Customization: Extensive styling and positioning options

Key concepts:

Center Content: The main button or content in the center of the circle
Orbital Items: Menu items that appear around the center in a circular pattern
Open State: Control whether the menu is open or closed
Positioning: Items are automatically positioned in a circle
Styling: Customize the appearance of both center and orbital items

Here's an example with toggle functionality:

// src/TogglePlanetMenu.jsx
import React, { useState } from 'react';
import { Planet } from 'react-planet';

function TogglePlanetMenu() {
  const [isOpen, setIsOpen] = useState(false);

  const menuItems = [
    { id: 1, content: '🏠', label: 'Home', color: '#007bff' },
    { id: 2, content: '📊', label: 'Dashboard', color: '#28a745' },
    { id: 3, content: '⚙️', label: 'Settings', color: '#ffc107' },
    { id: 4, content: '👤', label: 'Profile', color: '#dc3545' },
    { id: 5, content: '📧', label: 'Messages', color: '#6c757d' }
  ];

  return (
    <div style={{ 
      padding: '50px', 
      display: 'flex', 
      justifyContent: 'center', 
      alignItems: 'center',
      minHeight: '500px'
    }}>
      <Planet
        centerContent={
          <div
            onClick={() => setIsOpen(!isOpen)}
            style={{
              width: '70px',
              height: '70px',
              borderRadius: '50%',
              backgroundColor: isOpen ? '#dc3545' : '#007bff',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: 'white',
              fontSize: '28px',
              cursor: 'pointer',
              boxShadow: '0 4px 8px rgba(0,0,0,0.2)',
              transition: 'all 0.3s',
              transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)'
            }}
          >
            {isOpen ? '✕' : '☰'}
          </div>
        }
        hideOrbit
        open={isOpen}
      >
        {menuItems.map(item => (
          <div
            key={item.id}
            style={{
              width: '60px',
              height: '60px',
              borderRadius: '50%',
              backgroundColor: item.color,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '24px',
              cursor: 'pointer',
              boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
              transition: 'transform 0.2s',
              position: 'relative'
            }}
            title={item.label}
            onClick={() => {
              alert(`Clicked ${item.label}`);
              setIsOpen(false);
            }}
            onMouseEnter={(e) => e.target.style.transform = 'scale(1.1)'}
            onMouseLeave={(e) => e.target.style.transform = 'scale(1)'}
          >
            {item.content}
          </div>
        ))}
      </Planet>
    </div>
  );
}

export default TogglePlanetMenu;

Practical Example / Building Something Real

Let's build a comprehensive navigation system with a circular menu:

// src/CircularNavigation.jsx
import React, { useState } from 'react';
import { Planet } from 'react-planet';

function CircularNavigation() {
  const [isOpen, setIsOpen] = useState(false);
  const [activeItem, setActiveItem] = useState(null);

  const menuItems = [
    { 
      id: 1, 
      icon: '🏠', 
      label: 'Home', 
      color: '#007bff',
      action: () => console.log('Navigate to Home')
    },
    { 
      id: 2, 
      icon: '📊', 
      label: 'Analytics', 
      color: '#28a745',
      action: () => console.log('Navigate to Analytics')
    },
    { 
      id: 3, 
      icon: '📁', 
      label: 'Files', 
      color: '#ffc107',
      action: () => console.log('Navigate to Files')
    },
    { 
      id: 4, 
      icon: '⚙️', 
      label: 'Settings', 
      color: '#dc3545',
      action: () => console.log('Navigate to Settings')
    },
    { 
      id: 5, 
      icon: '👤', 
      label: 'Profile', 
      color: '#6c757d',
      action: () => console.log('Navigate to Profile')
    },
    { 
      id: 6, 
      icon: '📧', 
      label: 'Messages', 
      color: '#17a2b8',
      action: () => console.log('Navigate to Messages')
    }
  ];

  const handleItemClick = (item) => {
    setActiveItem(item.id);
    item.action();
    setIsOpen(false);
  };

  return (
    <div style={{ 
      padding: '50px', 
      display: 'flex', 
      flexDirection: 'column',
      alignItems: 'center',
      minHeight: '600px',
      backgroundColor: '#f8f9fa'
    }}>
      <h1 style={{ marginBottom: '40px' }}>Circular Navigation Menu</h1>

      <Planet
        centerContent={
          <div
            onClick={() => setIsOpen(!isOpen)}
            style={{
              width: '80px',
              height: '80px',
              borderRadius: '50%',
              background: isOpen 
                ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
                : 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: 'white',
              fontSize: '32px',
              cursor: 'pointer',
              boxShadow: '0 6px 12px rgba(0,0,0,0.15)',
              transition: 'all 0.3s',
              transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)'
            }}
          >
            {isOpen ? '✕' : '☰'}
          </div>
        }
        hideOrbit
        open={isOpen}
        orbitRadius={120}
      >
        {menuItems.map(item => (
          <div
            key={item.id}
            onClick={() => handleItemClick(item)}
            style={{
              width: '70px',
              height: '70px',
              borderRadius: '50%',
              backgroundColor: activeItem === item.id ? '#fff' : item.color,
              border: activeItem === item.id ? `4px solid ${item.color}` : 'none',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '28px',
              cursor: 'pointer',
              boxShadow: '0 4px 8px rgba(0,0,0,0.2)',
              transition: 'all 0.3s',
              position: 'relative'
            }}
            title={item.label}
            onMouseEnter={(e) => {
              if (activeItem !== item.id) {
                e.target.style.transform = 'scale(1.15)';
                e.target.style.boxShadow = '0 6px 12px rgba(0,0,0,0.3)';
              }
            }}
            onMouseLeave={(e) => {
              if (activeItem !== item.id) {
                e.target.style.transform = 'scale(1)';
                e.target.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
              }
            }}
          >
            {item.icon}
            {activeItem === item.id && (
              <div style={{
                position: 'absolute',
                bottom: '-30px',
                left: '50%',
                transform: 'translateX(-50%)',
                backgroundColor: '#333',
                color: 'white',
                padding: '4px 8px',
                borderRadius: '4px',
                fontSize: '12px',
                whiteSpace: 'nowrap'
              }}>
                {item.label}
              </div>
            )}
          </div>
        ))}
      </Planet>

      {activeItem && (
        <div style={{
          marginTop: '40px',
          padding: '20px',
          backgroundColor: 'white',
          borderRadius: '8px',
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        }}>
          <p>Active: {menuItems.find(item => item.id === activeItem)?.label}</p>
        </div>
      )}
    </div>
  );
}

export default CircularNavigation;

Now create a floating action button style menu:

// src/FloatingActionMenu.jsx
import React, { useState } from 'react';
import { Planet } from 'react-planet';

function FloatingActionMenu() {
  const [isOpen, setIsOpen] = useState(false);

  const quickActions = [
    { id: 1, icon: '➕', label: 'Add', color: '#28a745' },
    { id: 2, icon: '✏️', label: 'Edit', color: '#007bff' },
    { id: 3, icon: '📤', label: 'Share', color: '#ffc107' },
    { id: 4, icon: '🗑️', label: 'Delete', color: '#dc3545' }
  ];

  return (
    <div style={{
      position: 'fixed',
      bottom: '30px',
      right: '30px',
      zIndex: 1000
    }}>
      <Planet
        centerContent={
          <div
            onClick={() => setIsOpen(!isOpen)}
            style={{
              width: '60px',
              height: '60px',
              borderRadius: '50%',
              backgroundColor: '#007bff',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: 'white',
              fontSize: '24px',
              cursor: 'pointer',
              boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
              transition: 'all 0.3s',
              transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)'
            }}
          >
            {isOpen ? '✕' : '➕'}
          </div>
        }
        hideOrbit
        open={isOpen}
        orbitRadius={80}
      >
        {quickActions.map(action => (
          <div
            key={action.id}
            style={{
              width: '50px',
              height: '50px',
              borderRadius: '50%',
              backgroundColor: action.color,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '20px',
              cursor: 'pointer',
              boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
              transition: 'transform 0.2s'
            }}
            title={action.label}
            onClick={() => {
              alert(`Action: ${action.label}`);
              setIsOpen(false);
            }}
            onMouseEnter={(e) => e.target.style.transform = 'scale(1.1)'}
            onMouseLeave={(e) => e.target.style.transform = 'scale(1)'}
          >
            {action.icon}
          </div>
        ))}
      </Planet>
    </div>
  );
}

export default FloatingActionMenu;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import CircularNavigation from './CircularNavigation';
import FloatingActionMenu from './FloatingActionMenu';
import './App.css';

function App() {
  return (
    <div className="App">
      <CircularNavigation />
      <FloatingActionMenu />
    </div>
  );
}

export default App;

This example demonstrates:

Circular navigation menu with toggle
Active item highlighting
Hover effects and animations
Floating action button style
Multiple menu items in circular arrangement
Custom styling and theming

Common Issues / Troubleshooting

Menu items not appearing: Make sure the open prop is set to true and the Planet component is properly rendered. Check that menu items are passed as children.
Items not positioned correctly: Adjust the orbitRadius prop to control the distance of items from the center. Larger values create a bigger circle.
Animation not working: Ensure you're managing the open state correctly. The menu animates when the open prop changes.
Styling conflicts: If items don't look right, check for CSS conflicts. Use inline styles or CSS classes to customize the appearance of both center and orbital items.
Menu not closing: Make sure you have a way to set open to false. This can be done by clicking the center button again or clicking on a menu item.
Items overlapping: Adjust the orbitRadius or reduce the number of items if they're too close together. You can also adjust the size of individual items.

Next Steps

Now that you have an understanding of React Planet:

Explore advanced positioning and animation options
Learn about custom orbit configurations
Implement keyboard navigation for accessibility
Add custom animations and transitions
Integrate with React Router for navigation
Learn about other circular menu libraries
Check the official repository: https://github.com/innFactory/react-planet
Look for part 45 of this series for more advanced topics

Summary

You've successfully set up React Planet in your React application and created circular navigation menus with toggle functionality and custom styling. React Planet provides a unique and engaging way to display menu items in a circular arrangement.

SEO Keywords

react-planet
React circular menu
react-planet tutorial
React orbital navigation
react-planet installation
React circular navigation menu
react-planet example
React planet menu
react-planet setup
React circular UI
react-planet customization
React navigation component
react-planet animations
React floating menu
react-planet getting started

Getting Started with React Offcanvas: Building Side Panels

William Baker — Mon, 19 Jan 2026 16:46:06 +0000

React Offcanvas is a simple library for creating offcanvas (side panel) components in React applications. It provides an easy way to display content in a slide-out panel that overlays or pushes the main content, perfect for navigation menus, filters, and additional information panels. This guide walks through setting up and creating offcanvas panels using React Offcanvas with React, from installation to a working implementation. This is part 43 of a series on using React Offcanvas with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Familiarity with JavaScript/TypeScript

Installation

Install React Offcanvas using your preferred package manager:

npm install react-offcanvas

Or with yarn:

yarn add react-offcanvas

Or with pnpm:

pnpm add react-offcanvas

After installation, your package.json should include:

{
  "dependencies": {
    "react-offcanvas": "^0.4.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Offcanvas requires minimal setup. Import the component and styles:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple offcanvas panel. Create a new file src/OffcanvasExample.jsx:

// src/OffcanvasExample.jsx
import React, { useState } from 'react';
import Offcanvas from 'react-offcanvas';

function OffcanvasExample() {
  const [isOpen, setIsOpen] = useState(false);

  const toggleOffcanvas = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Offcanvas Example</h2>
      <button
        onClick={toggleOffcanvas}
        style={{
          padding: '10px 20px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        Open Offcanvas
      </button>
      <Offcanvas
        width={300}
        transitionDuration={300}
        isMenuOpen={isOpen}
        effect="overlay"
        position="right"
      >
        <div style={{ padding: '20px' }}>
          <h3>Offcanvas Panel</h3>
          <p>This is the offcanvas content.</p>
          <button
            onClick={toggleOffcanvas}
            style={{
              padding: '8px 16px',
              backgroundColor: '#dc3545',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              marginTop: '20px'
            }}
          >
            Close
          </button>
        </div>
      </Offcanvas>
    </div>
  );
}

export default OffcanvasExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import OffcanvasExample from './OffcanvasExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <OffcanvasExample />
    </div>
  );
}

export default App;

This creates a basic offcanvas panel that slides in from the right when the button is clicked.

Understanding the Basics

React Offcanvas provides several key features:

Offcanvas component: The main component that renders the side panel
isMenuOpen prop: Controls whether the offcanvas is open or closed
width prop: Sets the width of the offcanvas panel
position prop: Controls which side the panel slides in from (left, right, top, bottom)
effect prop: Controls how the panel appears (overlay, push, etc.)
transitionDuration: Controls animation speed

Key concepts:

State Management: Use useState to track whether the offcanvas is open or closed
Toggle Function: Create a function to toggle the offcanvas state
Positioning: Choose which side the panel slides in from
Effects: Different effects like overlay, push, or reveal
Styling: Customize the appearance with inline styles or CSS classes

Here's an example with different positions and effects:

// src/MultipleOffcanvasExample.jsx
import React, { useState } from 'react';
import Offcanvas from 'react-offcanvas';

function MultipleOffcanvasExample() {
  const [leftOpen, setLeftOpen] = useState(false);
  const [rightOpen, setRightOpen] = useState(false);
  const [topOpen, setTopOpen] = useState(false);

  return (
    <div style={{ padding: '20px' }}>
      <h2>Multiple Offcanvas Examples</h2>
      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', marginTop: '20px' }}>
        <button
          onClick={() => setLeftOpen(!leftOpen)}
          style={{
            padding: '10px 20px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Open Left
        </button>
        <button
          onClick={() => setRightOpen(!rightOpen)}
          style={{
            padding: '10px 20px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Open Right
        </button>
        <button
          onClick={() => setTopOpen(!topOpen)}
          style={{
            padding: '10px 20px',
            backgroundColor: '#ffc107',
            color: 'black',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Open Top
        </button>
      </div>

      <Offcanvas
        width={250}
        isMenuOpen={leftOpen}
        effect="overlay"
        position="left"
      >
        <div style={{ padding: '20px' }}>
          <h3>Left Panel</h3>
          <p>This panel slides in from the left.</p>
          <button onClick={() => setLeftOpen(false)}>Close</button>
        </div>
      </Offcanvas>

      <Offcanvas
        width={300}
        isMenuOpen={rightOpen}
        effect="overlay"
        position="right"
      >
        <div style={{ padding: '20px' }}>
          <h3>Right Panel</h3>
          <p>This panel slides in from the right.</p>
          <button onClick={() => setRightOpen(false)}>Close</button>
        </div>
      </Offcanvas>

      <Offcanvas
        width="100%"
        isMenuOpen={topOpen}
        effect="overlay"
        position="top"
      >
        <div style={{ padding: '20px' }}>
          <h3>Top Panel</h3>
          <p>This panel slides in from the top.</p>
          <button onClick={() => setTopOpen(false)}>Close</button>
        </div>
      </Offcanvas>
    </div>
  );
}

export default MultipleOffcanvasExample;

Practical Example / Building Something Real

Let's build a navigation menu with an offcanvas panel:

// src/NavigationWithOffcanvas.jsx
import React, { useState } from 'react';
import Offcanvas from 'react-offcanvas';

function NavigationWithOffcanvas() {
  const [isOpen, setIsOpen] = useState(false);

  const menuItems = [
    { id: 1, label: 'Home', href: '#home' },
    { id: 2, label: 'About', href: '#about' },
    { id: 3, label: 'Services', href: '#services' },
    { id: 4, label: 'Portfolio', href: '#portfolio' },
    { id: 5, label: 'Contact', href: '#contact' }
  ];

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <nav style={{
        backgroundColor: '#2c3e50',
        padding: '15px 30px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
      }}>
        <div style={{ color: 'white', fontSize: '24px', fontWeight: 'bold' }}>
          MyApp
        </div>
        <button
          onClick={toggleMenu}
          style={{
            padding: '8px 16px',
            backgroundColor: 'transparent',
            border: '2px solid white',
            color: 'white',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '16px'
          }}
        >
          ☰ Menu
        </button>
      </nav>

      <Offcanvas
        width={280}
        isMenuOpen={isOpen}
        effect="overlay"
        position="right"
        transitionDuration={300}
      >
        <div style={{
          padding: '30px 20px',
          height: '100%',
          backgroundColor: '#34495e',
          color: 'white'
        }}>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginBottom: '30px',
            paddingBottom: '20px',
            borderBottom: '2px solid rgba(255, 255, 255, 0.3)'
          }}>
            <h2 style={{ margin: 0 }}>Navigation</h2>
            <button
              onClick={toggleMenu}
              style={{
                background: 'none',
                border: 'none',
                color: 'white',
                fontSize: '24px',
                cursor: 'pointer',
                padding: '5px 10px'
              }}
            >
              ×
            </button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
            {menuItems.map(item => (
              <a
                key={item.id}
                href={item.href}
                onClick={toggleMenu}
                style={{
                  color: 'white',
                  textDecoration: 'none',
                  padding: '15px',
                  borderRadius: '8px',
                  transition: 'background-color 0.3s',
                  fontSize: '18px'
                }}
                onMouseEnter={(e) => e.target.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'}
                onMouseLeave={(e) => e.target.style.backgroundColor = 'transparent'}
              >
                {item.label}
              </a>
            ))}
          </div>
        </div>
      </Offcanvas>

      <div style={{ padding: '40px' }}>
        <h1>Welcome to My App</h1>
        <p>Click the menu button to open the offcanvas navigation panel.</p>
      </div>
    </div>
  );
}

export default NavigationWithOffcanvas;

Now create a filter panel component:

// src/FilterPanel.jsx
import React, { useState } from 'react';
import Offcanvas from 'react-offcanvas';

function FilterPanel() {
  const [isOpen, setIsOpen] = useState(false);
  const [filters, setFilters] = useState({
    category: '',
    priceRange: '',
    sortBy: ''
  });

  const handleFilterChange = (name, value) => {
    setFilters(prev => ({ ...prev, [name]: value }));
  };

  const applyFilters = () => {
    console.log('Applied filters:', filters);
    setIsOpen(false);
  };

  const clearFilters = () => {
    setFilters({ category: '', priceRange: '', sortBy: '' });
  };

  return (
    <div style={{ padding: '20px' }}>
      <button
        onClick={() => setIsOpen(true)}
        style={{
          padding: '10px 20px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        Open Filters
      </button>

      <Offcanvas
        width={320}
        isMenuOpen={isOpen}
        effect="overlay"
        position="right"
      >
        <div style={{ padding: '30px 20px', height: '100%' }}>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginBottom: '30px',
            paddingBottom: '20px',
            borderBottom: '2px solid #ddd'
          }}>
            <h2 style={{ margin: 0 }}>Filters</h2>
            <button
              onClick={() => setIsOpen(false)}
              style={{
                background: 'none',
                border: 'none',
                fontSize: '24px',
                cursor: 'pointer',
                padding: '5px 10px'
              }}
            >
              ×
            </button>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
            <div>
              <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
                Category
              </label>
              <select
                value={filters.category}
                onChange={(e) => handleFilterChange('category', e.target.value)}
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
              >
                <option value="">All Categories</option>
                <option value="electronics">Electronics</option>
                <option value="clothing">Clothing</option>
                <option value="books">Books</option>
                <option value="home">Home & Garden</option>
              </select>
            </div>

            <div>
              <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
                Price Range
              </label>
              <select
                value={filters.priceRange}
                onChange={(e) => handleFilterChange('priceRange', e.target.value)}
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
              >
                <option value="">All Prices</option>
                <option value="0-50">$0 - $50</option>
                <option value="50-100">$50 - $100</option>
                <option value="100-200">$100 - $200</option>
                <option value="200+">$200+</option>
              </select>
            </div>

            <div>
              <label style={{ display: 'block', marginBottom: '8px', fontWeight: '500' }}>
                Sort By
              </label>
              <select
                value={filters.sortBy}
                onChange={(e) => handleFilterChange('sortBy', e.target.value)}
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
              >
                <option value="">Default</option>
                <option value="price-asc">Price: Low to High</option>
                <option value="price-desc">Price: High to Low</option>
                <option value="name-asc">Name: A to Z</option>
                <option value="name-desc">Name: Z to A</option>
              </select>
            </div>
          </div>

          <div style={{
            display: 'flex',
            gap: '10px',
            marginTop: '30px',
            paddingTop: '20px',
            borderTop: '2px solid #ddd'
          }}>
            <button
              onClick={applyFilters}
              style={{
                flex: 1,
                padding: '12px',
                backgroundColor: '#007bff',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                fontSize: '16px'
              }}
            >
              Apply Filters
            </button>
            <button
              onClick={clearFilters}
              style={{
                flex: 1,
                padding: '12px',
                backgroundColor: '#6c757d',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                fontSize: '16px'
              }}
            >
              Clear
            </button>
          </div>
        </div>
      </Offcanvas>
    </div>
  );
}

export default FilterPanel;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import NavigationWithOffcanvas from './NavigationWithOffcanvas';
import FilterPanel from './FilterPanel';
import './App.css';

function App() {
  return (
    <div className="App">
      <NavigationWithOffcanvas />
      <div style={{ padding: '40px' }}>
        <FilterPanel />
      </div>
    </div>
  );
}

export default App;

This example demonstrates:

Navigation menu with offcanvas panel
Filter panel with form controls
Multiple offcanvas panels
Different positions (left, right, top)
State management for open/close
Custom styling and theming

Common Issues / Troubleshooting

Offcanvas not appearing: Make sure the isMenuOpen prop is set to true and the component is properly rendered. Check that you're managing the state correctly with useState.
Panel not closing: Ensure you have a close button or function that sets isMenuOpen to false. The offcanvas won't close automatically unless you handle the state.
Styling issues: If the offcanvas doesn't look right, check for CSS conflicts. You can customize the appearance using inline styles on the content div inside the Offcanvas component.
Position not working: Make sure you're using a valid position value: 'left', 'right', 'top', or 'bottom'. The default is usually 'left'.
Animation not smooth: Adjust the transitionDuration prop to control animation speed. Higher values (in milliseconds) create slower animations.
Content overflow: If content is too long, add scrolling to the offcanvas content div using overflow-y: auto in the style.

Next Steps

Now that you have a basic understanding of React Offcanvas:

Learn about different effects (overlay, push, reveal)
Explore advanced positioning options
Implement keyboard navigation for accessibility
Add animations and transitions
Integrate with React Router for navigation
Learn about other offcanvas libraries (react-sidebar, react-slide-menu)
Check the official repository: https://github.com/vutran/react-offcanvas
Look for part 44 of this series for more advanced topics

Summary

You've successfully set up React Offcanvas in your React application and created side panels for navigation and filters. React Offcanvas provides a simple solution for displaying content in slide-out panels with smooth animations.

SEO Keywords

react-offcanvas
React side panel
react-offcanvas tutorial
React slide-out menu
react-offcanvas installation
React offcanvas component
react-offcanvas example
React side navigation
react-offcanvas setup
React panel component
react-offcanvas customization
React overlay panel
react-offcanvas positioning
React side menu
react-offcanvas getting started

Advanced Slide-Out Menus with react-burger-menu in React

William Baker — Mon, 19 Jan 2026 16:44:44 +0000

react-burger-menu is a powerful library for creating animated slide-out navigation menus in React applications. It provides multiple animation styles, customizable positioning, and advanced features for building sophisticated mobile and desktop navigation experiences. This guide walks through advanced usage of react-burger-menu with React, including custom configurations, multiple menu styles, and complex navigation patterns. This is part 42 of a series on using react-burger-menu with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect)
Familiarity with JavaScript/TypeScript
Understanding of CSS for styling and animations

Installation

Install react-burger-menu using your preferred package manager:

npm install react-burger-menu

Or with yarn:

yarn add react-burger-menu

Or with pnpm:

pnpm add react-burger-menu

After installation, your package.json should include:

{
  "dependencies": {
    "react-burger-menu": "^3.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

react-burger-menu requires CSS imports for styling. Import the styles in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'react-burger-menu/lib/styles.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple slide-out menu. Create a new file src/BurgerMenuExample.jsx:

// src/BurgerMenuExample.jsx
import React, { useState } from 'react';
import { slide as Menu } from 'react-burger-menu';

function BurgerMenuExample() {
  const [isOpen, setOpen] = useState(false);

  const handleStateChange = (state) => {
    setOpen(state.isOpen);
  };

  const closeMenu = () => {
    setOpen(false);
  };

  return (
    <div>
      <Menu
        isOpen={isOpen}
        onStateChange={handleStateChange}
        width={280}
        right
      >
        <a id="home" className="menu-item" href="/" onClick={closeMenu}>
          Home
        </a>
        <a id="about" className="menu-item" href="/about" onClick={closeMenu}>
          About
        </a>
        <a id="contact" className="menu-item" href="/contact" onClick={closeMenu}>
          Contact
        </a>
      </Menu>
      <div style={{ padding: '20px' }}>
        <h2>Main Content</h2>
        <p>Click the hamburger icon to open the menu.</p>
      </div>
    </div>
  );
}

export default BurgerMenuExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import BurgerMenuExample from './BurgerMenuExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <BurgerMenuExample />
    </div>
  );
}

export default App;

Understanding the Basics

react-burger-menu provides several animation styles:

slide: Slides in from the side
stack: Stacks menu items
elastic: Elastic animation effect
bubble: Bubble animation
push: Pushes content aside
rotate: Rotates while opening
scaleDown: Scales down while opening
scaleRotate: Combines scale and rotate
fallDown: Falls down from top
reveal: Reveals menu behind content

Key concepts for advanced usage:

Menu Components: Import different animation styles as components
State Management: Control menu open/close state with isOpen prop
Event Handlers: Use onStateChange to track menu state changes
Positioning: Control menu position with left or right props
Customization: Extensive styling and behavior customization options

Here's an example with different animation styles:

// src/AnimationStylesExample.jsx
import React, { useState } from 'react';
import { slide, stack, elastic, bubble } from 'react-burger-menu';

function AnimationStylesExample() {
  const [isOpen, setOpen] = useState(false);
  const [menuStyle, setMenuStyle] = useState('slide');

  const MenuComponent = {
    slide,
    stack,
    elastic,
    bubble
  }[menuStyle] || slide;

  const menuItems = [
    { id: 'home', label: 'Home', href: '#home' },
    { id: 'about', label: 'About', href: '#about' },
    { id: 'services', label: 'Services', href: '#services' },
    { id: 'contact', label: 'Contact', href: '#contact' }
  ];

  return (
    <div>
      <div style={{ padding: '20px', backgroundColor: '#f0f0f0' }}>
        <h2>Menu Animation Styles</h2>
        <div style={{ marginBottom: '20px' }}>
          <label>Select Style: </label>
          <select
            value={menuStyle}
            onChange={(e) => {
              setMenuStyle(e.target.value);
              setOpen(false);
            }}
            style={{ padding: '5px', marginLeft: '10px' }}
          >
            <option value="slide">Slide</option>
            <option value="stack">Stack</option>
            <option value="elastic">Elastic</option>
            <option value="bubble">Bubble</option>
          </select>
        </div>
      </div>
      <MenuComponent
        isOpen={isOpen}
        onStateChange={(state) => setOpen(state.isOpen)}
        width={280}
        right
      >
        {menuItems.map(item => (
          <a
            key={item.id}
            id={item.id}
            className="menu-item"
            href={item.href}
            onClick={() => setOpen(false)}
          >
            {item.label}
          </a>
        ))}
      </MenuComponent>
      <div style={{ padding: '20px' }}>
        <button
          onClick={() => setOpen(!isOpen)}
          style={{
            padding: '10px 20px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Toggle Menu
        </button>
      </div>
    </div>
  );
}

export default AnimationStylesExample;

Practical Example / Building Something Real

Let's build a comprehensive navigation system with multiple menu styles and advanced features:

// src/AdvancedNavigation.jsx
import React, { useState, useEffect } from 'react';
import { slide, stack, elastic } from 'react-burger-menu';

function AdvancedNavigation() {
  const [isOpen, setOpen] = useState(false);
  const [menuStyle, setMenuStyle] = useState('slide');
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
      if (window.innerWidth > 768) {
        setOpen(false);
      }
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const MenuComponent = {
    slide,
    stack,
    elastic
  }[menuStyle] || slide;

  const menuItems = [
    { id: 'home', label: 'Home', href: '#home', icon: '🏠' },
    { id: 'about', label: 'About', href: '#about', icon: 'ℹ️' },
    { id: 'services', label: 'Services', href: '#services', icon: '⚙️' },
    { id: 'portfolio', label: 'Portfolio', href: '#portfolio', icon: '📁' },
    { id: 'blog', label: 'Blog', href: '#blog', icon: '📝' },
    { id: 'contact', label: 'Contact', href: '#contact', icon: '📧' }
  ];

  const handleStateChange = (state) => {
    setOpen(state.isOpen);
  };

  const closeMenu = () => {
    setOpen(false);
  };

  return (
    <div style={{ minHeight: '100vh' }}>
      {/* Mobile Menu */}
      {isMobile && (
        <MenuComponent
          isOpen={isOpen}
          onStateChange={handleStateChange}
          width={300}
          right
          customBurgerIcon={false}
          customCrossIcon={false}
          styles={{
            bmMenu: {
              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
              padding: '2.5em 1.5em 0',
              fontSize: '1.15em'
            },
            bmItemList: {
              color: '#b8b7ad',
              padding: '0.8em'
            },
            bmItem: {
              display: 'block',
              color: 'white',
              textDecoration: 'none',
              padding: '15px',
              marginBottom: '10px',
              borderRadius: '8px',
              transition: 'background-color 0.3s'
            },
            bmOverlay: {
              background: 'rgba(0, 0, 0, 0.3)'
            }
          }}
        >
          <div style={{
            color: 'white',
            fontSize: '24px',
            fontWeight: 'bold',
            marginBottom: '30px',
            paddingBottom: '20px',
            borderBottom: '2px solid rgba(255, 255, 255, 0.3)'
          }}>
            Navigation
          </div>
          {menuItems.map(item => (
            <a
              key={item.id}
              id={item.id}
              className="menu-item"
              href={item.href}
              onClick={closeMenu}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '15px',
                color: 'white',
                textDecoration: 'none',
                padding: '15px',
                marginBottom: '10px',
                borderRadius: '8px',
                transition: 'background-color 0.3s'
              }}
              onMouseEnter={(e) => e.target.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'}
              onMouseLeave={(e) => e.target.style.backgroundColor = 'transparent'}
            >
              <span style={{ fontSize: '20px' }}>{item.icon}</span>
              <span>{item.label}</span>
            </a>
          ))}
        </MenuComponent>
      )}

      {/* Desktop Navigation */}
      {!isMobile && (
        <nav style={{
          backgroundColor: '#2c3e50',
          padding: '15px 30px',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        }}>
          <div style={{ color: 'white', fontSize: '24px', fontWeight: 'bold' }}>
            MyApp
          </div>
          <div style={{ display: 'flex', gap: '30px' }}>
            {menuItems.map(item => (
              <a
                key={item.id}
                href={item.href}
                style={{
                  color: 'white',
                  textDecoration: 'none',
                  padding: '8px 15px',
                  borderRadius: '4px',
                  transition: 'background-color 0.3s'
                }}
                onMouseEnter={(e) => e.target.style.backgroundColor = '#34495e'}
                onMouseLeave={(e) => e.target.style.backgroundColor = 'transparent'}
              >
                {item.label}
              </a>
            ))}
          </div>
        </nav>
      )}

      {/* Main Content */}
      <div style={{ padding: '40px' }}>
        <h1>Welcome to My App</h1>
        <p>This is the main content area.</p>
        {isMobile && (
          <button
            onClick={() => setOpen(!isOpen)}
            style={{
              marginTop: '20px',
              padding: '10px 20px',
              backgroundColor: '#007bff',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            {isOpen ? 'Close Menu' : 'Open Menu'}
          </button>
        )}
      </div>
    </div>
  );
}

export default AdvancedNavigation;

Add custom styles in App.css:

/* src/App.css */
.menu-item {
  display: block;
  color: white;
  text-decoration: none;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

Update your App.jsx:

// src/App.jsx
import React from 'react';
import AdvancedNavigation from './AdvancedNavigation';
import './App.css';

function App() {
  return (
    <div className="App">
      <AdvancedNavigation />
    </div>
  );
}

export default App;

This example demonstrates:

Responsive navigation (mobile vs desktop)
Multiple animation styles
Custom styling and theming
Icon support in menu items
State management for menu open/close
Smooth animations and transitions

Common Issues / Troubleshooting

Menu not appearing: Make sure you've imported the CSS file (import 'react-burger-menu/lib/styles.css'). Also ensure the menu component is properly rendered and the isOpen state is being managed correctly.
Menu not closing: Ensure you're calling the close function when menu items are clicked. Use onClick={() => setOpen(false)} on menu items.
Styling conflicts: If the menu doesn't look right, check for CSS conflicts. You can override default styles using the styles prop on the menu component.
Animation not working: Make sure you're importing the correct animation style component (e.g., slide, stack, elastic). Each style is a separate component.
Menu positioning issues: Use the left or right props to control which side the menu slides in from. The default is left.
State management: The menu state should be controlled by the isOpen prop. Use onStateChange to sync your state with the menu's internal state.

Next Steps

Now that you have an advanced understanding of react-burger-menu:

Explore all available animation styles
Learn about custom burger and cross icons
Implement keyboard navigation for accessibility
Add menu item animations and transitions
Integrate with React Router for navigation
Learn about other menu libraries (react-sidebar, react-slide-menu)
Check the official repository: https://github.com/negomi/react-burger-menu
Look for part 43 of this series for more advanced topics

Summary

You've successfully integrated react-burger-menu into your React application with advanced features including multiple animation styles, responsive navigation, custom styling, and comprehensive state management. react-burger-menu provides a flexible solution for creating animated slide-out navigation menus.

SEO Keywords

react-burger-menu
React slide-out menu
react-burger-menu tutorial
React animated navigation
react-burger-menu installation
React mobile menu
react-burger-menu example
React sidebar menu
react-burger-menu setup
React menu animations
react-burger-menu customization
React navigation component
react-burger-menu styles
React mobile navigation
react-burger-menu getting started

Building Animated Hamburger Menus with hamburger-react in React

William Baker — Mon, 19 Jan 2026 16:43:06 +0000

hamburger-react is a lightweight React library for creating animated hamburger menu icons with multiple animation styles. It provides a simple API for toggling between hamburger and close (X) states with smooth animations, perfect for navigation menus and mobile interfaces. This guide walks through setting up and creating animated hamburger menus using hamburger-react with React, from installation to a working implementation. This is part 41 of a series on using hamburger-react with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Familiarity with JavaScript/TypeScript
Understanding of CSS for styling

Installation

Install hamburger-react using your preferred package manager:

npm install hamburger-react

Or with yarn:

yarn add hamburger-react

Or with pnpm:

pnpm add hamburger-react

After installation, your package.json should include:

{
  "dependencies": {
    "hamburger-react": "^2.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

hamburger-react requires no additional setup. You can start using it immediately after installation.

First Example / Basic Usage

Let's create a simple hamburger menu component. Create a new file src/HamburgerExample.jsx:

// src/HamburgerExample.jsx
import React, { useState } from 'react';
import { Hamburger } from 'hamburger-react';

function HamburgerExample() {
  const [isOpen, setOpen] = useState(false);

  return (
    <div style={{ padding: '20px' }}>
      <h2>Hamburger Menu Example</h2>
      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
        <Hamburger toggled={isOpen} toggle={setOpen} />
        <span>{isOpen ? 'Menu is open' : 'Menu is closed'}</span>
      </div>
    </div>
  );
}

export default HamburgerExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import HamburgerExample from './HamburgerExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <HamburgerExample />
    </div>
  );
}

export default App;

This creates a basic hamburger icon that toggles between hamburger and close (X) states when clicked.

Understanding the Basics

hamburger-react provides several key features:

Hamburger component: The main component that renders the animated icon
toggled prop: Controls whether the hamburger is in the open (X) or closed (hamburger) state
toggle prop: Function to update the toggled state
Animation styles: Multiple built-in animation styles
Customization: Size, color, and other styling options

Key concepts:

Controlled Component: The hamburger is a controlled component - you manage its state
State Management: Use useState to track whether the menu is open or closed
Toggle Function: Pass a state setter function to the toggle prop
Animation Styles: Choose from different animation styles like 'spin', 'squeeze', 'rotate', etc.
Styling: Customize size, color, and other visual properties

Here's an example with different animation styles:

// src/AnimationStylesExample.jsx
import React, { useState } from 'react';
import { Hamburger } from 'hamburger-react';

function AnimationStylesExample() {
  const [isOpen1, setOpen1] = useState(false);
  const [isOpen2, setOpen2] = useState(false);
  const [isOpen3, setOpen3] = useState(false);

  return (
    <div style={{ padding: '20px' }}>
      <h2>Different Animation Styles</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', marginTop: '20px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <Hamburger toggled={isOpen1} toggle={setOpen1} />
          <span>Default style</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <Hamburger toggled={isOpen2} toggle={setOpen2} size={30} />
          <span>Larger size</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <Hamburger toggled={isOpen3} toggle={setOpen3} color="#007bff" />
          <span>Custom color</span>
        </div>
      </div>
    </div>
  );
}

export default AnimationStylesExample;

Practical Example / Building Something Real

Let's build a navigation menu with a hamburger icon:

// src/NavigationMenu.jsx
import React, { useState } from 'react';
import { Hamburger } from 'hamburger-react';

function NavigationMenu() {
  const [isOpen, setOpen] = useState(false);

  const menuItems = [
    { id: 1, label: 'Home', href: '#home' },
    { id: 2, label: 'About', href: '#about' },
    { id: 3, label: 'Services', href: '#services' },
    { id: 4, label: 'Contact', href: '#contact' }
  ];

  return (
    <nav style={{
      backgroundColor: '#333',
      padding: '10px 20px',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      position: 'relative'
    }}>
      <div style={{ color: 'white', fontSize: '20px', fontWeight: 'bold' }}>
        Logo
      </div>

      {/* Desktop Menu */}
      <div style={{
        display: window.innerWidth > 768 ? 'flex' : 'none',
        gap: '20px'
      }}>
        {menuItems.map(item => (
          <a
            key={item.id}
            href={item.href}
            style={{
              color: 'white',
              textDecoration: 'none',
              padding: '5px 10px'
            }}
          >
            {item.label}
          </a>
        ))}
      </div>

      {/* Mobile Hamburger */}
      <div style={{
        display: window.innerWidth <= 768 ? 'block' : 'none'
      }}>
        <Hamburger
          toggled={isOpen}
          toggle={setOpen}
          size={24}
          color="white"
        />
      </div>

      {/* Mobile Menu */}
      {isOpen && (
        <div style={{
          position: 'absolute',
          top: '100%',
          left: 0,
          right: 0,
          backgroundColor: '#333',
          padding: '20px',
          display: 'flex',
          flexDirection: 'column',
          gap: '10px',
          zIndex: 1000
        }}>
          {menuItems.map(item => (
            <a
              key={item.id}
              href={item.href}
              onClick={() => setOpen(false)}
              style={{
                color: 'white',
                textDecoration: 'none',
                padding: '10px',
                borderBottom: '1px solid #555'
              }}
            >
              {item.label}
            </a>
          ))}
        </div>
      )}
    </nav>
  );
}

export default NavigationMenu;

Now create a more advanced responsive navigation component:

// src/ResponsiveNavigation.jsx
import React, { useState, useEffect } from 'react';
import { Hamburger } from 'hamburger-react';

function ResponsiveNavigation() {
  const [isOpen, setOpen] = useState(false);
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
      if (window.innerWidth > 768) {
        setOpen(false);
      }
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const menuItems = [
    { id: 1, label: 'Home', href: '#home' },
    { id: 2, label: 'About', href: '#about' },
    { id: 3, label: 'Services', href: '#services' },
    { id: 4, label: 'Portfolio', href: '#portfolio' },
    { id: 5, label: 'Contact', href: '#contact' }
  ];

  return (
    <nav style={{
      backgroundColor: '#2c3e50',
      padding: '15px 30px',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      position: 'sticky',
      top: 0,
      zIndex: 1000,
      boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
    }}>
      <div style={{
        color: 'white',
        fontSize: '24px',
        fontWeight: 'bold',
        letterSpacing: '1px'
      }}>
        MyApp
      </div>

      {/* Desktop Menu */}
      {!isMobile && (
        <div style={{
          display: 'flex',
          gap: '30px',
          alignItems: 'center'
        }}>
          {menuItems.map(item => (
            <a
              key={item.id}
              href={item.href}
              style={{
                color: 'white',
                textDecoration: 'none',
                padding: '8px 15px',
                borderRadius: '4px',
                transition: 'background-color 0.3s'
              }}
              onMouseEnter={(e) => e.target.style.backgroundColor = '#34495e'}
              onMouseLeave={(e) => e.target.style.backgroundColor = 'transparent'}
            >
              {item.label}
            </a>
          ))}
        </div>
      )}

      {/* Mobile Hamburger */}
      {isMobile && (
        <div>
          <Hamburger
            toggled={isOpen}
            toggle={setOpen}
            size={28}
            color="white"
            rounded
          />
        </div>
      )}

      {/* Mobile Menu Overlay */}
      {isMobile && isOpen && (
        <>
          <div
            style={{
              position: 'fixed',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              backgroundColor: 'rgba(0, 0, 0, 0.5)',
              zIndex: 999
            }}
            onClick={() => setOpen(false)}
          />
          <div style={{
            position: 'fixed',
            top: 0,
            right: 0,
            width: '280px',
            height: '100vh',
            backgroundColor: '#2c3e50',
            padding: '20px',
            display: 'flex',
            flexDirection: 'column',
            gap: '10px',
            zIndex: 1000,
            boxShadow: '-2px 0 10px rgba(0,0,0,0.3)',
            transform: isOpen ? 'translateX(0)' : 'translateX(100%)',
            transition: 'transform 0.3s ease-in-out'
          }}>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              marginBottom: '20px',
              paddingBottom: '20px',
              borderBottom: '1px solid #34495e'
            }}>
              <div style={{ color: 'white', fontSize: '20px', fontWeight: 'bold' }}>
                Menu
              </div>
              <Hamburger
                toggled={isOpen}
                toggle={setOpen}
                size={24}
                color="white"
              />
            </div>
            {menuItems.map(item => (
              <a
                key={item.id}
                href={item.href}
                onClick={() => setOpen(false)}
                style={{
                  color: 'white',
                  textDecoration: 'none',
                  padding: '15px',
                  borderRadius: '4px',
                  transition: 'background-color 0.3s'
                }}
                onMouseEnter={(e) => e.target.style.backgroundColor = '#34495e'}
                onMouseLeave={(e) => e.target.style.backgroundColor = 'transparent'}
              >
                {item.label}
              </a>
            ))}
          </div>
        </>
      )}
    </nav>
  );
}

export default ResponsiveNavigation;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ResponsiveNavigation from './ResponsiveNavigation';
import './App.css';

function App() {
  return (
    <div className="App">
      <ResponsiveNavigation />
      <div style={{ padding: '40px' }}>
        <h1>Welcome to My App</h1>
        <p>This is the main content area. Resize your browser to see the responsive navigation menu.</p>
      </div>
    </div>
  );
}

export default App;

This example demonstrates:

Responsive navigation menu
Hamburger icon for mobile devices
Slide-in menu panel
Overlay background
Smooth animations
State management for menu open/close

Common Issues / Troubleshooting

Hamburger not animating: Make sure you're using the toggled and toggle props correctly. The toggled prop should be a boolean state, and toggle should be a function that updates that state.
Menu not closing: Ensure you're updating the state when menu items are clicked. Call setOpen(false) in the onClick handler of menu items.
Styling conflicts: If the hamburger doesn't look right, check for CSS conflicts. You can customize the appearance using the size, color, and rounded props.
Mobile menu not showing: Check that you're conditionally rendering the mobile menu based on screen size. Use window.innerWidth or CSS media queries to detect mobile devices.
Animation not smooth: hamburger-react handles animations automatically. If animations seem choppy, check for performance issues or CSS conflicts that might be affecting the component.
State not updating: Make sure you're using useState correctly and passing the state setter function to the toggle prop, not calling it directly.

Next Steps

Now that you have an understanding of hamburger-react:

Explore different animation styles and customization options
Learn about accessibility features for hamburger menus
Implement keyboard navigation for menu items
Add animations to the menu panel
Integrate with React Router for navigation
Learn about other menu libraries (react-burger-menu, react-sidebar)
Check the official repository: https://github.com/luukdv/hamburger-react
Look for part 42 of this series for more advanced topics

Summary

You've successfully set up hamburger-react in your React application and created a responsive navigation menu with an animated hamburger icon. hamburger-react provides a simple, elegant solution for creating hamburger menu icons with smooth animations.

SEO Keywords

hamburger-react
React hamburger menu
hamburger-react tutorial
React animated menu icon
hamburger-react installation
React mobile navigation
hamburger-react example
React responsive menu
hamburger-react setup
React menu toggle
hamburger-react customization
React navigation component
hamburger-react animations
React mobile menu
hamburger-react getting started