Mobile Navigation: Why We Added a Bottom Tab Bar

Release: v0.1.101 · Category: responsive

The Problem

A large share of users — particularly letting agents — access the platform while out at properties, on their phones. The previous mobile navigation was a hamburger menu that opened a slide-over drawer containing all 7 navigation groups, each of which could be expanded to reveal individual pages.

Getting anywhere core required:

Tap the hamburger icon to open the drawer
Scroll to find the right group
Tap to expand the group
Tap the destination

4 interactions minimum, every single time. That's friction that compounds across every property visit, every check-out report, every deposit query raised in the field.

The Solution

We introduced a persistent bottom tab bar on mobile screens (hidden on md and above, where the full sidebar is available). It places the 5 most-used destinations one tap away:

Dashboard — overview and KPIs
Tenancies — all active and historic tenancies
Check-Out Reports — create and manage check-out inspections
Deposit Releases — review and action deposit deductions
Compliance — Renters' Rights Act compliance tracker

The hamburger menu and slide-over drawer remain in place for the full set of secondary pages. Nothing has been removed — the bar simply promotes the highest-traffic destinations to the surface.

Badge Counts

Each tab can show a badge indicating unread or urgent items, pulled directly from the same KPI data that powers the dashboard. Agents can tell at a glance — before tapping anything — whether a deposit release needs attention or a compliance flag has been raised.

Before vs. After

Metric	Before	After
Taps to reach Dashboard	4	1
Taps to reach Tenancies	4	1
Taps to reach Check-Out Reports	4	1
Taps to reach Deposit Releases	4	1
Taps to reach Compliance	4	1
Secondary pages	4	4 (unchanged)

Technical Notes

The bottom tab bar is rendered inside src/components/mobile-nav.tsx and applies only when the viewport is below the md breakpoint (Tailwind's md:hidden utility). The existing SidebarNav component is still reused inside the slide-over drawer for secondary navigation, so routing logic and active-state highlighting remain consistent across both surfaces.