---
title: "Navigate from a narrow-screen menu and dismiss it"
description: "Verify a responsive navigation drawer opens the intended destination and closes so its backdrop does not block the newly loaded page."
canonical_url: "https://vostride.com/agent-library/navigation-routing/mobile-menu-destination.md"
md_url: "https://vostride.com/agent-library/navigation-routing/mobile-menu-destination.md"
content_kind: "recipe"
topic: "navigation-routing"
---

# Navigate from a narrow-screen menu and dismiss it

Verify a responsive navigation drawer opens the intended destination and closes so its backdrop does not block the newly loaded page.

## Risk

A narrow-screen menu can navigate successfully while leaving a full-screen overlay mounted above the destination. Assert a real destination interaction after navigation to expose blocked content.

## Fixtures

- A test web target uses a narrow viewport such as 390 by 844 through documented browser configuration.
- The QA account can access Dashboard and Projects, and the Projects page contains project Mobile route probe.
- The responsive menu is expected to close after selecting a destination and return focus according to the product design.

## Steps

1. Open Dashboard at the narrow viewport and verify the responsive menu control is visible.
2. Open the menu and verify the Projects destination is visible and the current Dashboard state is distinguishable.
3. Select Projects and verify its page heading and Mobile route probe appear.
4. Verify the menu and its blocking backdrop are dismissed, then open Mobile route probe from the destination content.
5. Return to Projects, reopen the menu, and use its close control to verify dismissal works without a navigation side effect.

## Expected results

- The menu destination resolves to the intended Projects content at the configured viewport.
- The drawer no longer obstructs interaction after navigation, demonstrated by opening the fixture project.
- Closing the reopened menu preserves the current destination instead of navigating unexpectedly.

## False-pass traps

- A destination heading visible behind an overlay does not prove the page is usable.
- Changing to a desktop viewport after navigation would avoid the responsive behavior being tested.

## Cleanup

- Delete the mobile routing fixture project and reset any persisted menu preference.

## Use with agent-qa

Adapt this test design to your application's acceptance criteria and configured target using the [recipe execution guide](/agent-library/software-factory/turn-a-recipe-into-an-agent-qa-test.md). External fixture setup and non-UI checks require your own supported hooks or test tooling. Validate the authored test, execute it, and inspect the completed evidence; this recipe is not a recorded test result.

## References

- [agent-qa test](/docs/agent-qa/configuration/test.md)
- [agent-qa first test](/docs/agent-qa/guides/first-test.md)
- [agent-qa web testing](/docs/agent-qa/guides/web-testing.md)

- [Navigation and routing QA recipes](/agent-library/navigation-routing.md)
- [Software factory QA library](/agent-library.md)