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.

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.