Posted onApr 30, 2021 • Edited onAug 3, 2021 • Originally published atcoffeeclass.io

Chakra-UI Responsive Navigation Bar

#chakra #nextjs #javascript

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)

Merthod

Amateur programmer wanting to make my MVP

Location
Mexico City
Work
Growth Consultant at Empresa En Crecimiento
Joined
Jul 21, 2020

• Jul 16 '21

Copy link

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!