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 color

Changes navigation bar title color.

Background color:

Changes navigation bar background color.

Title font size:

Changes navigation bar title font size. Default is 15 px. Here in the second image you can see that I have change it from 15px to 30px.

Title image height & width:

Set navigation bar title image height and width. This is very important when you are setting up navigation bar title type as image under https://app.gitbook.com/s/-MlBy5z08zL1UoCwNqmg/~/changes/210/screen-customization/tab-bar/navigation-bar/navigation-bar-title

Button setting

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.