Learn how to make a hamburger navbar using chakra! Chakra does not come with an out of the box solution but we can easily use useState and css display to create one! You can easily change the look and feel of the nav bar by styling the Flex or Box elements, and easily use framer motion to add some animation!


Get the starting code: https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui

 

0:00 Introduction
0:09 Channel Announcement
0:30 Introduction Continued
1:23 Importing Everything We Need
1:49 Creating The Desktop Navigation
4:23 Adding The Hamburger Nav Button
5:43 Creating The Mobile Navigation
7:37 Using useState To Dynamically Open And Close The Mobile Menu
9:35 Conclusion

 

#Chakra #next 

How to easily build a Hamburger Navigation Menu using Chakra-UI with Next.js
1.85 GEEK