• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Navigation / API / AppBarComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

AppBarComponent

Represents the Kendo UI AppBar component for Angular. Used to display information, actions, branding titles and additional navigation on the current screen.

Selector

kendo-appbar

Export Name

Accessible in templates as #kendoAppBarInstance="kendoAppBar"

Inputs

NameTypeDefaultDescription

position

AppBarPosition

Specifies the position of the AppBar (see example).

  • The possible values are:

  • top (Default)—Positions the AppBar at the top of the content. Setting the position property to top requires adding the Appbar component before the page content. The position property applies CSS top: 0 style in fixed mode and also adds a box-shadow to the bottom of the AppBar.

  • bottom—Positions the AppBar at the bottom of the content. Setting the position property to bottom requires adding the Appbar component after the page content. The position property applies CSS bottom: 0 style in fixed mode and also adds a box-shadow to the top of the AppBar.

positionMode

AppBarPositionMode

Specifies the positionMode of the AppBar (see example).

  • The possible values are:
  • static (Default)—Does not position the AppBar in any special way. It is positioned according to the normal flow of the page.
  • sticky—Positions the AppBar based on the user's scroll position. A sticky element toggles between static and fixed CSS position property, depending on the scroll position.
  • fixed—Positions the AppBar relative to the viewport. It always stays in the same place even if the page is scrolled.

themeColor

AppBarThemeColor

Specifies the theme color of the AppBar. The theme color will be applied as background color of the component.

  • The possible values are:
  • light (Default)—Applies coloring based on light theme color.
  • dark—Applies coloring based on dark theme color.
  • inherit— Applies inherited coloring value.
  • primary— Applies primary coloring value.

In this article

Not finding the help you need?

Contact Support