Horizontal Collapse

The default Collapse component in Chakra UI works for vertical orientation.

In some cases, you might need the horizontal orientation (e.g when you're building a side panel) and you cannot use the Drawer component.

Here's a code snippet to help you achieve that while ensuring the offscreen content stays hidden from screen readers and keyboard (via tabbing) when closed.

This recipe was inspired by #2791

import { useDisclosure } from '@chakra-ui/react'
import { motion } from 'framer-motion'
import { useState } from 'react'
export default function App() {
const { getButtonProps, getDisclosureProps, isOpen } = useDisclosure()
const [hidden, setHidden] = useState(!isOpen)
return (
<div>
<button {...getButtonProps()}>Toggle</button>
<motion.div
{...getDisclosureProps()}
hidden={hidden}
initial={false}
onAnimationStart={() => setHidden(false)}
onAnimationComplete={() => setHidden(!isOpen)}
animate={{ width: isOpen ? 500 : 0 }}
style={{
background: 'red',
overflow: 'hidden',
whiteSpace: 'nowrap',
position: 'absolute',
right: '0',
height: '100vh',
top: '0',
}}
>
welcome home
</motion.div>
</div>
)
}

Explore on Code Sandbox

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel