BottomNavigationComponent

Represents the Kendo UI BottomNavigation component for Angular.

Use the BottomNavigation component to let users quickly switch between primary views in your app.

typescript

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

Selector

kendo-bottomnavigation

Export Name

Accessible in templates as #kendoBottomNavigationInstance="kendoBottomNavigation"

Inputs

Name	Type	Default	Description
border	boolean	false	Shows a top border on the BottomNavigation (see example).
disabled	boolean	false	Disables the entire BottomNavigation.
fill	BottomNavigationFill	'flat'	Sets the fill style of the BottomNavigation (see example).
itemFlow	BottomNavigationItemFlow	'vertical'	Controls how the icon and text label are positioned in the BottomNavigation items.
items	any[]		Provides the collection of items rendered in the BottomNavigation (see example).
positionMode	BottomNavigationPositionMode	'fixed'	Sets the position and behavior of the BottomNavigation when the page is scrollable (see example).
themeColor	BottomNavigationThemeColor	'primary'	Sets the theme color of the BottomNavigation (see example).

Events

Name	Type	Description
select	EventEmitter<BottomNavigationSelectEvent>	Fires when a user selects an item. This event is preventable.