Getting Started
    Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filterupdated
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBarsupdated
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilitiesnew
    Styling & Themes
    Common Features
    Project Setup
    Troubleshooting
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: 'envelop', selected: true },
         { text: 'Calendar', icon: 'calendar'},
         { text: 'Profile', icon: 'user'}
     ]
}

Selector

kendo-bottomnavigation

Export Name

Accessible in templates as #kendoBottomNavigationInstance="kendoBottomNavigation"

Inputs

NameTypeDefaultDescription

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

NameTypeDescription

select

EventEmitter<BottomNavigationSelectEvent>

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

In this article

Not finding the help you need?