Faster Mobile Navigation: Introducing the Bottom Tab Bar

Release: v0.1.101 · Category: Responsive / Mobile UX

The Problem

Agents and landlords frequently use the platform on their phones — at properties, between appointments, on the go. The previous mobile navigation required at least 4 taps for every page transition:

Tap the hamburger icon to open the slide-over drawer
Scroll to the relevant navigation group
Expand the group
Tap the destination item

For a product built around fast, frequent workflows like check-out reports and deposit releases, this was a meaningful barrier to usability.

The Solution

A bottom tab bar (md:hidden) now sits persistently at the bottom of the screen on mobile devices. It provides direct, single-tap access to the 5 most-used areas of the platform.

Core Tabs

Tab	Page
Dashboard	Overview KPIs and urgent actions
Tenancies	Active and historical tenancy records
Check-Out Reports	Start, continue, or review check-out reports
Deposit Releases	Manage deductions and release requests
Compliance	Renters' Rights Act obligations and status

Urgent Badge Counts

Each tab in the bottom bar displays a live badge count for unread or urgent items, pulled directly from the same KPI data that powers the Dashboard. You can see at a glance if a deposit release needs attention or a compliance action is overdue — without opening any menu.

Secondary Navigation

The hamburger menu and slide-over drawer remain available for navigating to secondary pages and less-frequently used sections. Nothing has been removed — the bottom tab bar is an addition that handles the most common paths.

How It Works

The bottom tab bar is rendered only on mobile viewports using the md:hidden Tailwind utility. On tablet and desktop, the existing sidebar navigation is shown as before. The implementation lives in src/components/mobile-nav.tsx.

Impact

Metric	Before	After
Taps to reach a core page	4 minimum	1
Urgent items visible without opening a menu	No	Yes (badge on tab)
Desktop/tablet experience	Unchanged	Unchanged

Summary

Core mobile navigation is now 1 tap instead of 4. The most important workflows — Dashboard, Tenancies, Check-Out Reports, Deposit Releases, and Compliance — are always one touch away, with badge indicators keeping urgent items visible at all times.