Getting Started

26 Jan 202424 minutes to read

The following section explains the required steps to build the simple Sidebar component with its basic usage in step by step procedure.

Dependencies

The following list of dependencies are required to use the Sidebar component in your 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

Installation and configuration

You can use create-react-app to setup the applications.
To install create-react-app run the following command.

npm install -g create-react-app
  • To setup basic React sample use following commands.
``` create-react-app quickstart --scripts-version=react-scripts-ts cd quickstart ```
``` create-react-app quickstart cd quickstart ```

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com public registry. You can choose the component that you want to install. For this application, we are going to use Sidebar component.

To install Sidebar component, use the following command

npm install @syncfusion/ej2-react-navigations --save

Adding Style sheet to the Application

To render the Sidebar component, need to import Sidebar and its dependent component’s styles as given below in App.css.

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-navigations/styles/material.css";

Note: If you want to refer the combined component styles, please make use of our CRG (Custom Resource Generator) in your application.

Adding Sidebar component to the Application

Sidebar can be initialized using the <SidebarComponent> tag, it’s used to render Sidebar as it contains primary content aside from the main content. The immediate sibling element of the Sidebar will be considered as the main content.

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

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

[src/App.tsx]

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

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;
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
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

Now run the npm start command in the console, it will run your application and open the browser window.


npm start

The following sample, shows the basic Sidebar component.

import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
function App() {
    let sidebarObj;
    function onCreate() {
        sidebarObj.element.style.visibility = '';
    }
    return (<div className="control-section">
            <div id="wrapper">
                {/* Initializing the Sidebar component */}
                <SidebarComponent id="default-sidebar" ref={Sidebar => sidebarObj = Sidebar} created={onCreate} style={{ visibility: "hidden" }}>
                    <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;
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';

function App() {
    let sidebarObj: SidebarComponent;
    function onCreate():void  {
       sidebarObj.element.style.visibility='';
    }
    return (
        <div className="control-section">
            <div id="wrapper">
                {/* Initializing the Sidebar component */}
                <SidebarComponent id="default-sidebar"  ref={Sidebar => sidebarObj = Sidebar as SidebarComponent}  created={onCreate} style={{visibility:"hidden"}}>
                    <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;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('sample'));

Enable backdrop

Enabling the showBackdrop in the Sidebar component will prevent the main content from user interactions.

Here, DOM elements will not get changed. It only closes the main content by covering with a black backdrop overlay and focuses the Sidebar in the screen. Sidebar can be rendered with specific width by setting width property

NOTE

To achieve a proper backdrop, we suggest that you create a wrapper parent container for the div block in which you intend to enable the backdrop. Set the class name of this parent container as the target for the Sidebar. Alternatively, you can place an empty div container after the target container.

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
function App() {
    let sidebarObj;
    let type = "Push";
    let showBackdrop = true;
    function onCreate() {
        sidebarObj.element.style.visibility = '';
    }
    // Toggle(Open/Close) the Sidebar
    function toggleClick() {
        sidebarObj.toggle();
    }
    // Close the Sidebar
    function closeClick() {
        sidebarObj.hide();
    }
    return (<div className="control-section">
            <div id="wrapper">
                {/* Initializing the Sidebar component */}
                <SidebarComponent id="default-sidebar" ref={Sidebar => sidebarObj = Sidebar} style={{ visibility: "hidden" }} created={onCreate} showBackdrop={showBackdrop} type={type} width="280px">
                    <div className="title"> Sidebar content</div>
                    <div className="sub-title">
                        Click the button to close the Sidebar.
                        </div>
                    <div className="center-align">
                        <ButtonComponent onClick={closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                    </div>
                </SidebarComponent>
                <div>
                    <div className="title">Main content</div>
                    <div className="sub-title"> Click the button to open/close the Sidebar.</div>
                    <div className="center-align">
                        <ButtonComponent onClick={toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
                    </div>
                </div>
            </div>
        </div>);
}
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';

function App(){
    let sidebarObj: SidebarComponent;
    let type: SidebarType = "Push";
    let showBackdrop: boolean = true;
    function onCreate(): void  {
        sidebarObj.element.style.visibility='';
    }
    // Toggle(Open/Close) the Sidebar
    function toggleClick(): void {
        sidebarObj.toggle();
    }
    // Close the Sidebar
    function closeClick(): void {
        sidebarObj.hide();
    }

    return (
        <div className="control-section">
            <div id="wrapper">
                {/* Initializing the Sidebar component */}
                <SidebarComponent id="default-sidebar" ref={Sidebar => sidebarObj = Sidebar as SidebarComponent} style={{visibility:"hidden"}} created={onCreate} showBackdrop={showBackdrop}  type={type} width="280px">
                    <div className="title"> Sidebar content</div>
                    <div className="sub-title">
                        Click the button to close the Sidebar.
                        </div>
                    <div className="center-align">
                        <ButtonComponent onClick={closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                    </div>
                </SidebarComponent>
                <div>
                    <div className="title">Main content</div>
                    <div className="sub-title"> Click the button to open/close the Sidebar.</div>
                    <div className="center-align">
                        <ButtonComponent onClick={toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('sample'));

Position

Positioning the Sidebar to the right or left of the main content can be achieved by using the position property. If the position is not set, the Sidebar will expand from the left to the body element. enablePersistence will persist the component’s state between page reloads. change event will be triggered when the state(expand/collapse) of the component is changed.

import { ButtonComponent, RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
function App() {
    let sidebarObj;
    let btnObj;
    let type = "Push";
    function onCreate() {
        sidebarObj.element.style.visibility = '';
    }
    // Toggle button click event handler
    function btnClick() {
        if (btnObj.element.classList.contains('e-active')) {
            btnObj.content = 'Close';
            btnObj.iconCss = 'e-icons burg-icon';
            sidebarObj.show();
        }
        else {
            btnObj.content = 'Open';
            btnObj.iconCss = 'e-icons burg-icon';
            sidebarObj.hide();
        }
    }
    // Toggle(Open/Close) the Sidebar
    function toggleClick() {
        sidebarObj.toggle();
    }
    // Close the Sidebar
    function closeClick() {
        sidebarObj.hide();
        btnObj.content = 'Open';
    }
    // function to handle the CheckBox change event
    function onChange(args) {
        sidebarObj.position = (args.event.target.id === "left") ? "Left" : "Right";
    }
    return (<div className="control-section">
            <div id="wrapper">
                {/* Initializing the Sidebar component */}
                <SidebarComponent id="default-sidebar" enablePersistence={true} ref={Sidebar => sidebarObj = Sidebar} style={{ visibility: "hidden" }} created={onCreate} type={type} width="280px">
                    <div className="title"> Sidebar content</div>
                    <div className="sub-title"> Click the button to close the Sidebar. </div>
                    <div className="center-align">
                        <ButtonComponent onClick={closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                    </div>
                </SidebarComponent>
                <div id="head">
                    <ButtonComponent id="toggle" ref={(scope) => { btnObj = scope; }} iconCss='e-icons burg-icon' isToggle={true} onClick={btnClick} className="e-btn e-info">Open</ButtonComponent>
                </div>
                <div id="maincontent" className="content">
                    <div>
                        <div className="title">Main content</div>
                        <div className="radiobutton">
                            <div className='row'>
                                <RadioButtonComponent id="left" checked={true} label='Left' name='position' change={onChange}/>
                            </div>
                            <div className='row'>
                                <RadioButtonComponent id="right" label='Right' name='position' change={onChange}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>);
}
export default App;
import { ButtonComponent, ChangeEventArgs, RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';

function App() {
    let sidebarObj: SidebarComponent;
    let btnObj: ButtonComponent;  
    let type: SidebarType = "Push";
    function onCreate(): void {
        sidebarObj.element.style.visibility='';
    }
    // Toggle button click event handler
    function btnClick(): void {
        if (btnObj.element.classList.contains('e-active')) {
            btnObj.content = 'Close';
            btnObj.iconCss = 'e-icons burg-icon';
            sidebarObj.show();
        } else {
            btnObj.content = 'Open';
            btnObj.iconCss = 'e-icons burg-icon';
            sidebarObj.hide();
        }
    }
    // Toggle(Open/Close) the Sidebar
    function toggleClick(): void {
        sidebarObj.toggle();
    }
    // Close the Sidebar
    function closeClick(): void {
          sidebarObj.hide();
          btnObj.content = 'Open';
    }
    // function to handle the CheckBox change event
    function onChange(args: ChangeEventArgs): void {
        sidebarObj.position = ((args as any).event.target.id === "left") ? "Left" : "Right";
    }

    return (
        <div className="control-section">
            <div id="wrapper">
                {/* Initializing the Sidebar component */}
                <SidebarComponent id="default-sidebar" enablePersistence={true} ref={Sidebar => sidebarObj = Sidebar as SidebarComponent}  style={{visibility:"hidden"}} created={onCreate} type={type}  width="280px">
                    <div className="title"> Sidebar content</div>
                    <div className="sub-title"> Click the button to close the Sidebar. </div>
                    <div className="center-align">
                        <ButtonComponent onClick={closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                    </div>
                </SidebarComponent>
                <div id="head">
                    <ButtonComponent id="toggle" ref={(scope) => { btnObj = scope as ButtonComponent; }} iconCss='e-icons burg-icon'
                        isToggle={true} onClick={btnClick} className="e-btn e-info">Open</ButtonComponent>
                </div>
                <div id="maincontent" className="content">
                    <div>
                        <div className="title">Main content</div>
                        <div className="radiobutton" >
                            <div className='row'>
                                <RadioButtonComponent id="left" checked={true} label='Left' name='position' change={onChange} />
                            </div>
                            <div className='row'>
                                <RadioButtonComponent id="right" label='Right' name='position' change={onChange} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('sample'));

Animate

Animation transitions can be set while expanding or collapsing the Sidebar using the animate property. By default , animate property is set to true. enableRTL will display the sidebar in the right-to-left direction.

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
function App() {
    let sidebarObj;
    let type = "Push";
    function onCreate() {
        sidebarObj.element.style.visibility = '';
    }
    // Toggle(Open/Close) the Sidebar
    function toggleClick() {
        sidebarObj.toggle();
    }
    // Close the Sidebar
    function closeClick() {
        sidebarObj.hide();
    }
    return (<div className="control-section">
            <div id="wrapper">
                {/* Initializing the Sidebar component */}
                <SidebarComponent id="default-sidebar" animate={false} enableRtl={true} type={type} ref={Sidebar => sidebarObj = Sidebar} created={onCreate} style={{ visibility: "hidden" }}>
                    <div className="title"> Sidebar content</div> 
                    <div className="sub-title">
                        Click the button to close the Sidebar
                        </div>
                    <div className="center-align">
                        <ButtonComponent onClick={closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                    </div>
                </SidebarComponent>
                <div>
                    <div className="title">Main content</div>
                    <div className="sub-title"> Click the button to open/close the Sidebar.</div>
                    <div className="center-align">
                        <ButtonComponent onClick={toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
                    </div>
                </div>
            </div>
        </div>);
}
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType  } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';

function App() {
    let sidebarObj: SidebarComponent;
    let type: SidebarType = "Push";
    function onCreate():void  {
        sidebarObj.element.style.visibility='';
     }
    // Toggle(Open/Close) the Sidebar
    function toggleClick(): void {
        sidebarObj.toggle();
    }
    // Close the Sidebar
    function closeClick(): void {
        sidebarObj.hide();
    }
    return (
        <div className="control-section">
            <div id="wrapper">
                {/* Initializing the Sidebar component */}
                <SidebarComponent id="default-sidebar" animate={false} enableRtl={true} type={type} ref={Sidebar => sidebarObj = Sidebar as SidebarComponent} created={onCreate} style={{visibility:"hidden"}} >
                    <div className="title"> Sidebar content</div> 
                    <div className="sub-title">
                        Click the button to close the Sidebar
                        </div>
                    <div className="center-align">
                        <ButtonComponent onClick={closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                    </div>
                </SidebarComponent>
                <div>
                    <div className="title">Main content</div>
                    <div className="sub-title"> Click the button to open/close the Sidebar.</div>
                    <div className="center-align">
                        <ButtonComponent onClick={toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('sample'));

Close on document click

Sidebar can be closed on document click by setting closeOnDocumentClick to true. If this property is not set, the Sidebar will not close on document click since its default value is false. Sidebar can be kept opened during rendering using isOpen property.

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
function App() {
    let sidebarObj;
    let type = "Push";
    function onCreate() {
        sidebarObj.element.style.visibility = '';
    }
    // Toggle(Open/Close) the Sidebar
    function toggleClick() {
        sidebarObj.show();
    }
    return (<div className="control-section">
            <div id="wrapper">
                {/* Initializing the Sidebar component */}
                <SidebarComponent id="default-sidebar" ref={Sidebar => sidebarObj = Sidebar} closeOnDocumentClick={true} type={type} created={onCreate} isOpen={true} style={{ visibility: "hidden" }}>
                    <div className="title"> Sidebar content</div>
                </SidebarComponent>
                <div>
                    <div className="title">Main content</div>
                    <div className="sub-title"> Click the button to open the Sidebar.</div>
                    <div className="center-align">
                        <ButtonComponent onClick={toggleClick} id="toggle" className="e-btn e-info">Open Sidebar</ButtonComponent>
                    </div>
                </div>
            </div>
        </div>);
}
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';

function App() {
    let sidebarObj: SidebarComponent;
    let type: SidebarType = "Push";
    function onCreate():void  {
        sidebarObj.element.style.visibility='';
    }
    // Toggle(Open/Close) the Sidebar
    function toggleClick(): void {
        sidebarObj.show();
    }
    return (
        <div className="control-section">
            <div id="wrapper">
                {/* Initializing the Sidebar component */}
                <SidebarComponent id="default-sidebar" ref={Sidebar => sidebarObj = Sidebar as SidebarComponent} closeOnDocumentClick={true} type={type} created={onCreate} isOpen={true} style={{visibility:"hidden"}}  >
                    <div className="title"> Sidebar content</div>
                </SidebarComponent>
                <div>
                    <div className="title">Main content</div>
                    <div className="sub-title"> Click the button to open the Sidebar.</div>
                    <div className="center-align">
                        <ButtonComponent onClick={toggleClick} id="toggle" className="e-btn e-info">Open Sidebar</ButtonComponent>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('sample'));

Enable gestures

Expand or collapse the Sidebar while swiping in touch devices using enableGestures property. By default, enableGestures is set to true.

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
function App() {
    let sidebarObj;
    let type = "Push";
    function onCreate() {
        sidebarObj.element.style.visibility = '';
    }
    // Toggle(Open/Close) the Sidebar
    function toggleClick() {
        sidebarObj.toggle();
    }
    // Close the Sidebar
    function closeClick() {
        sidebarObj.hide();
    }
    return (<div className="control-section">
            <div id="wrapper">
                {/* Initializing the Sidebar component */}
                <SidebarComponent id="default-sidebar" enableGestures={false} type={type} ref={Sidebar => sidebarObj = Sidebar} created={onCreate} style={{ visibility: "hidden" }}>
                    <div className="title"> Sidebar content</div>
                    <div className="sub-title">
                        Click the button to close the Sidebar.
                        </div>
                    <div className="center-align">
                        <ButtonComponent onClick={closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                    </div>
                </SidebarComponent>
                <div>
                    <div className="title">Main content</div>
                    <div className="sub-title"> Click the button to open/close the Sidebar.</div>
                    <div className="center-align">
                        <ButtonComponent onClick={toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
                    </div>
                </div>
            </div>
        </div>);
}
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { SidebarComponent, SidebarType } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';

function App() {
    let sidebarObj: SidebarComponent;
    let type: SidebarType = "Push";
    function onCreate():void  {
        sidebarObj.element.style.visibility='';
     }
    // Toggle(Open/Close) the Sidebar
    function toggleClick(): void {
        sidebarObj.toggle();
    }
    // Close the Sidebar
    function closeClick(): void {
        sidebarObj.hide();
    }
    return (
        <div className="control-section">
            <div id="wrapper">
                {/* Initializing the Sidebar component */}
                <SidebarComponent id="default-sidebar" enableGestures={false} type={type} ref={Sidebar => sidebarObj = Sidebar as SidebarComponent} created={onCreate} style={{visibility:"hidden"}} >
                    <div className="title"> Sidebar content</div>
                    <div className="sub-title">
                        Click the button to close the Sidebar.
                        </div>
                    <div className="center-align">
                        <ButtonComponent onClick={closeClick} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                    </div>
                </SidebarComponent>
                <div>
                    <div className="title">Main content</div>
                    <div className="sub-title"> Click the button to open/close the Sidebar.</div>
                    <div className="center-align">
                        <ButtonComponent onClick={toggleClick} id="toggle" className="e-btn e-info">Toggle Sidebar</ButtonComponent>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('sample'));

See Also