Extends Item

Apple.NavigationBar

The Apple.NavigationBar element provides an iOS style navigation bar.

Although the navigation bar can be used as a standalone element, it is most powerful when used in conjunction with a StackView. Pages added to a StackView that have a full-width Apple.NavigationBar at the top, will automatically be linked together using the standard iOS transition appearance shown below.

Use the Next Page button to navigate forward in the example below.

property Apple.NavigationBar.Size size: .Normal

The navigation bar size.

Apple.NavigationBar.Size.Normal

A regular title navigation bar.

Apple.NavigationBar.Size.Large

A large title navigation bar.

On iOS, large title navigation bars are often used alongside a ScrollView and collapse into the normal title appearance when scrolled. For this effect, use the Apple.NavigationPage element.

property Apple.NavigationBar.Style style: .Default

The navigation bar background style.

Apple.NavigationBar.Style.Default

A light background color with dark text.

Apple.NavigationBar.Style.Black

A dark background color with light text.

property Bool translucent: true

Controls whether the navigation bar is translucent. When the bar is translucent, content behind it is blurred and tinted.

property Color barTint: #transparent

Sets the background color of the navigation bar, overriding the default tint color.

Apple.NavigationBar {
    title: "Page"
    barTint: #amber
}

property String title

property Color titleColor

property String titleFont: "San Francisco Semibold"

property Float titleSize: 18

The title text, color, font and size to use in the navigation bar.

property Color tint: #Apple.Tint

Sets the tint color to use for the bar's back navigation button.

Apple.NavigationBar {
    title: "Page"
    tint: #red
}

property Float contentInsetTop

The amount the content is inset from the top of the navigation bar. This inset allows the navigation bar to appear correct when placed directly under the device status bar.

It is generally set correctly by the system, but you can tweak it manually if required.