Expanded State

The Drawer enables you to set its expanded state and change it on demand by using the expanded Boolean property. By default, expanded is set to false.

Controlling the Expanded State

The following example demonstrates how to configure the display state of the Drawer.

<style>
    my-app {
        padding: 0;
    }
    .k-drawer-content {
        padding: 20px;
    }
    .k-drawer-container {
        position: fixed;
        width: 100%;
        height: 100%;
    }
    .k-drawer-item {
        user-select: none;
    }
</style>
const App = () => {
    const items = [
        { text: 'Inbox', icon: 'k-i-inbox' },
        { text: 'Calendar', icon: 'k-i-calendar' },
        { text: 'Attachments', icon: 'k-i-hyperlink-email' },
        { text: 'Favourites', icon: 'k-i-star-outline' }
    ];

    const [expanded, setExpanded] = React.useState(true);
    const handleClick = () => { setExpanded(prevState => !prevState); };

    return (
        <Drawer expanded={expanded} position='start' mode='push' items={items}>
            <DrawerContent>
                <button className="k-button" onClick={handleClick}>Toggle the drawer state</button>
            </DrawerContent>
        </Drawer>
    );
};

ReactDOM.render(
    <App/>,
    document.querySelector('my-app')
);