---
title: Usage
position: 2
seo_title: Guidelines for Using the BottomNavigation Component
seo_description: Get the knack of the Telerik and Kendo UI BottomNavigation and
  learn how to use the sizing options of the component by following the
  instructions and recommendations in the usage guidelines created by our
  designers.
---
## Usage Guidelines

The Telerik and Kendo UI BottomNavigation requires you to follow some basic principles when using the component.

### Label and Icon

The BottomNavigation is effective when used to present content that can be appropriately conveyed through icons accompanied by concise and meaningful text labels. This approach improves usability, clarity, and accessibility and caters to a positive user experience.

<DosDonts>
<Do description="Use the BottomNavigation for content that you can communicate through icons, and ensure that the text labels provide concise and meaningful definitions.">![A Telerik and Kendo UI BottomNavigation with clear icons and meaningful labels](images/components-bottomnavigation-usage-label-and-icon-do.png "Use clear icons and meaningful labels when working with the Telerik and Kendo UI BottomNavigation.")</Do>
<Dont description="Avoid hiding functionality behind icons that are difficult to recognize and labeled with long and vague text.">![A Telerik and Kendo UI BottomNavigation used incorrectly with misleading icons and long labels](images/components-bottomnavigation-usage-label-and-icon-dont.png "Don't use long labels and misleading icons when working with the Telerik and Kendo UI BottomNavigation.")</Dont>
</DosDonts>


### Color

A harmonious and visually appealing bottom bar in your app or website provides users with intuitive navigation. To achieve this, it's crucial to maintain consistency in the color schemes and configurations of your BottomNavigation items.

<DosDonts>
<Do description="Use the predefined theme-color configurations of the BottomNavigation item to maintain design consistency.">![A Telerik and Kendo UI BottomNavigation with consistent colors](images/components-bottomnavigation-usage-color-do.png "Use consistent colors when working with the Telerik and Kendo UI BottomNavigation.")</Do>
<Dont description="Avoid creating custom color configurations for BottomNavigation items, as it may lead to inconsistency in the overall design.">![A Telerik and Kendo UI BottomNavigation with inconsistent colors](images/components-bottomnavigation-usage-color-dont.png "Don't use inconsistent color configurations when working with the Telerik and Kendo UI BottomNavigation.")</Dont>
</DosDonts>