Role-Aware Bottom Navigation Tabs
The role-aware bottom navigation bar renders a tab set dynamically determined by the user's active role. For coordinators, this includes Home, Contacts, Add (with coordinator-specific action menu), Work (proxy registrations, pause management), and Notifications. Tabs available only to admins or peer mentors are hidden. The tab configuration is driven by the role state manager, and the bottom nav component reads role context at build time. Tab state is preserved across navigation using StatefulShellRoute so coordinators do not lose their position when switching between tabs.
User Story
Audience Summaries
A role-aware bottom navigation bar is a high-visibility UX feature that directly shapes first impressions and daily usability for coordinators and other user roles. All three pilot organizations explicitly requested a clutter-free navigation experience as a top design priority, recognizing that showing irrelevant tabs to coordinators — particularly those who may be less digitally experienced — creates confusion and erodes trust in the application. By dynamically rendering only the tabs appropriate to the active role, the product signals contextual intelligence and reduces cognitive load during routine workflows such as proxy registration, contact management, and notifications. This drives engagement, reduces support inquiries, and strengthens the case for broader organizational rollout.
Tab state preservation across navigation also directly reduces task abandonment, which is a measurable retention and efficiency metric.
This critical story depends on story-role-based-access-control-coordinator-001 and has cross-cutting impact on navigation UX for every role in the application. Delivery requires coordination between the role state manager, the bottom nav component, and StatefulShellRoute configuration in GoRouter. The coordinator-specific tab set — Home, Contacts, Add with action menu, Work, and Notifications — must be fully specified and signed off before implementation begins to avoid mid-sprint scope changes. Acceptance criteria include tab set accuracy per role, dynamic updates on role switch, scroll-position preservation, and accessibility label correctness.
QA must test role switch transitions, deep navigation and back behavior across all coordinator tabs, and screen reader announcement accuracy. Accessibility testing should involve a dedicated pass, as this was identified as a requirement by pilot organizations. Timeline risk is moderate if role switch animation and tab state persistence are underestimated.
The bottom navigation component must read role context from the role state manager at build time and map it to a declarative tab configuration, rendering only the tabs permitted for the current role. The coordinator tab set includes Home, Contacts, Add (with a coordinator-specific floating action menu), Work (covering proxy registrations and pause management), and Notifications. Tab visibility filtering must respond reactively to role switch events, requiring a StreamBuilder or equivalent reactive binding to the role state. StatefulShellRoute in GoRouter must be configured per tab branch to preserve scroll position and list state when coordinators return to a previously visited tab.
The Add tab's action menu requires a separate coordinator-specific widget that conditionally appears. Accessibility requires each tab to carry a correct semantic label for screen reader announcement. Edge cases include role switching mid-navigation, deep-linked entry to a coordinator tab, and graceful handling of a tab being removed after a role switch while its route is active.
Acceptance Criteria
- Given a coordinator is logged in, When the bottom navigation renders, Then exactly the coordinator-permitted tabs are visible and no admin-only tabs appear
- Given a coordinator switches to a peer mentor role using the role switch widget, When the switch completes, Then the bottom navigation updates to show peer mentor tabs
- Given a coordinator is on the Contacts tab and navigates to a contact detail then back, When they return to the tab, Then their scroll position and list state are preserved
- Given a coordinator with accessibility settings enabled, When the bottom nav renders, Then each tab has a correct semantic label announced by screen reader
Business Value
A clutter-free navigation bar reduces cognitive load, which is a top-priority design principle explicitly requested by all three organizations. Showing irrelevant tabs confuses users and undermines trust in the application, particularly for coordinators who may be less digitally experienced.
Components
- Role-Aware Bottom Navigation ui
- Role State Manager service
- Role Switch Widget ui
- Role Resolution Service service