PenTool UIالعربيةBrowse the library

Tab bars · Mobile app

Tab bars in Mobile app: 7 designs — Tab Bar with Count Badges · Tab Bar with Centre Action · Dot Page Indicator · Icon and Label Tab Bar

All Mobile app designs

Designs

RTL VerifiedLTR Verified Mobile app

Tab Bar with Count Badges

The badge caps at 99+ and the total is summed from the conversations

Advanced
Code Prompt
RTL VerifiedLTR Verified Mobile app

Tab Bar with Centre Action

Four tabs with one raised primary action in the middle

Advanced
Code Prompt
RTL VerifiedLTR Verified Mobile app

Dot Page Indicator

Follows the horizontal swipe and jumps when a dot is pressed

Intermediate
Code Prompt
RTL VerifiedLTR Verified Mobile app

Icon and Label Tab Bar

Five items maximum, each with an accessible name and a sliding indicator

Intermediate
Code Prompt
RTL VerifiedLTR Verified Mobile app

Label-only Tab Bar

No icons — plain labels with a moving underline

Intermediate
Code Prompt
RTL VerifiedLTR Verified Mobile app

Morphing Tab Bar

The active item expands to reveal its label; the rest stay icons

Advanced
Code Prompt
RTL VerifiedLTR Verified Mobile app

Floating Pill Tab Bar

Floats above content and hides when scrolling down

Intermediate
Code Prompt