BottomNavigationComponent

Represents the Kendo UI BottomNavigation component for Angular.

Copy Code@Component({
     selector: 'my-app',
     template: `
         <kendo-bottomnavigation [items]="items"></kendo-bottomnavigation>
     `
})
class AppComponent {
     public items: Array<any> = [
         { text: 'Inbox', icon: 'email', selected: true },
         { text: 'Calendar', icon: 'calendar'},
         { text: 'Profile', icon: 'user'}
     ]
}

Selector

kendo-bottomnavigation

Export Name

Accessible in templates as #kendoBottomNavigationInstance="kendoBottomNavigation"

Inputs

border

(default: false) Sets a top border to the BottomNavigation (see example).

disabled

(default: false) Disables the whole BottomNavigation.

items

The collection of items that will be rendered in the BottomNavigation (see example).

fill

The fill style of the BottomNavigation (see example).

• The possible values are:
• (Default) flat
• solid

itemFlow

Specifies how the icon and text label are positioned in the BottomNavigation items (see example).

The possible values are:

• (Default) vertical - Renders the text below the icon.
• horizontal - Renders the icon and the text on the same line.

positionMode

Specifies the position and behavior of the BottomNavigation when the page is scrollable (see example).

The possible values are:

• (Default) fixed - The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
• sticky - Positions the BottomNavigation at the end of the scrollable container.

themeColor

Specifies the theme color of the BottomNavigation (see example).

• The possible values are:
• (Default) primary - Applies coloring based on the primary theme color.
• secondary - Applies coloring based on the secondary theme color.
• tertiary - Applies coloring based on the tertiary theme color.
• info - Applies coloring based on the info theme color.
• success - Applies coloring based on the success theme color.
• warning - Applies coloring based on the warning theme color.
• error - Applies coloring based on the error theme color.
• dark - Applies coloring based on the dark theme color.
• light - Applies coloring based on the light theme color.
• inverse - Applies coloring based on the inverted theme color.

Events

select

Fires each time an item is selected. This event is preventable.