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