@progress/kendo-react-layout/bottomnavigation/BottomNavigationItemProps.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';
/**
 * The interface for describing items that can be passed to the `items` prop of the BottomNavigation component.
 */
export interface BottomNavigationItemProps {
    /**
     * Sets additional CSS classes to the BottomNavigation item.
     *
     * @example
     * ```jsx
     * <BottomNavigationItem className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Sets additional CSS styles to the BottomNavigation item.
     *
     * @example
     * ```jsx
     * <BottomNavigationItem style={{ color: 'red' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Disables the BottomNavigationItem.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <BottomNavigationItem disabled={true} />
     * ```
     */
    disabled?: boolean;
    /**
     * Specifies if the BottomNavigationItem is selected.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <BottomNavigationItem selected={true} />
     * ```
     */
    selected?: boolean;
    /**
     * Defines the name for an existing icon in a KendoReact theme.
     * The icon is rendered inside the BottomNavigationItem by a `span.k-icon` element.
     *
     * @example
     * ```jsx
     * <BottomNavigationItem icon="home" />
     * ```
     */
    icon?: string;
    /**
     * Defines an SVG icon.
     * The icon is rendered inside the BottomNavigationItem.
     *
     * @example
     * ```jsx
     * import { gearIcon } from '@progress/kendo-svg-icons';
     *
     * <BottomNavigationItem svgIcon={gearIcon} />
     * ```
     */
    svgIcon?: SVGIcon;
    /**
     * Specifies the text content of the BottomNavigationItem.
     *
     * @example
     * ```jsx
     * <BottomNavigationItem text="Home" />
     * ```
     */
    text?: React.ReactNode;
    /**
     * Sets the `tabIndex` prop of the BottomNavigationItem.
     *
     * @default 0
     *
     * @example
     * ```jsx
     * <BottomNavigationItem tabIndex={-1} />
     * ```
     */
    tabIndex?: number;
    /**
     * Sets a custom prop. Contained in the BottomNavItem props that are returned from the `onSelect` BottomNavigation event.
     *
     * @example
     * ```jsx
     * <BottomNavigationItem customProp="customValue" />
     * ```
     */
    [customProp: string]: any;
    /**
     * @hidden
     */
    index?: number;
    /**
     * @hidden
     */
    item?: any;
    /**
     * @hidden
     */
    dataItem?: any;
    /**
     * @hidden
     */
    id?: string;
}