Navigation & structure

Tab Bar / Bottom Navigation

Q: How do I implement a Tab Bar / Bottom Navigation?

Build a bottom tab bar: fixed bottom, 4 items with icon+label, active uses filled icon + theme color, padding-bottom: calc(8px + env(safe-area-inset-bottom)), preserve per-tab scroll position, optional badge on one item.

Fixed bottom global navigation switching top-level app areas.

Also known as bottom nav · app tabs · bottom tab bar

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Tab Bar / Bottom Navigation".

Build a bottom tab bar: fixed bottom, 4 items with icon+label, active uses filled icon + theme color, padding-bottom: calc(8px + env(safe-area-inset-bottom)), preserve per-tab scroll position, optional badge on one item.

Anatomy:
- tab item: Icon + label; three to five is the sweet spot.
- active state: Filled icon + theme color—not color alone.
- safe area inset: Pad for the home indicator.

Preferred API / pattern: `fixed bottom nav component / PWA shells`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: No safe-area padding
○Avoid: Losing scroll position when switching tabs.
○Avoid: Six-plus items
○Avoid: Active state is color only

In plain wordsHow people search for it

“the row of icons at the bottom of an app that switches main sections”“Home / Search / Profile fixed along the bottom”“the big thumb-zone nav on my phone app”

AnatomyOpen for part names

tab item: Icon + label; three to five is the sweet spot.
active state: Filled icon + theme color—not color alone.
safe area inset: Pad for the home indicator.

How to write itOpen for stack patterns

Web (HTML/CSS)<nav> position: fixed; bottom: 0 + safe-area padding

React + Tailwind + shadcn/uifixed bottom nav component / PWA shells

SwiftUITabView

Ant Designcustom fixed bar / FloatButton is not a tab bar

Notes

Tab bar is app-global; Tabs are in-page. Each tab owns its stack and scroll position. Three to five destinations—more belongs under “More/Profile.” Always pad safe-area-inset-bottom. Badges on icons are common for unread counts.

Common mistakesHumans and models trip here

No safe-area padding: home indicator covers labels on modern iPhones.
Losing scroll position when switching tabs.
Six-plus items: overcrowded—collapse into More.
Active state is color only: add shape/weight change.

More failure symptoms on AI broke it.

Related patterns

TabsA row of labels that swap mutually exclusive views in the same place.Safe Area InsetsThe inset region free of notches, rounded corners, and the home indicator.BadgeA compact count or status mark attached to an icon, tab, or label.Sticky PositioningAn element scrolls with the page until it hits an edge, then sticks there.

Spotted a wrong name or missing pattern?

Message on X