@progress/kendo-react-layout/drawer/interfaces/DrawerItemProps.d.ts

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { SVGIcon } from '@progress/kendo-react-common';
/**
 * An interface for the Drawer items.
 */
export interface DrawerItemProps {
    /**
     * Represents the children that are passed to the DrawerItem.
     *
     * Example:
     * ```jsx
     * <DrawerItem>Item Content</DrawerItem>
     * ```
     */
    children?: any;
    /**
     * Specifies a list of CSS classes that will be added to the DrawerItem element.
     */
    className?: string;
    /**
     * Sets additional CSS styles to the Drawer item.
     */
    style?: React.CSSProperties;
    /**
     * Specifies if the Drawer item is disabled.
     *
     * Example:
     * ```jsx
     * <DrawerItem disabled={true} />
     * ```
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * Defines the name for an existing icon in a KendoReact theme.
     *
     * Example:
     * ```jsx
     * <DrawerItem icon="home" />
     * ```
     */
    icon?: string;
    /**
     * Defines the SVG icon of the item.
     *
     * Example:
     * ```jsx
     * import { gearIcon } from '@progress/kendo-svg-icons';
     *
     * <DrawerItem svgIcon={gearIcon} />
     * ```
     */
    svgIcon?: SVGIcon;
    /**
     * Specifies if the Drawer item is initially selected.
     *
     * Example:
     * ```jsx
     * <DrawerItem selected={true} />
     * ```
     *
     * @default false
     */
    selected?: boolean;
    /**
     * Specifies if this is a separator item.
     *
     * Example:
     * ```jsx
     * <DrawerItem separator={true} />
     * ```
     *
     * @default false
     */
    separator?: boolean;
    /**
     * Specifies the text content of the Drawer item.
     *
     * Example:
     * ```jsx
     * <DrawerItem text="Dashboard" />
     * ```
     */
    text?: string;
    /**
     * Sets the index of the DrawerItem that is used to identify it.
     *
     * Example:
     * ```jsx
     * <DrawerItem index={0} />
     * ```
     */
    index?: number;
    /**
     * Sets the `tabIndex` property of the DrawerItem.
     *
     * Example:
     * ```jsx
     * <DrawerItem tabIndex={1} />
     * ```
     *
     * @default 0
     */
    tabIndex?: number;
    /**
     * Sets a custom property. Contained in the DrawerItem props that are returned from the `onSelect` Drawer event.
     */
    [customProp: string]: any;
    /**
     * This property is used in scenarios with hierarchical drawer. The rendering of the component requires each node to have a "`k-level-` + the level of nesting" className.
     *
     * Example:
     * ```jsx
     * <DrawerItem level={1} />
     * ```
     */
    level?: number;
    /**
     * @hidden
     */
    onSelect?(target?: any, idx?: number, event?: React.SyntheticEvent<Element>): void;
}