Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Chakra-UI Responsive Navigation Bar
Benjamin Carlson
Benjamin Carlson

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'
Enter fullscreen modeExit fullscreen mode

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>
Enter fullscreen modeExit fullscreen mode

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>
Enter fullscreen modeExit fullscreen mode

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')
Enter fullscreen modeExit fullscreen mode

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/>
Enter fullscreen modeExit fullscreen mode

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">
Enter fullscreen modeExit fullscreen mode

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>)}
Enter fullscreen modeExit fullscreen mode

Top comments(3)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
merthod profile image
Merthod
Amateur programmer wanting to make my MVP
  • Location
    Mexico City
  • Work
    Growth Consultant at Empresa En Crecimiento
  • Joined

Two questions,

  1. Isn't using useDisclosure a better fit than using state to open/close?
  2. In the mobile layout, what is the difference between using Flex and VStack in the outmost tag?

Thanks for the example!

CollapseExpand
 
thesohailjafri profile image
Sohail SJ | TheZenLabs
Developer | Biker | Athlete | Youtuber70k Views on Dev.to
  • Location
    Mumbai | India
  • Education
    Computer Science
  • Pronouns
    He/Him
  • Work
    Mid-Level Software Engineer
  • Joined
• Edited on• Edited

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

CollapseExpand
 
primozrome profile image
Primož Rome
  • Education
    FRI
  • Work
    Marketing Manager
  • Joined

Live preview would be nice?

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Creator of https://coffeeclass.io - a programming tutorial service.
  • Location
    Connecticut, USA
  • Joined

Trending onDEV CommunityHot

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp