New to Kendo UI for Angular? Start a free 30-day trial

Items Appearance

The BottomNavigation component allows you to modify its textual content and styling according to the specific project requirements.

To configure the BottomNavigation items, use its built-in items property and bind it to an array of BottomNavigationItem elements.

The BottomNavigation provides various configuration options and enables you to do the following:

Specify the text
Set the selected items
Disable specific items
Change the style of the items
Display icons

Setting the Item Text

You can set the text of the BottomNavigation's items by utilizing the text property.

The following example demonstrates how to set the text property of the BottomNavigation.

Change Theme

Theme

Loading ...

Setting the Selected Items

You can modify the selected state of the items in the BottomNavigation by using the selected property.

The following example demonstrates how to set the selected property of the BottomNavigation.

Change Theme

Theme

Loading ...

Disabling Specific Items

You can disable BottomNavigation items by setting the disabled property to true.

The following example demonstrates how to set the disabled property of the BottomNavigation.

Change Theme

Theme

Loading ...

Styling the Items

You can customize the styling of the BottomNavigation's items by using either of the following approaches:

Setting the cssClass property.
Setting the cssStyle property.

The following example demonstrates how to set the cssClass and cssStyle properties of the BottomNavigation.

Change Theme

Theme

Loading ...

Displaying Icons

Depending on the configuration of the project, you can enhance the content of the BottomNavigation by displaying any of the following icon types:

SVG icons
Font icons
Third-party library icons

As of R2 2023 (v13.0.0) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from font to svg. Set the svgIcon property, or Continue Using Font Icons.

Displaying SVG Icons

To display an SVG icon inside the BottomNavigation, select the desired one from the list of SVG icons supported by Kendo UI for Angular, and set the svgIcon to the necessary icon name.

public home: SVGIcon = homeIcon;

public items = [
    { text: 'Home', svgIcon: this.home, selected: true },
];

The following example demonstrates how to set the svgIcon property of the BottomNavigation.

Change Theme

Theme

Loading ...

Displaying Font Icons

To display an icon inside the BottomNavigation:

Use the ICON_SETTINGS token of the Icons package and set the icon type to font. For more information, go to the topic about icon settings.
Depending on the font icons library, you can set the:
- icon property to a font icon in the Kendo UI theme. For details, go to the list of font icons supported by Kendo UI for Angular.
  ts
```
public items = [
    { text: 'Home', icon: 'home' },
];
```
- iconClass property to a third-party font icon like FontAwesome.
  ts
```
public items = [
    { text: 'Home', iconClass: 'fa fa-home' },
];
```

The following example demonstrates how to set the icon and iconClass properties of the BottomNavigation.

Change Theme

Theme

Loading ...