Skip to main content


Tini official navigation bar

The navigation bar is uniformly provided by the framework by default, and designers cannot customize its position and style.


The Navigation box included 2 elements: More & Close icon.

  • Click More icon to display the system menu sheet.

    more icon
  • Click Close icon to exit the current Tini App.

    close icon

The Return action has 2 cases:

  • At the homescreen of the current Tini App, the navigation action always be hidden.

  • When the user go deeper in the app, the Back icon was appeared to help user can return to the previous screen.

    Attention: The return action should always be the Back icon. Do not use the Close icon to make users confuse with the Close icon at Navigation box.


The Add-on action is optional, you will need the add-on action when your app has the main feature need to be stick on all screen (e.g: search feature) but we don't recommend to use the add-on action to make users feel overwhelmed about your app navigation.

Color scheme of the navigation bar

We provide 3 type of color schemes of the navigation bar. You can choose the color scheme to adapt to your brand color style.

color scheme
  • Default background
  • Light color background
  • Dark color background

    Attention: You can change the background color to any color you want. The system will automatically adjust the color of the title and icons to fit with the color scheme.