@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`	Sets a top border to the BottomNavigation (see example).
disabled	`boolean`	`false`	Disables the whole BottomNavigation.
fill	`BottomNavigationFill`		The fill style of the BottomNavigation (see example). The possible values are: (Default) `flat` `solid`
itemFlow	`BottomNavigationItemFlow`		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.
items	`any[]`		The collection of items that will be rendered in the BottomNavigation (see example).
positionMode	`BottomNavigationPositionMode`		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	`BottomNavigationThemeColor`		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

Name	Type	Description
select	`EventEmitter<BottomNavigationSelectEvent>`	Fires each time an item is selected. This event is preventable.

BottomNavigationComponent

Selector

Export Name

Inputs

border

disabled

fill

itemFlow

items

positionMode

themeColor

Events

select

In this article

Not finding the help you need?

Getting Started

Support Resources

Community

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

BottomNavigationComponent

In this article

Not finding the help you need?

Getting Started

Support Resources

Community