Is this the best way to embed sidebar in a react project?


Unfortunately, the official sidebar module ( relies on jquery being globally available to work.

I would rather not have a global jquery object, and so I took the sidebar code found here, and exposed the anonymous function so that I could pass in my own jquery instance like you can see in this gist. I then created a SidebarMenu component like this.

I can then instantiate it like:

<SidebarMenu ref="sidebar"/>

and toggle it open/closed like:


I’d rather completely get rid of the jquery dependency, but this was a quick and dirty way to get things to work.


Hey wallslide,

I think you’re on the right track! You should look into contributing a Sidebar component to Semantic-UI’s React component library, Stardust.

All of the modules in Semantic UI have special development requirements, and Sidebar is one of them. We’ve only developed a handful of modules like Dropdown and Modal, so there’s a lot of help needed!

I’d say look at the current way we’re handing modules and try to pattern your Sidebar after that, it already looks pretty close:

Our goal is to be able to implement these all jQuery free as well.

Semantic-ui Sidebar integration with react