BottomNavigationProps

Represents the props of the KendoReact BottomNavigation component.

Name	Type	Default	Description
border?	boolean		Sets a border to the BottomNavigation. jsx <BottomNavigation border={true} />
className?	string		Sets additional CSS classes to the BottomNavigation. jsx <BottomNavigation className="custom-class" />
dir?	string		Represents the dir HTML attribute. This is used to switch from LTR to RTL. jsx <BottomNavigation dir="rtl" />
disabled?	boolean		Disables the whole BottomNavigation. jsx <BottomNavigation disabled={true} />
fill?	BottomNavigationFill		Deprecated. Use fillMode prop instead.
fillMode?	BottomNavigationFill		The fill style of the BottomNavigation (see example). 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.
id?	string		Sets the id property of the root BottomNavigation element. jsx <BottomNavigation id="bottomNav1" />
item?	React.ComponentType<BottomNavigationItemProps>		Overrides the default component's content responsible for visualizing a single item (see example). jsx const CustomItem = (props) => <div>{props.text}</div>; <BottomNavigation item={CustomItem} />
itemFlow?	BottomNavigationItemFlow		Specifies how the icon and text label are positioned in each item of the BottomNavigation (see example). The possible values are: vertical(Default) — Renders the text below the icon. horizontal — Renders the text and the icon on the same line. jsx <BottomNavigation itemFlow="horizontal" />
itemRender?	(span: ReactElement<HTMLSpanElement>, itemProps: BottomNavigationItemProps) => ReactNode		Fires when a BottomNavigation item is about to be rendered (see example). Used to override the default appearance of the items.
items?	BottomNavigationItemProps[]		The collection of items that will be rendered in the BottomNavigation (see example). jsx const items = [{ text: 'Home', icon: 'home' }, { text: 'Profile', icon: 'user' }]; <BottomNavigation items={items} />
onKeyDown?	(event: BottomNavigationEvent) => void		Triggered on onKeyDown event. jsx <BottomNavigation onKeyDown={(e) => console.log('Key pressed')} />
onSelect?	(event: BottomNavigationSelectEvent) => void		Fires when a BottomNavigation item is selected. jsx <BottomNavigation onSelect={(e) => console.log(e.item)} />
positionMode?	BottomNavigationPositionMode		Specifies the position and behavior of the BottomNavigation when the page is scrolled (see example). 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 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. jsx <BottomNavigation positionMode="sticky" />
style?	React.CSSProperties		Sets additional CSS styles to the BottomNavigation. jsx <BottomNavigation style={{ backgroundColor: 'blue' }} />
themeColor?	BottomNavigationThemeColor		Specifies the theme color of the BottomNavigation (see example). 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. info — Applies coloring based on the info theme color. success — Applies coloring based on the success theme color. warning — Applies coloring based on the warning theme color. error — Applies coloring based on the error theme color. dark — Applies coloring based on the dark theme color. light — Applies coloring based on the light theme color. inverse — Applies coloring based on the inverted theme color. jsx <BottomNavigation themeColor="primary" />