Kendo UI for Angular

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
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
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
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
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