DrawerProps

The properties of the KendoReact Drawer component.

Name	Type	Default	Description
animation?	boolean | DrawerAnimation		Specifies the animation settings of the Drawer. Example: jsx <Drawer animation={{ duration: 300 }} />
children?	any		Sets the Drawer items declaratively. Example: jsx <Drawer> <DrawerItem text="Home" /> </Drawer>
className?	string		Specifies a list of CSS classes that will be added to the k-drawer-container element.
dir?	string		Represents the dir HTML attribute. This is used to switch from LTR to RTL.
drawerClassName?	string		Specifies a list of CSS classes that will be added to the k-drawer element.
expanded?	boolean		Specifies the state of the Drawer. Defaults to false (see example). Example: jsx <Drawer expanded={true} />
item?	React.ComponentType<DrawerItemProps>		Overrides the default component responsible for visualizing a single item (see example). Example: jsx <Drawer item={CustomDrawerItem} />
items?	DrawerItemProps[]		The collection of items that will be rendered in the Drawer (see example). Example: jsx <Drawer items={[{ text: 'Home' }, { text: 'Settings' }]} />
mini?	boolean		Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed (see example). Example: jsx <Drawer mini={true} />
miniWidth?	number		Defines the width of the Drawer when the mini view is enabled and the component is collapsed. Defaults to 50. Example: jsx <Drawer miniWidth={60} />
mode?	"push" | "overlay"		Specifies the mode in which the Drawer will be displayed (see example). Example: jsx <Drawer mode="push" />
onOverlayClick?	(event: MouseEvent<HTMLDivElement>) => void		The event handler that will be fired when the overlay is clicked. Used in overlay mode only. Example: jsx <Drawer onOverlayClick={(e) => console.log('Overlay clicked')} />
onSelect?	(event: DrawerSelectEvent) => void		Fires when a Drawer item is selected. Example: jsx <Drawer onSelect={(e) => console.log('Item selected', e)} />
position?	"end" | "start"		Specifies the position of the Drawer (see example). Example: jsx <Drawer position="end" />
style?	React.CSSProperties		Sets additional CSS styles to the Drawer.
tabIndex?	number		Sets the tabIndex property of the Drawer. Example: jsx <Drawer tabIndex={0} />
width?	number		Defines the width of the Drawer when it is expanded. Defaults to 240. Example: jsx <Drawer width={300} />