Access Settings and Secondary Destinations via Hamburger Menu
The Navigation Shell Widget includes an AppBar with a hamburger menu icon that opens a Flutter Drawer. The Drawer lists secondary navigation destinations including Settings. This pattern keeps the bottom navigation bar focused on the five high-frequency primary destinations while still making secondary destinations consistently discoverable. The Drawer is accessible via keyboard and screen readers, with appropriate semantic labels.
User Story
Acceptance Criteria
- Given the user is on any tab, when they tap the hamburger icon in the AppBar, then the Drawer slides in from the left with secondary navigation options including Settings
- Given the Drawer is open, when the user taps 'Settings', then the Drawer closes and the Settings screen is pushed onto the current tab's navigation stack
- Given the Drawer is open, when the user taps outside the Drawer or swipes it closed, then the Drawer closes and the user remains on the current screen
- Given a screen reader is active, when the user focuses on the hamburger icon, then it is announced as 'Open navigation menu' and the Drawer items are announced with their roles
- Given the Drawer is open, when the user presses the system back button, then the Drawer closes without navigating away from the current tab
Business Value
A hamburger menu for secondary destinations is a well-established mobile UX pattern that keeps the primary navigation clean and focused. Placing Settings in the Drawer rather than as a sixth tab ensures the bottom bar remains uncluttered, reducing cognitive load for users who need only the five core functions day to day. This is especially important given the beginner skill level of many peer mentor users.