
Posted on • Edited on • Originally published atcoffeeclass.io
Chakra-UI Responsive Navigation Bar
Introduction
If you are familiar with Bootstrap, you know how easy it is to create a responsive nav-bar. In Chakra-UI, there is no built in, out of the box solution. In this snippet, we will create a responsive nav-bar component that you can use in your React app.
Setup
We will be using Next.js in this example but it works for any react based framework. Navigate to the Next.js GitHub repo and clone their starter example using Chakra-UI. If you don't want to leave this page the command is:
yarn create next-app --example with-chakra-ui with-chakra-ui-app
Open this in your preferred IDE - mine is VSCode. Inside of src/components, open up the DarkModeSwitch component. This is the only file we will be modifying.
Imports
We will start by importing everything we need.
import{useState}from'react'import{useColorMode,Switch,Flex,Button,IconButton}from'@chakra-ui/react'import{HamburgerIcon,CloseIcon}from'@chakra-ui/icons'importNextLinkfrom'next/link'
Adding Desktop Content
First, wrap everything inside of a Flex element. Then, add the below code.
<Flex><Flexposition="fixed"top="1rem"right="1rem"align="center">{/* Desktop */}<Flex><NextLinkhref="/"passHref><Buttonas="a"variant="ghost"aria-label="Home"my={5}w="100%">Home</Button></NextLink><NextLinkhref="/about"passHref><Buttonas="a"variant="ghost"aria-label="About"my={5}w="100%">About</Button></NextLink><NextLinkhref="/contact"passHref><Buttonas="a"variant="ghost"aria-label="Contact"my={5}w="100%">Contact</Button></NextLink></Flex>{/* Mobile */}<IconButtonaria-label="Open Menu"size="lg"mr={2}icon={<HamburgerIcon/>}onClick={}/><Switchcolor="green"isChecked={isDark}onChange={toggleColorMode}/></Flex>{/* Mobile Content */}</Flex>
Adding Mobile Content
This is simply our desktop nav bar. We will add the mobile content below the comment. Let's do that now.
{/* Code above */}{/* Mobile Content */}<FlexbgColor="gray.50"overflowY="auto"flexDir="column"><Flexjustify="flex-end"><IconButtonmt={2}mr={2}aria-label="Open Menu"size="lg"icon={<CloseIcon/>}onClick={}/></Flex><FlexflexDir="column"align="center"><NextLinkhref="/"passHref><Buttonas="a"variant="ghost"aria-label="Home"my={5}w="100%">Home</Button></NextLink><NextLinkhref="/about"passHref><Buttonas="a"variant="ghost"aria-label="About"my={5}w="100%">About</Button></NextLink><NextLinkhref="/contact"passHref><Buttonas="a"variant="ghost"aria-label="Contact"my={5}w="100%">Contact</Button></NextLink></Flex></Flex>
Using useState To Open And Close Navigation
Now that we have content, we need a way to show it. We can use useState for this. Before the return statement, add the following:
const[display,changeDisplay]=useState('none')
We now have a variable display set initially to none, and a method changeDisplay we can use to change it.
Let's add this to our code. Note, I am only writing the components that we are changing below.
<IconButtonaria-label="Open Menu"size="lg"mr={2}icon={<HamburgerIcon/>}onClick={()=>changeDisplay('flex')}// added line/><Flexdisplay={display}// added linebgColor="gray.50"overflowY="auto"flexDir="column"><IconButtonmt={2}mr={2}aria-label="Open Menu"size="lg"icon={<CloseIcon/>}onClick={()=>changeDisplay('none')}// added line/>
Now we should be able to open and close the menu! It looks a bit messy though. Let's add styles to the Flex.
<Flexw="100vw"display={display}bgColor="gray.50"zIndex={20}h="100vh"pos="fixed"top="0"left="0"overflowY="auto"flexDir="column">
The important styles we added:
- Setting the height to 100vh
- Setting the width to 100vw
- Setting the position to fixed
- Making z-index 20 so it is above the page content
- Setting top and left to 0
- Setting the display to our dynamic display variable.
The rest is subjective.
Completed Code
And that's it! Here is the completed code:
import{useState}from'react'import{useColorMode,Switch,Flex,Button,IconButton}from'@chakra-ui/react'import{HamburgerIcon,CloseIcon}from'@chakra-ui/icons'importNextLinkfrom'next/link'exportconstDarkModeSwitch=()=>{const{colorMode,toggleColorMode}=useColorMode()constisDark=colorMode==='dark'const[display,changeDisplay]=useState('none')return(<Flex><Flexposition="fixed"top="1rem"right="1rem"align="center">{/* Desktop */}<Flexdisplay={['none','none','flex','flex']}><NextLinkhref="/"passHref><Buttonas="a"variant="ghost"aria-label="Home"my={5}w="100%">Home</Button></NextLink><NextLinkhref="/about"passHref><Buttonas="a"variant="ghost"aria-label="About"my={5}w="100%">About</Button></NextLink><NextLinkhref="/contact"passHref><Buttonas="a"variant="ghost"aria-label="Contact"my={5}w="100%">Contact</Button></NextLink></Flex>{/* Mobile */}<IconButtonaria-label="Open Menu"size="lg"mr={2}icon={<HamburgerIcon/>}onClick={()=>changeDisplay('flex')}display={['flex','flex','none','none']}/><Switchcolor="green"isChecked={isDark}onChange={toggleColorMode}/></Flex>{/* Mobile Content */}<Flexw='100vw'display={display}bgColor="gray.50"zIndex={20}h="100vh"pos="fixed"top="0"left="0"zIndex={20}overflowY="auto"flexDir="column"><Flexjustify="flex-end"><IconButtonmt={2}mr={2}aria-label="Open Menu"size="lg"icon={<CloseIcon/>}onClick={()=>changeDisplay('none')}/></Flex><FlexflexDir="column"align="center"><NextLinkhref="/"passHref><Buttonas="a"variant="ghost"aria-label="Home"my={5}w="100%">Home</Button></NextLink><NextLinkhref="/about"passHref><Buttonas="a"variant="ghost"aria-label="About"my={5}w="100%">About</Button></NextLink><NextLinkhref="/contact"passHref><Buttonas="a"variant="ghost"aria-label="Contact"my={5}w="100%">Contact</Button></NextLink></Flex></Flex></Flex>)}
Top comments(3)

- LocationMexico City
- WorkGrowth Consultant at Empresa En Crecimiento
- Joined
Two questions,
- Isn't using useDisclosure a better fit than using state to open/close?
- In the mobile layout, what is the difference between using Flex and VStack in the outmost tag?
Thanks for the example!

- LocationMumbai | India
- EducationComputer Science
- PronounsHe/Him
- WorkMid-Level Software Engineer
- Joined
You could also check these resources:chakraframer.com/collections/navbars
for premade components of the navbar just copy and paste in the code and wallah you are have beautiful looking navbar
For further actions, you may consider blocking this person and/orreporting abuse