Kendo UI for jQuery

jQuery BottomNavigation

  • Add modern, iOS-style navigation to jQuery apps you are designing for use on small screens.
  • Part of the Kendo UI for jQuery library along with more than 100 professionally designed components developers trust for all their jQuery UI needs.
  • Get up and running quickly with award winning support, detailed documentation, demos, virtual classrooms, and a 3-million-strong developer community.
BottomNavigation
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The jQuery BottomNavigation component is a modern main navigation element optimized for mobile-sized screens and made popular by iOS. Most developers use it to present five or less primary navigation items, most often with icons, used to quickly navigate the app or website.

    See the jQuery BottomNavigation demo

    bottomnavigation-overview
  • Items

    While icons are almost always used to represent navigation items, you can choose to use them with text, by themselves, or use text only. You can eve decide what combination you want to use in certain context. For example, show text only for selected items.

    See the jQuery BottomNavigation Items demo

  • Appearance

    The jQuery BottomNavigation component is extremely flexible with options for item flow, theme colors, borders, shadow, and more.

    See the jQuery BottomNavigation Appearance demo

    appearance-bottom-navigation
  • Templates

    The appearance of items in the jQuery BottomNavigation component can be further customized by supplementing templates. Templates can easily contain other controls, icons, images and more—just make sure they fit the limited space at the bottom of the screen.

    See the jQuery BottomNavigation Templates demo

  • Globalization

    The jQuery BottomNavigation component supports any globalization or localization scenarios. You can also enable RTL mode to display the control’s text and UI elements from left to right.

    See the jQuery BottomNaviagtion RTL demo

    rtl-support
  • Keyboard Navigation

    Improve accessibility and productivity with keyboard-only navigation. This component supports keyboard navigation to help navigate and interact with items.  

    See the jQuery BottomNavigation Keyboard Navigation demo

    keyboard-navigation
  • Accessibility

    The jQuery BottomNavigation component is compliant with Section 508 standards, is AA rated with WCAG 2.0 and follows WAI-ARIA standards.

    Read the jQuery BottomNavigation Accessibility documentation

    jQuery accessibility