Someone installs your WordPress site to the home screen. The splash looks right. The icon matches the brand. Then they open it in standalone mode and the browser chrome is gone, including the back button they relied on. They land on a product page, tap a blog post, and have no obvious way home. That is the moment a Progressive Web App stops feeling like an app and starts feeling like a website trapped in a fullscreen window.
Native apps solve this with a bottom tab bar. Four or five destinations. Always visible. Thumb-friendly. Progressify ships the same pattern for WordPress without asking you to rewrite the theme header, fight a page builder menu, or ship a custom React shell.
Progressify is the DaftPlug PWA plugin. This post is about the Navigation tab bar: a fixed bar of tabs pinned to the bottom of the screen on mobile, each with an icon, a label, and a URL. Not push notifications, not Android or iOS store builds, not skeleton loaders or toast messages, not install prompt rules, not offline sync, not pull-to-refresh or haptics. Those live elsewhere. For adjacent app-feel UI (loaders and toasts), keep WordPress PWA skeleton loaders and toast messages nearby.
What Progressify actually ships here
Stay inside the real feature set:
- A bottom navigation tab bar layered over your theme (no theme edits required)
- Each tab takes an icon, a label, and a URL
- Designed for mobile, especially when the PWA runs in standalone display mode
- Optional restriction so tabs show only for signed-in visitors (membership-style destinations)
- Platform support settings so you can limit the UI to phones or installed apps only
- Companion option for swipe-from-edge back/forward gestures if you want a lighter alternative or a pair with the bar
Keep the bar to about four or five items. More than that and labels stop being readable on a narrow phone.
Why a bottom tab bar matters on a WordPress PWA
Standalone removes the browser UI. When display mode is standalone, the user loses the browser back control they use on the open web. Without a tab bar (or another clear navigation pattern), people get stranded inside deep pages.
Thumbs live at the bottom. Top headers are fine on desktop. On phones, primary destinations belong where thumbs already rest. That is why native apps put Home, Shop, Search, and Account on a bottom bar.
Themes were not built for this. Most WordPress themes assume a top menu and a hamburger. Forcing a bottom bar through theme PHP, CSS sticky hacks, or a page-builder row creates conflicts with sticky headers, cookie banners, and chat widgets. Progressify layers the tab bar as PWA UI instead of asking the theme to become an app shell.
Membership and shop IA get clearer. If your important destinations are Shop, Cart, Account, and Help, the bar becomes a permanent map. Optional signed-in-only mode keeps account tabs off public screens.
It completes the “app-like interface” story. Progressify’s product page lists the tab bar next to transitions, dark mode, and other UI pieces. This post is only the tab bar. Treat the rest as separate enablement work.
How to add the bottom tab bar in wp-admin
Assume Progressify is installed, HTTPS works, and the PWA already installs (manifest, icons, service worker, display mode).
1. Confirm standalone is intentional
In Progressify display settings, confirm the launch display mode you want. The tab bar matters most when the installed app hides browser chrome. If you still run in browser mode for testing, you can enable the bar, but the real UX win shows up after install.
Smoke-test install on a phone before you obsess over tab icons.
2. Open Progressify UI components / Navigation
In wp-admin, open Progressify settings and find the UI components section for navigation. The Navigation tab bar control is Pro. Enable it, then decide whether it should appear on phones only, in installed apps only, or wherever your platform support setting allows.
3. Add four or five tabs (icon, label, URL)
For each item, set:
- Icon that reads at small size (simple glyphs beat detailed logos).
- Label of one or two short words (Home, Shop, Blog, Account).
- URL to a real destination on your site (homepage, shop archive, account page, contact).
Suggested starter sets:
- Content site: Home, Articles, Topics, About
- WooCommerce: Home, Shop, Cart, Account
- Membership: Home, Library, Account, Support (consider signed-in-only)
Do not point every tab at marketing landing pages with heavy heroes. Point them at destinations people return to.
4. Decide signed-in-only vs public
If tabs point at account-only URLs, enable the restriction so guests do not see broken or login-walled destinations as primary chrome. Public sites usually leave the bar visible for everyone and keep Account as one of the tabs with a normal login flow.
5. Check conflicts with theme chrome
On a real phone (or remote device tools):
- Install or open the PWA in standalone.
- Confirm the bar sits above the safe area / home indicator and does not cover primary buttons.
- Open each tab URL and confirm active state feels obvious.
- Watch for theme sticky footers, cookie consent bars, or chat bubbles overlapping the same bottom zone. Adjust theme/widget placement if needed. The Progressify bar is meant to layer, not to fight a second sticky footer.
If you also enable swipe-from-edge gestures, treat them as backup navigation, not a reason to skip the bar on a shop or membership app.
6. Keep the rest of Progressify UI out of this pass
Do not turn this into a kitchen-sink session. Skeleton loaders, toasts, pull-to-refresh, and haptics are separate toggles. Ship a clear tab map first. Add motion and feedback after navigation is boringly reliable.
What good looks like
- Installed PWA on a phone shows a fixed bottom bar with four or five readable tabs.
- Each tab opens the intended WordPress URL without theme template hacks.
- Standalone users can move between primary destinations without hunting for a back control.
- Labels stay short; icons stay legible on a narrow screen.
- Membership destinations are either public-safe or limited to signed-in visitors.
- Theme sticky footers and chat widgets do not cover the bar.
- You did not edit
header.phpor rebuild the menu in a page builder to fake a tab bar.
If the bar looks perfect in Chrome’s responsive mode but overlaps on a real iPhone, trust the device. Safe-area padding and third-party widgets show up there first.
Pitfalls (the ones that bite)
Too many tabs. Six or seven labels become punctuation. Cut to four or five.
Vague labels. “More” and “Explore” teach nothing. Name the destination.
Deep links only. If every tab opens a nested filter URL, people lose the mental model of Home.
Ignoring standalone. Enabling the bar while you still test only in a normal browser tab underplays the problem it solves.
Fighting the theme footer. A second sticky footer plus a tab bar is two products sharing one thumb zone. Move or shrink the theme piece.
Account tabs for logged-out users. Either allow a clean login path or restrict the bar to signed-in visitors.
Treating the bar as a push or install feature. It is navigation chrome. Install prompts and push live elsewhere in Progressify.
Skipping a phone install test. Desktop DevTools lie about thumbs, safe areas, and standalone chrome.
Practical checklist before you call it done
- Confirm the PWA installs and launches (ideally standalone) on a real phone.
- Enable the Progressify navigation tab bar under UI components.
- Add no more than five tabs with icon, label, and URL.
- Prefer primary destinations (Home, Shop, Account) over campaign landing pages.
- Turn on signed-in-only only when tabs are truly account-gated.
- Install or open the app and tap every tab once.
- Check overlap with cookie banners, chat widgets, and theme sticky footers.
- Leave pull-to-refresh, haptics, skeletons, and toasts for a later pass if they are not already stable.
- Ask one teammate who did not configure it to find Shop or Account in under three seconds.
- Document the tab URLs so the next redesign does not leave dead icons behind.
Takeaway
A WordPress PWA that installs cleanly still fails the app test if people cannot move between primary destinations after the browser chrome disappears. The fix is not a theme rewrite. It is a bottom navigation tab bar with a short list of real destinations.
Progressify adds that bar without theme edits: icons, labels, URLs, optional signed-in-only visibility, and platform limits so the chrome shows where an app should show it. Pair it with standalone display mode. Keep the map small. Test on a phone you actually hold.
One Pro membership unlocks Progressify plus Lightify, Generatify, Rankify, and Snapshotify. New Pro plugins join existing memberships. Plans differ by site count only (Pro $37.99 for 1 site, Pro Plus $74.99 for 5, Pro Max $138.99 for 100), with a 14-day money-back guarantee. See pricing when navigation should feel like an app instead of a fullscreen website.
Add the tabs. Install once. When Home, Shop, and Account stay under the thumb after the browser UI is gone, the PWA finally navigates like people expect.