Chakra UI Menu Dropdown on Hover

Chakra UI Menu Dropdown on Hover

3 min read · 512 words · Shared October 27, 2021 by

Article Summary: How to use Chakra UI's useDisclosure hook to create a dropdown menu on hover.

Introduction

Chakra UI is a component based React library that allows us to rapidly build beautiful, responsive, and accessible user interfaces. One of the components it gives us, is the Menu component. Out of the box, to expand the menu, you need to click on the MenuButton. In this snippet, I'll show you how to use the useDisclosure hook to create a dropdown menu on hover.

useDisclosure

Definition

useDisclosure is defined in the Chakra UI documentation as such:

Import

We can import the useDisclosure hook from @chakra-ui/react.

import { useDisclosure } from "@chakra-ui/react"

Usage

Here is how you would use the useDisclosure hook to create a dropdown menu on hover. In the next section, we'll take a look at each line and explain what is happening.

Navbar.js
import {
    useDisclosure,
    MenuItem,
    Menu,
    MenuButton,
    MenuList,
} from "@chakra-ui/react"
import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'

export default function Navbar() {
    const { isOpen, onOpen, onClose } = useDisclosure()
    return (
        <Menu isOpen={isOpen}>
            <MenuButton
                variant="ghost"
                mx={1}
                py={[1, 2, 2]}
                px={4}
                borderRadius={5}
                _hover={{ bg: useColorModeValue("gray.100", "gray.700") }}
                aria-label="Courses"
                fontWeight="normal"
                onMouseEnter={onOpen}
                onMouseLeave={onClose}
            >
                More {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
            </MenuButton>
            <MenuList onMouseEnter={onOpen} onMouseLeave={onClose}>
                <MenuItem>Menu Item 1</MenuItem>
                <MenuItem>Menu Item 2</MenuItem>
                <MenuItem>Menu Item 3</MenuItem>
            </MenuList>
        </Menu>
    )
}

Explanation

Let's take a more detailed look at the code. First, we are importing the useDisclosure hook and the Menu components. We are also importing 2 Chakra UI icons to make the dropdown look a bit nicer.

We are using the useDisclosure hook like such:

const { isOpen, onOpen, onClose } = useDisclosure()

We can then use isOpen, onOpen, and onClose to control the state of the dropdown.

  • isOpen is a boolean that tells us if the dropdown is open or not.
  • onOpen is a callback function to set a truthy value for the isOpen parameter.
  • onClose is a callback function to set a falsy value for the isOpen parameter.

onMouseEnter and onMouseLeave

At this point, the Menu dropdown works, but there is still no hover effect! To add this we can use onMouseEnter and onMouseLeave to control the state of the dropdown.

When we use it like such:

onMouseEnter={onOpen} 
onMouseLeave={onClose}

We are saying when a user hovers over that Component, set the isOpen parameter to true. When they leave the Component, set the isOpen parameter to false. Simple!

Conclusion

In this snippet you learned how to use the useDisclosure hook paired with onMouseEnter and onMouseLeave to create a dropdown menu on hover.

Published October 27, 2021

Related Tags

    #chakra-ui

Related Posts

useState() Hook in Next JS - React Hooks · December 30, 2021
Build A Todo Web App Using Next.js, Firebase, Chakra UI + React Hooks · September 26, 2021
Advanced Chakra UI · August 29, 2021
useEffect() Hook in Next.JS - React Hooks · August 9, 2021
Chakra-UI Mobile Navbar (Drawer Component) · August 2, 2021

Email Newsletter

On This Page

Introduction

useDisclosure

Definition

Import

Usage

Explanation

`onMouseEnter` and `onMouseLeave`

Conclusion

View Related Posts

December 30, 2021

react.png

useState() Hook in Next JS - React Hooks

September 26, 2021

firebase.png
Build A Todo Web App Using Next.js, Firebase, Chakra UI + React Hooks

Build A Todo Web App Using Next.js, Firebase, Chakra UI + React Hooks

August 29, 2021

chakra-ui.png

Advanced Chakra UI

August 9, 2021

react.png

useEffect() Hook in Next.JS - React Hooks

August 2, 2021

chakra-ui.png

Chakra-UI Mobile Navbar (Drawer Component)

April 25, 2021

chakra-ui.png

Chakra-UI Responsive Navigation Bar


Loading author data...

    Legal

    Terms

    Disclaimer

    Privacy Policy


    Carlson Technologies Logo© Copyright 2021 - 2022, Carlson Technologies LLC. All Rights Reserved.