All Docs
FeaturesMaking Tax DigitalUpdated February 21, 2026

Mobile Navigation: Fixing the Hidden Sidebar on Small Screens

Mobile Navigation: Fixing the Hidden Sidebar on Small Screens

Version: 1.0.21
Category: UI/UX · Responsive Design
Affected file: src/app/dashboard/layout.tsx

Background

Prior to v1.0.21, the dashboard layout used a single sidebar for all navigation. That sidebar was implemented with the Tailwind CSS utility classes hidden md:flex, which means:

  • On screens 768px and wider (the md breakpoint): the sidebar is visible and functional.
  • On screens below 768px (phones and many tablets): the sidebar is entirely hidden — with no fallback.

There was no hamburger menu, no navigation drawer, no bottom tab bar, and no other mechanism for mobile users to move between pages. This represented a complete navigation blackout for mobile and small-tablet users.

Additionally, the header's search component (SearchTrigger) used hidden sm:inline on its label text, making it appear as a bare icon on small screens with no clear purpose to the user.

What Changed in v1.0.21

Mobile Navigation Drawer

A navigation drawer has been added to address the missing mobile navigation. Key behaviours:

  • Trigger: A hamburger button appears in the header on screens below the md breakpoint (md:hidden).
  • Contents: The drawer contains the same navigation links as the desktop sidebar — no duplication of route logic needed.
  • Dismissal: The drawer closes when the user:
    • Navigates to a new route, or
    • Clicks the backdrop outside the drawer.
  • Animation: The drawer slides in from the left, consistent with the position of the desktop sidebar.

Search Trigger Affordance

The search label visibility on small screens has been addressed so the SearchTrigger is no longer a mystery icon for mobile users.

Why This Matters

The Making Tax Digital dashboard is a task-focused tool. Landlords need to move quickly between key areas — transaction imports, quarterly submissions, HMRC connection status, and their property portfolio. An inaccessible navigation on mobile means:

  • Users on phones cannot submit returns or review transactions without a desktop.
  • It creates a significant accessibility barrier under WCAG 2.1 guidelines.
  • It undermines trust in the product for users who primarily work on mobile devices.

Recommended Further Improvements

The drawer added in this release resolves the critical navigation gap. For future iterations, consider:

PatternBest For
Bottom tab barPhones — surfaces the 5 most important routes for one-handed use
Persistent drawerTablets in landscape — mirrors the desktop sidebar experience
Breadcrumb navDeep nested pages — helps users understand where they are

A bottom tab bar for the top 5 routes (e.g. Dashboard, Transactions, Submissions, Properties, Settings) is the highest-impact next step for mobile usability.

Testing on Mobile

To verify the navigation works correctly on small screens:

  1. Open the dashboard in a browser and activate DevTools → responsive mode.
  2. Set the viewport to below 768px wide (e.g. 375px for iPhone SE).
  3. Confirm the hamburger icon is visible in the header.
  4. Tap the hamburger — the drawer should slide in from the left.
  5. Tap a navigation link — the drawer should close and the correct page should load.
  6. Tap the backdrop (outside the drawer) — the drawer should close without navigating.
  7. Confirm the search icon has a visible label or sufficient affordance.

For questions about this change, refer to the release notes for v1.0.21 or the changelog.