• Introduction
  • Getting Started
  • Vue 2 End of Support
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Conversational UInew
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollView
    • Tooltip
    • TreeList
    • TreeView
    • Upload
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting
Components / Layout / BottomNavigation / Overview / 

Kendo UI for Vue Native BottomNavigation Overview

The Kendo UI for Vue native BottomNavigation allows movement among primary destinations in an application. The main purpose of the component is to offer a navigation element where each option is represented by an icon and optional text.

The BottomNavigation Component is part of Kendo UI for Vue, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Start Free Trial

The following example demonstrates the BottomNavigation in action.

Example
View Source
Change Theme:

The BottomNavigation is part of the Kendo UI for Vue Native Layout component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the BottomNavigation and the rest of the components in the package, see the Getting Started with the Kendo UI for Vue Native Layout Package guide.

Key Features

  • Content Types—With the BottomNavigation component you can specify the icons and text labels for the rendered buttons based on their content. You can also choose if the icon and the text are on the same line or below each other.
  • Positioning Mode—You can choose between the fixed and sticky position modes.
  • Appearance—The BottomNavigation comes with predefined option that allow you to set its theme colors and fill options.
  • Routing—You can use the BottomNavigation as a container for navigational components with any router library.
  • Custom Rendering—You can override the default rendering of the BottomNavigation items.
  • Globalization—The BottomNavigation has built-in globalization support.

Support and Learning Resources

Additional Resources

Previous
Wai-Aria Support
Next
Content Types

In this article

Not finding the help you need?

Contact Support