< DHTMLX Suite 8.3: Colorpicker Transparency Scale, Extended Functionality of Columns’ Header and Footer in Grid/TreeGrid, and More

React Sidebar

A multi-control React sidebar menu component for convenient and smooth navigation. An integral part of the cutting-edge Suite UI library.

Product Features

  • Cross-browser compatibility
  • Support for IE11+
  • Rich JavaScript API
  • Full customization
  • 8 types of controls (buttons, comboboxes, input fields, etc.)
  • Collapsed mode
  • Configurable width
  • Ability to hide/show controls
  • Ability to enable/disable controls
  • Ability to add tooltips for controls
  • Ability to add, remove, and rearrange controls
  • Custom icons for controls
  • Data loading in the JSON format
  • Accessibility support

How to Create a React Sidebar with DHTMLX?

Follow these 5 quick steps to initialize React sidebar component:
Create a Sidebar.js file and import files and styles of Sidebar
Create Sidebar class, which extends the Component class
Add an empty container for Sidebar with the reference to it in the el property using the ref property
When the component is initialized, initialize Sidebar and attach the instance of Sidebar to the container with the reference to it in the el property
Specify a set of configuration properties if needed

Why Choose DHTMLX React Sidebar?

Add a neat vertical navigation menu

DHTMLX React sidebar component allows integrating a vertical navigation menu into your web app. You are provided with a variety of comfy items, including title, spacers, separators, basic and image controls, input fields, and selection buttons. Sidebar controls are loaded smoothly in the JSON format together with their configuration properties.

Adjust React sidebar menu component with ease

The structure and size of dhtmlxSidebar support certain flexibilities. You can set the width or initialize a sidebar in the collapsed state and change its minimum width. A large selection of API methods allows shaping menu controls. You can add new buttons, hide or remove them, enable disabled items, show tooltips, etc.

Customize the entire look and feel of dhtmlxSidebar

Our React sidebar navigation menu supports extended customization to fit your project needs. Breathe new life into sidebar controls by replacing the default Material-based icon font with a custom pack. Add tailored HTML buttons and change every aspect of the sidebar’s appearance by applying new CSS classes with custom settings.

Use available Angular and Vue.js wrappers

DHTMLX team provides special wrappers to integrate the sidebar menu component into web apps based on React, as well as Angular and Vue.js. Download a free 30-day trial version and evaluate dhtmlxSidebar together with other 20+ dhtmlxSuite UI library controls.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

Other Suite Components


File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

Try All UI Components for Free

All UI components for React are part of the dhtmlxSuite library. You can download the free trial version of Suite andbenefit from:

30 days of free evaluation

Official technical support

Full toolkit of 21 components

Compatibility with React, Angular, and Vue.js

Need help with dhtmlxSidebar integration into your app? Contact us