background

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+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Bottom Navigation Header
  • Add a Modern Navigation to Your React Apps

    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 the 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 the 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 the 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 the 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 the 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 the React Bottom Navigation Custom Rendering demo

    React Bottom Navigation Component Custom Rendering

All KendoReact Components

Next Steps