You are reading docs for v1.3.1, click here for the latest version.

This is an overview of the most common usage of ActionBar. For more information about the available properties, methods, or events, head over to the complete API documentation for ActionBar.

The ActionBar component is a NativeScript abstraction for the Android ActionBar and iOS NavigationBar.

Using a title

<ActionBar title="MyApp" />

Using a custom title view

  <StackLayout orientation="horizontal">
    <Image src="res://icon" width="40" height="40" verticalAlignment="center" />
    <Label text="ativeScript" fontSize="24" verticalAlignment="center" />

Setting an App Icon for Android

<ActionBar title="My App" android.icon="res://icon" android.iconVisibility="always" />

Removing the border

On iOS and Android a little border is drawn at the bottom of the ActionBar. Furthermore, the background color of the ActionBar on iOS is slightly different to what you specify because iOS applies a filter. To remove this filter and the border, set flat to true.

<ActionBar title="My App" flat="true" />


titleStringThe title to be shown in the ActionBar.
android.iconStringThe icon to be shown on Android.
android.iconVisibilityStringSets when the icon is visible.
flatbooleanRemoves the border and iOS color filter. Default false.