KendoReact

React BottomNavigation

  • Easily add a customizable navigation element in which each option is represented by an icon and optional text.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • Overview

    The React Bottom Navigation component is the perfect navigation UI element for responsive web and mobile applications. Each navigation item within the React component features the ability to define a combination of icons and text to best illustrate where it leads. The KendoReact Bottom Navigation component easily integrates with any routing library, making navigating between views a simple task. Additionally, the Bottom Navigation component is responsive and will automatically adjust to the size of the viewport.

    See React Bottom Navigation demo

    React Bottom Navigation Component
  • Content Types

    Through a few simple configuration options, the items of the KendoReact Bottom Navigation component can be set up to show icons, text or a mix of both. The component also lets React developers define if the text should be displayed beneath or next to the icon.

    See React Bottom Navigation Content Types demo

    React Bottom Navigation Component Content Types
  • Positioning

    Positioning HTML elements can be tricky, but the React Bottom Navigation component can be easily positioned through a single configuration option. Developers can choose if the KendoReact Bottom Navigation should be fixed and always remain at the bottom of the viewport or sticky and only remain at the bottom of the viewport after a certain position has been scrolled past.

    See React Bottom Navigation Positioning demo

    React Bottom Navigation Component Positioning
  • Appearance

    Configuring the appearance of the KendoReact Bottom Navigation component is a breeze. Options like filling in each item with a solid color or just rendering an outline, as well as appearance options associated with success, warning, error, primary and more common scenarios let React developers make the React Bottom Navigation component fit any design requirements.

    See React Bottom Navigation Appearance demo

    React Bottom Navigation Component Appearance
  • Routing

    The React Bottom Navigation component is intended to be used as the main navigation for a React application, which means it will often be in charge of navigating from one view to the next. To make this as easy as possible the KendoReact Bottom Navigation component can integrate with any routing library.

    See React Bottom Navigation Routing demo

  • Custom Rendering

    When the out-of-the-box appearance options are not enough, the React Bottom Navigation supports the ability to pass a custom renderer for each item. This opens up the possibility to take full control over the look and feel of the React component.

    See React Bottom Navigation Custom Rendering demo

    React Bottom Navigation Component Custom Rendering

All KendoReact Components

waves bg

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.