New to KendoReact? Learn about KendoReact Free.
DrawerNavigation
Represents the KendoReact Drawer component.
jsx
const App = () => {
const [expanded, setExpanded] = React.useState(true);
const handleClick = () => setExpanded(prevState => !prevState);
return (
<Drawer expanded={expanded} position='start' mode='push'>
<DrawerNavigation>
<ul className="k-drawer-items">
<li className="k-drawer-item k-selected">
<span className="k-item-text">Home</span>
</li>
<li className="k-drawer-item">
<span className="k-item-text">Products</span>
</li>
<li className="k-drawer-item">
<span className="k-item-text">About</span>
</li>
</ul>
</DrawerNavigation>
<DrawerContent>
<button className="k-button" onClick={handleClick}>Toggle the drawer state</button>
</DrawerContent>
</Drawer>
);
};
ReactDOM.render(<App />, document.querySelector('my-app'));
Name | Type | Default | Description |
---|---|---|---|
props |
|
The props of the DrawerNavigation component. |