Help

2 min read

Tab Bar

The Tab Bar provides bottom navigation for your app's main sections. It's a crucial interface element that helps users navigate between primary app areas and reinforces your visual brand.

How Tab Bar Works

Navigation structure:

  • Bottom placement - Fixed at bottom of screen for easy thumb access
  • Primary navigation - Access to main app sections (Home, Shop, Account, etc.)
  • Visual indicators - Shows current section with highlighting
  • Icon + text - Combines icons with descriptive labels

Platform behavior:

  • iOS - Standard iOS tab bar component
  • Android - Bottom navigation following Material Design
  • Responsive - Adapts to different screen sizes

Step-by-Step Customization

1. Access Tab Bar Styling

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

2. Configure Tab States

Customize appearance for different tab states:

Active Tab (Selected):

  • Background color for selected tab
  • Text/icon color for active state
  • Highlight or indicator styling

Inactive Tab (Unselected):

  • Background color for unselected tabs
  • Text/icon color for inactive state
  • Subtle styling to show availability

3. Set Background Colors

  • Tab bar background - Overall container color
  • Individual tab backgrounds - Per-tab styling options
  • Selection indicator - Highlight for active tab

4. Save Changes

Click Save to apply styling across your app.

Design Best Practices

Visual Hierarchy

✅ Active state prominence - Selected tab should be clearly highlighted
✅ Inactive clarity - Unselected tabs should be obviously tappable
✅ Consistent spacing - Equal spacing between all tabs
✅ Icon legibility - Icons should be clear at small sizes

Color Strategy

✅ Brand integration - Use brand colors for active states
✅ High contrast - Ensure text is readable on backgrounds
✅ Platform appropriate - Follow iOS/Android conventions
✅ Accessibility - Meet contrast requirements

Content Considerations

✅ Icon selection - Use recognizable, universal icons
✅ Label clarity - Keep tab labels short and descriptive
✅ Consistent metaphors - Icons should match their functions

Common Tab Bar Configurations

Brand-Forward Approach

Background: White or light brand color
Active Tab: Primary brand color
Inactive Tab: Gray or muted brand color
Use case: Strong brand presence

High Contrast

Background: Dark color
Active Tab: Bright accent color  
Inactive Tab: Medium gray
Use case: Modern, dramatic appearance

Minimal Design

Background: White
Active Tab: Brand primary
Inactive Tab: Light gray
Use case: Clean, content-focused design

Platform Considerations

iOS Tab Bar

  • Standard positioning - Fixed at bottom above home indicator
  • Safe area support - Respects iPhone home indicator area
  • Dynamic Type - Supports accessibility text sizing
  • Badges - Can display notification badges on tabs

Android Bottom Navigation

  • Material Design - Follows Material Design 3 guidelines
  • Elevation - Subtle shadow to separate from content
  • Ripple effects - Touch feedback on tab selection
  • Adaptive sizing - Adjusts for different screen densities

Accessibility Considerations

Visual Accessibility

✅ Color contrast - 4.5:1 minimum ratio for text
✅ Icon clarity - Recognizable at various sizes
✅ State indication - Clear visual difference between active/inactive

Interaction Accessibility

✅ Touch targets - Minimum 44px hit area
✅ Screen reader support - Proper labels for assistive technology
✅ Keyboard navigation - Support for external keyboards

Testing Your Tab Bar

Visual Testing

  1. All tab states - Test both active and inactive appearances
  2. Different sections - Navigate to each tab to verify consistency
  3. Screen sizes - Check appearance on various device sizes
  4. Platform testing - Verify on both iOS and Android

Usability Testing

  1. Thumb reach - Ensure tabs are comfortable to reach
  2. Visual feedback - Confirm clear indication of selected tab
  3. Icon recognition - Verify icons clearly represent their functions
  4. Label readability - Check text is readable at default and large sizes

Troubleshooting

Tab selection not clear:

  • Increase contrast between active and inactive states
  • Add background color or border to active tab
  • Consider icon fill vs. outline for active/inactive states

Text too small or hard to read:

  • Ensure adequate contrast against background
  • Test with larger accessibility text sizes
  • Consider font weight differences for active tabs

Icons not recognizable:

  • Use standard, universal icons where possible
  • Ensure icons match their function clearly
  • Test icon recognition with users

What's Next?