Skip to main content

Navigation

Tini official navigation bar​

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

navigation

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.

    return

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.