Getting started with React Sidebar component

3 Aug 20265 minutes to read

This section explains how to create a simple Sidebar component and configure its core functionalities in a React application.

Dependencies

The following dependencies are required to use the Sidebar component in an application.

|-- @syncfusion/ej2-react-navigations
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-navigations
        |-- @syncfusion/ej2-inputs
            |-- @syncfusion/ej2-splitbuttons
        |-- @syncfusion/ej2-lists
        |-- @syncfusion/ej2-popups
            |-- @syncfusion/ej2-buttons

Prerequisites

System requirements for Syncfusion® React UI components

Set up the Vite project

To create a new Vite project, use one of the commands that are specific to either NPM or Yarn.

npm create vite@latest my-project -- --template react
yarn create vite my-project --template react

After running the command, you will be prompted with a series of interactive questions to configure your project. Select the appropriate options for each prompt:

  1. Select a linter to use: Choose the linter for your project (for example, ESLint).
  2. Install with npm and start now?: Type Yes to proceed with installing the dependencies and automatically start the development server, or No to install dependencies manually later.

Navigate into the project directory with:

cd my-project

Add Syncfusion® React packages

Syncfusion® React component packages are available at npmjs.com. To use Syncfusion® React components in the project, install the corresponding npm package.

To install the React Sidebar component package, use the following command:

npm install @syncfusion/ej2-react-navigations
yarn add @syncfusion/ej2-react-navigations

Import Syncfusion® CSS styles

Themes for Syncfusion® React components can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.

This guide uses the Tailwind 3 theme as an example, sourced from the theme package. In this package, each component includes an index.css file that automatically loads all the required dependency styles. To install the Tailwind 3 theme package, use the following command:

npm install @syncfusion/ej2-tailwind3-theme
yarn add @syncfusion/ej2-tailwind3-theme

By default, Vite projects include default styles in the src/index.css and src/App.css files. These default styles may conflict with Syncfusion component styles. Clear all content from both files to prevent style conflicts.

The required styles for the Sidebar component are imported in the src/App.css file:

@import "@syncfusion/ej2-tailwind3-theme/styles/sidebar/index.css";

You can also refer to the combined CSS file for all Syncfusion components in your application. For more information, see the documentation on referring themes through npm packages.

Add Sidebar component

The SidebarComponent tag renders a panel for primary content placed aside from the main content. The immediate sibling element of SidebarComponent is treated as the main content area.

  • To include the Sidebar component in application import the SidebarComponent from ej2-react-navigations package in App.jsx.

  • Then add the Sidebar component as shown in below code example.

import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import './App.css';

function App() {
    return (
        <div className="control-section">
            <div id="wrapper">
                <SidebarComponent id="default-sidebar">
                    <div className="title"> Sidebar content</div>
                </SidebarComponent>
                <div className="content">
                    <div className="title">Main content</div>
                    <div className="sub-title"> content goes here</div>
                </div>
            </div>
        </div>
    );
}
export default App;

Run the application

To run the project, use the following command:

npm run dev
yarn run dev

Refer to the React Sidebar feature tour page for its groundbreaking feature representations. You can also explore our React Sidebar component example that shows how to render the Sidebar in React.

See Also