iOS-style dock at the bottom of mobile apps. 4–5 icons + labels, an active indicator that animates between them, optional notification badges.
A bottom-anchored navigation bar that holds the top-level sections of a mobile app: Home, Search, Activity, Inbox, Profile. It's always visible, always reachable with one thumb, and shows where you are with an active icon + label highlight. The pattern Apple defined with iOS in 2007 and Android adopted later — used by Instagram, Twitter, Spotify, every major mobile app.
The bar is position: fixed; bottom: 0 with full-width flex of 4–5 tab buttons. Each tab has an icon stacked on top of a tiny uppercase label. The active tab gets the brand color, often with a small underline pip below the icon. On tap, JS switches which content panel is visible — usually with a quick fade or slide transition. Add a small red badge for notifications on relevant tabs. Crucially, add padding-bottom: env(safe-area-inset-bottom) on iOS to clear the home-indicator.
Tap any tab on the phone mockup. Content swaps and the active pip slides under the new icon.
A quiet, chronological view of the people you actually follow.
Find people, posts, places, and projects.
Drop a photo, write a note, queue a publication.
Quiet hours from 9pm to 8am, always.
Profile, drafts, archive, settings.
Build a mobile bottom tab bar inside a phone mockup. Phone: 320px × ~19/9 aspect, rounded corners, 12px bezel, top notch oval, status bar showing "9:41". Inside: a scrollable content area + a fixed bottom tab bar. Tab bar: position:fixed bottom:12px left/right:12px, frosted-glass background (rgba(20,20,28,0.85) + backdrop-filter:blur(20px)), border-radius:28px, padding:8px, flex with 5 equal tabs. Each tab: SVG icon stacked on a tiny uppercase mono label, default color:rgba(255,255,255,0.5). Active tab: accent color + a small underline pip (3px tall, 14px wide, accent color with glow). The "Inbox" tab has a small red notification badge "3" positioned top-right of the icon. On tap, switch which content screen is visible (display:none others, display:block on active) with a quick fade-up animation. Include 5 screens with different mock content (feed, search, compose, notifications, profile). Add padding-bottom:env(safe-area-inset-bottom) for iOS home indicator clearance.