Navigation bar

What is Navigation bar?

The top app bar provides content and actions related to the current screen. It's used for branding, screen titles, navigation, and actions.

How to design Navigation bar?

Title

The Title section controls how the navigation bar title is displayed.

• Text Style Choose Custom to manually control font size, weight, color, and font family. You can also select predefined styles such as Heading or Body to apply theme-based typography.

• Font Size Set the size of the title text in pixels (e.g., 18px).

• Font Weight Select how bold the title text appears (e.g., Regular 400 or Bold 700).

• Font Style (Premium) Choose a custom font family (e.g., Abel, Aladin) to personalize the navigation bar title.

  This option is available only for Premium plans.

• Color Pick a predefined theme color (Primary, Heading, Body, Label, Icon, Background) or select a Custom color using a HEX code.

• Title Image Height / Width Define the size of the title icon or image displayed alongside the title text.

Background color:

The Background Color setting controls the color of the navigation bar background.

• Select from predefined theme colors such as Primary, Heading, or Background.

• You can also choose Custom to apply a HEX color value.

• This helps ensure proper contrast and alignment with your overall app theme.

Button

Button spacing:

Changes space between two button in the navigation bar.

Ex. In the first image, the spacing between two buttons are 15%. In the second image, the spacing between two buttons are 35%.

Button Leading space:

This will add space on the left side of button. This only applies to the first button on the left side.

Ex. In the first image, the leading space is default 10px. In second image, it's 30px.

Button Trailing space:

This will add space on the right side of button. This only applies to the last button on the right side.

Ex. In the first image, the trailing space is default 10px. In second image, it's 30px.

Button height & width:

Apply navigation bar button height and width.

Ex. In the first image, the size of the button is 80x80. In the second image, size of the button is 50x50.