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

BottomNavigationComponent

Represents the Kendo UI BottomNavigation component for Angular.

@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

boolean

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

disabled

boolean

(default: false) Disables the whole BottomNavigation.

items

any[]

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

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.

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

select

EventEmitter<BottomNavigationSelectEvent>

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