@progress/kendo-react-layout

/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { BottomNavigationItemProps } from './BottomNavigationItemProps'; import { BottomNavigationEvent, BottomNavigationSelectEvent } from './models/events'; /** * Represents the props of the [KendoReact BottomNavigation component](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation). */ export interface BottomNavigationProps { /** * Sets additional CSS classes to the BottomNavigation. * * @example * ```jsx * <BottomNavigation className="custom-class" /> * ``` */ className?: string; /** * Sets additional CSS styles to the BottomNavigation. * * @example * ```jsx * <BottomNavigation style={{ backgroundColor: 'blue' }} /> * ``` */ style?: React.CSSProperties; /** * Sets the `id` property of the root BottomNavigation element. * * @example * ```jsx * <BottomNavigation id="bottomNav1" /> * ``` */ id?: string; /** * Represents the `dir` HTML attribute. Use this to switch from LTR to RTL. * * @example * ```jsx * <BottomNavigation dir="rtl" /> * ``` */ dir?: string; /** * Specifies the BottomNavigation theme color * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/appearance#toc-theme-color)). * * The possible values are: * * `base` — Applies coloring based on the base theme color. * * `primary` — Applies coloring based on the primary theme color. * * `secondary` — Applies coloring based on the secondary theme color. * * `tertiary` — Applies coloring based on the tertiary theme color. * * `inverse` — Applies coloring based on the inverted theme color. * * @default undefined (theme-controlled) * * @example * ```jsx * <BottomNavigation themeColor="primary" /> * ``` */ themeColor?: BottomNavigationThemeColor; /** * The BottomNavigation fill style * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/appearance#toc-fill)). * * The possible values are: * * `flat` — Sets the theme color as the text color. The background will be white. * * `solid` — Sets the theme color as a background color. * * @default undefined (theme-controlled) * * @example * ```jsx * <BottomNavigation fillMode="solid" /> * ``` */ fillMode?: BottomNavigationFill; /** * Specifies the BottomNavigation position and behavior when the page is scrolled * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/positioning#toc-position-mode)). * * The possible values are: * * `fixed`(Default) — The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position. * * `sticky` — Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between static * and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position. * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode. * * @default fixed * * @example * ```jsx * <BottomNavigation positionMode="sticky" /> * ``` */ positionMode?: BottomNavigationPositionMode; /** * Specifies how the icon and text label are positioned in each BottomNavigation item * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/content-types#toc-item-flow)). * * The possible values are: * * `vertical`(Default) — Renders the text below the icon. * * `horizontal` — Renders the text and the icon on the same line. * * @default vertical * * @example * ```jsx * <BottomNavigation itemFlow="horizontal" /> * ``` */ itemFlow?: BottomNavigationItemFlow; /** * Sets a border to the BottomNavigation. * * @default false * * @example * ```jsx * <BottomNavigation border={true} /> * ``` */ border?: boolean; /** * Disables the whole BottomNavigation. * * @default false * * @example * ```jsx * <BottomNavigation disabled={true} /> * ``` */ disabled?: boolean; /** * The collection of items that will be rendered in the BottomNavigation ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation)). * * @example * ```jsx * const items = [{ text: 'Home', icon: 'home' }, { text: 'Profile', icon: 'user' }]; * <BottomNavigation items={items} /> * ``` */ items?: Array<BottomNavigationItemProps>; /** * Overrides the default component's content responsible for visualizing a single item * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/custom-rendering#toc-custom-rendering)). * * @example * ```jsx * const CustomItem = (props) => <div>{props.text}</div>; * <BottomNavigation item={CustomItem} /> * ``` */ item?: React.ComponentType<BottomNavigationItemProps>; /** * Fires when a BottomNavigation item is about to be rendered * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/custom-rendering#toc-item-render-property)). * Used to override the default appearance of the items. */ itemRender?: (span: React.ReactElement<HTMLSpanElement>, itemProps: BottomNavigationItemProps) => React.ReactNode; /** * Fires when a BottomNavigation item is selected. * * @example * ```jsx * <BottomNavigation onSelect={(e) => console.log(e.item)} /> * ``` */ onSelect?: (event: BottomNavigationSelectEvent) => void; /** * Triggered on `onKeyDown` event. * * @example * ```jsx * <BottomNavigation onKeyDown={(e) => console.log('Key pressed')} /> * ``` */ onKeyDown?: (event: BottomNavigationEvent) => void; } /** * The BottomNavigation fill style * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/appearance#toc-fill)). * * The possible values are: * * `flat`(Default) — Sets the theme color as the text color. The background will be white. * * `solid` — Sets the theme color as a background color. * */ export type BottomNavigationFill = 'solid' | 'flat'; /** * Specifies how the icon and text label are positioned in each BottomNavigation item * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/content-types#toc-item-flow)). * * The possible values are: * * `vertical`(Default) — Renders the text below the icon. * * `horizontal` — Renders the text and the icon on the same line. */ export type BottomNavigationItemFlow = 'vertical' | 'horizontal'; /** * Specifies the BottomNavigation theme color. * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/appearance#toc-theme-color)). * * The possible values are: * * `primary` (Default) — Applies coloring based on the primary theme color. * * `secondary` — Applies coloring based on the secondary theme color. * * `tertiary` — Applies coloring based on the tertiary theme color. * * `base` — Applies coloring based on the base theme color. * * `inverse` — Applies coloring based on the inverted theme color. */ export type BottomNavigationThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'inverse'; /** * Specifies the BottomNavigation position and behavior when the page is scrolled * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/bottomnavigation/positioning#toc-position-mode)). * * The possible values are: * * `fixed`(Default) — The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position. * * `sticky` — Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between * static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position. * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode. */ export type BottomNavigationPositionMode = 'sticky' | 'fixed';