Breaking News: Grepper is joining You.com. Read the official announcement!

headlessui/react with framer motion

Stephen Muchendu answered on July 22, 2024 Popularity 1/10 Helpfulness 1/10

answer headlessui/react with framer motion

headlessui/react with framer motion

Comment

import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
import { AnimatePresence, motion } from 'framer-motion'

function Example() {
  return (
    <Menu>
      {({ open }) => (
        <>
          <MenuButton>My account</MenuButton>
          <AnimatePresence>
            {open && (
              <MenuItems
                static
                as={motion.div}
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.95 }}
                anchor="bottom"
                className="origin-top"
              >
                <MenuItem>
                  <a className="block data-[focus]:bg-blue-100" href="/settings">
                    Settings
                  </a>
                </MenuItem>
                <MenuItem>
                  <a className="block data-[focus]:bg-blue-100" href="/support">
                    Support
                  </a>
                </MenuItem>
                <MenuItem>
                  <a className="block data-[focus]:bg-blue-100" href="/license">
                    License
                  </a>
                </MenuItem>
              </MenuItems>
            )}
          </AnimatePresence>
        </>
      )}
    </Menu>
  )
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: headlessui.com

Tags: framer-motion javascript

Link to this answer
Share Copy Link

Contributed on Jul 22 2024

Stephen Muchendu

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

headlessui/react with framer motion

Contents

More Related Answers

headlessui/react with framer motion

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.