New to KendoReact? Start a free 30-day trial

BottomNavigationProps

Interface

Represents the props of the KendoReact BottomNavigation component.

Properties

border?

boolean

Sets a border to the BottomNavigation.

Default:

false

Example:

jsx

<BottomNavigation border={true} />

className?

string

Sets additional CSS classes to the BottomNavigation.

Example:

jsx

<BottomNavigation className="custom-class" />

dir?

string

Represents the dir HTML attribute. Use this to switch from LTR to RTL.

Example:

jsx

<BottomNavigation dir="rtl" />

disabled?

boolean

Disables the whole BottomNavigation.

Default:

false

Example:

jsx

<BottomNavigation disabled={true} />

fillMode?

BottomNavigationFill

The BottomNavigation fill style (see example).

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" />

id?

string

Sets the id property of the root BottomNavigation element.

Example:

jsx

<BottomNavigation id="bottomNav1" />

item?

ComponentType<BottomNavigationItemProps>

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

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 BottomNavigation item (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.

Default:

vertical

Example:

jsx

<BottomNavigation itemFlow="horizontal" />

itemRender?

Fires when a BottomNavigation item is about to be rendered (see example). Used to override the default appearance of the items.

Parameters:spanReactElement<HTMLSpanElement, string | JSXElementConstructor<any>>itemPropsBottomNavigationItemPropsReturns:

ReactNode

items?

BottomNavigationItemProps[]

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

Example:

jsx

const items = [{ text: 'Home', icon: 'home' }, { text: 'Profile', icon: 'user' }];
<BottomNavigation items={items} />

onKeyDown?

(event: BottomNavigationEvent) => void

Triggered on onKeyDown event.

Parameters:eventBottomNavigationEvent

Example:

jsx

<BottomNavigation onKeyDown={(e) => console.log('Key pressed')} />

onSelect?

(event: BottomNavigationSelectEvent) => void

Fires when a BottomNavigation item is selected.

Parameters:eventBottomNavigationSelectEvent

Example:

jsx

<BottomNavigation onSelect={(e) => console.log(e.item)} />

positionMode?

BottomNavigationPositionMode

Specifies the BottomNavigation position and behavior 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.

Default:

fixed

Example:

jsx

<BottomNavigation positionMode="sticky" />

style?

CSSProperties

Sets additional CSS styles to the BottomNavigation.

Example:

jsx

<BottomNavigation style={{ backgroundColor: 'blue' }} />

themeColor?

BottomNavigationThemeColor

Specifies the BottomNavigation theme color (see example).

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" />