Tab Bar Mobile
Mobile bottom tab bar with five thumb-sized tabs, one active indicator, and a notification badge rendered in a phone frame context strip.
Mobile bottom tab bar with five thumb-sized tabs, one active indicator, and a notification badge rendered in a phone frame context strip.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Tab Bar Mobile is the primary navigation bar for native-style mobile apps: five tabs (Home, Search, New, Alerts, Profile) rendered in a phone frame context strip so the pattern reads clearly at desktop preview scale. Home is active with a foreground underline indicator below the icon label. Alerts carries a badge reading 3. Tabs are touch-sized with a minimum tap target, icon above label, and aria-current on the active link.
Tabs are one typed array with an optional badge field so all objects share the same shape. The phone frame context strip prevents the bar from floating in isolation while keeping the component self-contained.
Reach for this block as the bottom navigation shell in a companion mobile web or PWA view, wired to your router for active state. Place it fixed to the bottom of the viewport and add pb-safe-area-inset-bottom for iOS notch clearance.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the primary mobile navigation bar. Other tab bar patterns:
Tip: five is the maximum before labels start to truncate on narrow screens; move less-used items into a More tab.