Help

2 min read

Navigation Bar

The Navigation Bar is a standard component that displays information and actions relating to the current screen. It provides consistent navigation throughout your app and reinforces your brand identity.

How Navigation Bar Works

Platform behavior:

  • iOS - Standard iOS navigation component with large title support (iOS 11+)
  • Android - Material Design toolbar with consistent styling
  • Responsive - Adapts to different screen sizes and orientations

Content elements:

  • Title - Current screen or section name
  • Back button - Return to previous screen
  • Action buttons - Screen-specific actions (search, menu, etc.)
  • Background - Brand color and visual foundation

Foundation integration:

  • Colors inherit from your foundation color hierarchy
  • Customizations override foundation defaults
  • Changes apply across all app screens

Step-by-Step Customization

1. Access Navigation Bar Styling

  1. From the Poq App Manager home page, select App Styler
  2. Click Components in the left-hand menu
  3. Click Navigation bar - preview appears in the central column

2. Customize Button Label Color

In the right column, click the dropdown menu for Button Label:

  • Choose the color for navigation button text
  • Affects back buttons, action buttons, and navigation links
  • Ensure good contrast against background color

3. Set Background Color

Select Background to choose the navigation bar background color:

  • Use your primary brand color for strong brand presence
  • Consider neutral colors for content-focused apps
  • Ensure compatibility with your overall app theme

4. Save Changes

Click Save to apply changes across your entire app.

You have successfully customized your navigation bar!

Design Considerations

iOS Features

Large Title Style (iOS 11+):

  • Displays prominently before scrolling begins
  • Automatically adjusts as user scrolls
  • Provides clear context for current screen
  • Enhanced readability and visual hierarchy

Navigation Elements:

  • Back button with "< Back" text or custom label
  • Title centered or left-aligned based on content
  • Right-side action buttons for screen-specific functions

Android Features

Material Design Principles:

  • Follows Android design guidelines
  • Elevation and shadow effects
  • Consistent with platform expectations
  • Adaptive to different Android versions

Color Strategy

High-Contrast Approach

Background: Brand primary color (dark)
Button Labels: White or light color
Benefits: Maximum visibility, strong brand presence
Best for: Bold brand identities, content apps

Minimal Approach

Background: White or light gray
Button Labels: Dark color or brand primary
Benefits: Clean, content-focused design
Best for: E-commerce, reading apps

Brand-Forward Approach

Background: Brand primary color
Button Labels: Complementary brand color
Benefits: Strong brand consistency
Best for: Branded experiences, lifestyle apps

Accessibility Best Practices

Color Contrast

✅ WCAG compliance - Maintain 4.5:1 contrast ratio minimum
✅ Button visibility - Ensure navigation buttons are clearly visible
✅ Text readability - Navigation titles should be easy to read

Visual Hierarchy

✅ Clear navigation - Back button should be obvious
✅ Action clarity - Right-side buttons should indicate their function
✅ Consistent styling - Same appearance across all screens

Common Configurations

E-commerce App

Background: White or brand primary
Button Labels: Brand primary or high-contrast
Approach: Clean, product-focused navigation

Content/Media App

Background: Dark color for focus
Button Labels: White for maximum contrast
Approach: Minimize navigation distraction

Branded Experience

Background: Primary brand color
Button Labels: Secondary brand color or white
Approach: Strong brand presence throughout app

Testing Your Navigation Bar

Visual Testing

  1. Preview in App Styler - Check appearance in central column
  2. Screen variety - Consider different screen content
  3. Button states - Test active and inactive button states
  4. Platform differences - Verify iOS and Android appearance

Functional Testing

  1. Touch targets - Ensure buttons are easy to tap
  2. Contrast testing - Use accessibility tools to verify contrast
  3. Brand consistency - Check alignment with overall brand
  4. User flow - Navigate through app to test consistency

Troubleshooting

Navigation bar not updating:

  • Ensure you clicked Save after changes
  • Clear app cache and refresh
  • Check that foundation colors are properly set

Poor button visibility:

  • Increase contrast between background and button labels
  • Test with accessibility tools
  • Consider users with visual impairments

Inconsistent appearance:

  • Verify foundation elements are configured correctly
  • Check that all screens use the same navigation component
  • Test across different app sections

Platform-Specific Considerations

iOS Considerations

  • Large titles - Ensure colors work with large title display
  • Status bar - Consider status bar text color coordination
  • Safe areas - Navigation bar respects device safe areas (iPhone X+)

Android Considerations

  • Material Design - Follow elevation and shadow guidelines
  • System bars - Coordinate with system navigation bar
  • Adaptive colors - Support for dynamic system colors

What's Next?