DrawerProps

Specifies the animation settings of the Drawer.

Example:

<Drawer animation={{ duration: 300 }} />

Sets the Drawer items declaratively.

Example:

<Drawer>
  <DrawerItem text="Home" />
</Drawer>

Specifies a list of CSS classes that will be added to the k-drawer-container element.

Represents the dir HTML attribute. This is used to switch from LTR to RTL.

Specifies a list of CSS classes that will be added to the k-drawer element.

Specifies the state of the Drawer (see example).

Example:

<Drawer expanded={true} />

Overrides the default component responsible for visualizing a single item (see example).

Example:

<Drawer item={CustomDrawerItem} />

The collection of items that will be rendered in the Drawer (see example).

Example:

<Drawer items={[{ text: 'Home' }, { text: 'Settings' }]} />

Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed (see example).

Example:

<Drawer mini={true} />

Defines the width of the Drawer when the mini view is enabled and the component is collapsed.

Example:

<Drawer miniWidth={60} />

Specifies the mode in which the Drawer will be displayed (see example).

Example:

<Drawer mode="push" />

The event handler that will be fired when the overlay is clicked. Used in overlay mode only.

Example:

<Drawer onOverlayClick={(e) => console.log('Overlay clicked')} />

Fires when a Drawer item is selected.

Example:

<Drawer onSelect={(e) => console.log('Item selected', e)} />

Specifies the position of the Drawer (see example).

Example:

<Drawer position="end" />

Sets additional CSS styles to the Drawer.

Sets the tabIndex property of the Drawer.

Example:

<Drawer tabIndex={0} />

Enables Web MCP tool registration so AI agents can interact with this Drawer. Set to true to use the provider-level dataName, or pass a config object to override.

Requires a WebMcpProvider ancestor from @progress/kendo-react-webmcp.

Defines the width of the Drawer when it is expanded.

Example:

<Drawer width={300} />