A Navigation Bar is usually displayed at the top of the window and contains buttons to navigate in the hierarchy of the app. The main components are:

  • Button left (usually “back”)
  • Title in the middle
  • Button right

appdoo - Elements - Navigation Bar

No matter how much content is on the screen, the Navigation Bar always remains at the top of the window and is never scrolled away.

Properties

To show the properties of the Navigation Bar, click the Properties tab (the slider icon) in the upper right sidebar.

appdoo - Elements - Navigation Bar (Navigation Bar)

  • Title
    Enter the title here. If this field is left empty, the title of the screen (from the Overview) will be used. If the title is longer than the available space, the text is cut off at the right edge and ended with “…”.

  • Title Image
    You can also use an image as a title instead of a text. Drag the desired image from the Files folder of the Outline to this field. To remove the image from this field, select the field and press the Back Space key or use the context menu.

  • Translucent
    If this checkbox is activated, the Navigation Bar is displayed with a slight transparency. In addition, the area for displaying the other elements of the screen no longer starts below the Navigation Bar but at the top of the screen, i.e now behind the Navigation Bar.

    If this checkbox is active and you add a List View to the screen for example, then you have to insert some space above the first entry so that the first entries do not disappear behind the Navigation Bar. This distance can be set in the “Scroll Insets”.

  • Dark Style
    If this checkbox is activated, the background of the Navigation Bar will be dark and the font bright. Which colors are used depends on the iOS version.

  • Tint Color
    The Tint Color sets the default font color for the buttons in the Navigation Bar.

    appdoo - Elements - Navigation Bar (Tint Color)

  • Background Color
    Here you define the background color of your Navigation Bar.

  • Background Image
    You can also use an image for the background of the Navigation Bar. Drag the desired image from the Files folder of the Outline to this field. To remove the image from this field, select the field and press the Back Space key or use the context menu.

Font

  • Change Default Font
    The standard font of the iOS version installed on the user’s device is used for the Navigation Bar texts. If you want to change this font, activate this checkbox. This displays the corresponding setting options.

    appdoo - Elements - Navigation Bar (Font)

    In this area you have the possibility to set the font, the font weight, font size and the color. If you select the “System” option for the font, the system font specified by iOS will be used for the display. This font may differ between different versions of iOS.

    These settings are used in all screens in your project.

Geometry

All information about this area can be found on the separate Geometry page.

All information about this area can be found on the separate Data Links page.