Kendo UI for Angular

Angular BottomNavigation

  • The Kendo UI for Angular BottomNavigation Component gives users a convenient iPhone-style way to navigate apps on small screens.
  • Part of the Kendo UI for Angular library along with 100+ professionally-designed components developers trust for all their Angular UI needs.
  • Get up and running quickly with award winning support, detailed documentation, demos, virtual classrooms and a 3-million-strong developer community.
Angular UI Component Library
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The Angular BottomNavigation component is perfect for adding a convenient way for users to navigate between primary screens on touch devices with smaller screens. Typically used in responsive applications and Progressive Web Applications, bottom navigation places three to five items, consisting of text and an optional image, across the bottom of the screen where they are easily accessible.

    See the Angular BottomNaviation demo

    Angular Bottom Navigation Component - Overview
  • Items

    The Bottom Navigation component’s primary parts are its items. Items are the tappable elements that make up the navigation bar. These items can be text, images, or text and images. When using text and images, which is the most common scenario, you can choose where the text and image align, or glow, vertically or horizontally.

    See the Angular BottomNavigation item flow demo

    Angular Bottom Navigation - Content Type
  • Fixed or Sticky Modes

    Choose how you would like the Bottom Navigation component to appear on the page in relation to your other content. When using a sticky position, the navigation bar will always appear at the bottom of the container while the sticky position will place the bar at the bottom of the viewport.

    See the Angular BottomNavigation position mode demo

    Angular BottomNavigation - Positioning
  • Templates

    Go beyond the built-in appearance configurations and customize your BottomNavigation component however you like.

    See the BottomNaviation templates demo

  • Appearance

    Customize the appearance of your Bottom Navigation bar with convenient properties for theme, fill options, borders, and more.

    See the Angular BottomNavigation appearance demo

    Angular Bottom Navigation - Appearance
  • Keyboard Navigation

    The Angular BottomNavigation Component supports keyboard commands to move focus and select items.

    See the BottomNavigation keyboard navigation demo

  • Accessibility

    The Kendo UI for Angular BottomNaviagation component is compliant with Section 508 and WAI-ARIA standards and has a WCAG 2.0 AAA rating.


    Read the Angular BottomNavigation documentation


All Kendo UI for Angular Components

Kendo Angular UI Getting Started Background

Get Started with Kendo UI for Angular

Kendo UI