• What is KendoReact
  • Getting Started
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Charts
    • Common Utilitiesupdated
    • Conversational UI
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
      • Overview
      • Getting Started
      • ActionSheetnew
      • AppBar
      • Avatar
      • BottomNavigation
      • Breadcrumb
      • Card
      • Drawer
      • ExpansionPanel
      • GridLayout
      • Menu
      • Context Menunew
      • PanelBar
      • Splitter
      • StackLayout
      • TabStrip
      • Stepper
      • TileLayout
      • Globalization
      • API
    • ListBox
    • ListView
    • Map
    • Notification
    • PDF Processing
    • PDFViewernew
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Layout / API / BottomNavigationProps / 

BottomNavigationProps

Represents the props of the KendoReact BottomNavigation component.

NameTypeDefaultDescription

border?

boolean

Sets a border to the BottomNavigation.

className?

string

Sets additional CSS classes to the BottomNavigation.

dir?

string

Represents the dir HTML attribute. This is used to switch from LTR to RTL.

disabled?

boolean

Disables the whole BottomNavigation.

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.

item?

React.ComponentType<BottomNavigationItemProps>

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

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.

items?

BottomNavigationItemProps[]

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

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.

style?

React.CSSProperties

Sets additional CSS styles to the BottomNavigation.

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.

Methods

itemRender

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

Parameters

span

ReactElement<HTMLSpanElement>

itemProps

BottomNavigationItemProps
Returns

ReactNode

onKeyDown

Triggered on onKeyDown event.

Parameters

event

BottomNavigationEvent

onSelect

Fires when a BottomNavigation item is selected.

Parameters

event

BottomNavigationSelectEvent

In this article

Not finding the help you need?

Contact Support