Skip to main content

Enhance Your App’s Look with these 4 Navigation Bar Tweaks

Zapp offers the flexibility to customize your navigation bar with options like transparent background, solid or gradient backgrounds, and interactions that reveal or hide the navigation bar, allowing you to create designs that enhance both style and usability.

Choosing the right navigation behavior depends on your app's purpose and the type of content you want to highlight, whether it's immersive experiences, functional navigation, or hybrid approaches.

We recommend using multiple navigation bars to create a seamless experience, tailoring the design for the home screen, other main screens, and inner screens.

Here are 4 common designs adopted by companies in the industry.

(Netflix, Instagram)

Start with a transparent background for an immersive look, delivering an eye-catching entrance experience. As users scroll, the navigation bar appears to help users easily navigate through the app.

How to configure:

  1. Create a new navigation bar.
  2. Under “Navbar” position content at the top of screen.
  3. Under “Navbar Effects” enable "Enable Scroll Reveal Effect".
  4. Set your trigger value. This is where the reveal transition will end.
  5. Set the screen margin to 0.
  6. Style the navbar - start and beginning.

Please note that you need to create a separate Navigation bar for the home screen than the rest of the screens.

Hide Navigation Bar While Scrolling​

(Google News, YouTube)

When your app prioritizes content—like images, videos, or news feeds—use a navigation bar that hides while scrolling. This approach maximizes screen space and keeps users focused on the content while ensuring navigation remains accessible when they scroll back. Best for Media-rich screens (e.g., video feeds, image galleries).

How to configure:

  1. Create a new navigation bar.
  2. Style the navbar on the “navbar” section.
  3. Under “Navbar” position the content at the bottom of Status Bar.
  4. Under “Navbar Effects” enable "Enable Hide on Scroll".

Reveal Screen Title on Scroll​

(The Economist)

A smooth transition that reveals the screens’ title while scrolling. Helps users understand where they are in the app while maintaining a clean look of the app. It adds clarity and context without compromising the immersive experience.

How to configure:

  1. Create a new navigation bar.
  2. Under “Navbar” style the navbar to be transparent.
  3. Under “Navbar” choose “Title in all Screens”.
  4. Under “Navbar Effects” enable "Enable Scroll Reveal Effect".
  5. Under “Navbar Effects” toggle on “Change background” and style the navbar.
  6. Under “Navbar Effects” toggle on "Show Title on Scroll".

The title is taken from the CMS’s screen title.

Blur Navigation Bar​

(RedBull)

Use a blurred navigation bar to create a modern, elegant look while maintaining content focus. For example, on a video feed or image gallery, the blur effect subtly separates the navigation bar from the content while keeping the background visible.

How to configure:

  1. Create a new navigation bar.
  2. Under “Navbar” toggle on "Enable background blur".
  3. Under “Navbar” position the content at the top of screen.