Is it possible to change transition of Chakra UI's Menu component?

Viewed 142
1 Answers

You can reimplement Chakra's MenuList

export const CustomMenuList = forwardRef<MenuListProps, "div">((props, ref) => {
  const { rootProps, ...rest } = props
  const {
    isOpen,
    onTransitionEnd,
    unstable__animationState: animated,
  } = useMenuContext()

  const ownProps = useMenuList(rest, ref) as any
  const positionerProps = useMenuPositioner(rootProps)

  const styles = useStyles()

  return (
    <chakra.div
      {...positionerProps}
      __css={{ zIndex: props.zIndex ?? styles.list?.zIndex }}
    >
      <CustomAnimation {/* Can use chakra factory or prebuilt chakra components */}
        {...ownProps}
        className={cx("chakra-menu__menu-list", ownProps.className)}
        __css={styles.list}
        {/* the the props you get from useMenuContext for your animation */}
      />
    </chakra.div>
  )
})

Usage

<Menu>
  ...
  <CustomMenuList>
    <MenuItem>Download</MenuItem>
  </CustomMenuList>
</Menu>

Suggestion: if __css doesn't pass the correct styles to your CustomAnimation component, try using sx

Related