Search code examples
cssreactjstailwind-cssstyled-componentsbootstrap-5

How do I create bootstrap like menus for React with TailwindCSS or styled-compenents?

I am just getting into React and want to either use TailwindCSS or styled-components. I really love the idea of styled-components through am concerned with the lack of pre built functionality that TailwindCSS has. Particularly the respnsive design TailwindCSS has built in (I come from a Bootstrap world).

With that said, how do I create a Bootstrap like hamburger menu. I want something like this for desktop and mobile.

Desktop:

enter image description here

Mobile collapsed:

enter image description here

Mobile expanded:

enter image description here

I am open to suggestions on choosing between the two style libraries. How do I create a menu like this for React apps?

Solution

  • You can use TailwindCSS with React with this.

    However first I would like you to try something from your own .

    You can find such similar examples at