Home Screen - Bottom Navigation
Use the Home Screen Bottom Navigation to switch between primary areas of the app.
This control appears at the bottom of the screen and provides one-tap access to key destinations.
This screen includes
- A bottom tab bar with five destinations.
- A selected state that highlights the active destination.
- A persistent layout that remains visible across the destination screens.
Workflow
The bottom navigation switches the active destination.
- Selecting a tab opens the corresponding destination screen.
- The selected tab remains highlighted while the destination is active.
- Selecting the active tab does not trigger navigation.
- Bottom navigation remains visible across all destination screens.
Navigation state
The bottom navigation manages top-level routing only.
It does not preserve nested navigation state when switching between destinations.
Validations
| Scenario | App behavior |
|---|---|
| A destination loads successfully. | Shows the destination screen and marks the tab as selected. |
| A destination fails to load. | Shows an error state on the destination screen and keeps the tab visible. |
| The user has no authenticated session and selects Account. | Shows the sign-in entry flow when required. |
| The user has no authenticated session and selects Appointments. | Shows the sign-in entry flow when required. |
Actions
| Scenario | App behavior |
|---|---|
| The user selects a destination tab. | Updates the selected state and switches to the destination screen. |
| The user selects the active destination tab. | Keeps the user on the current screen. |
| The user uses back navigation after a tab switch. | Returns to the prior screen in the current destination flow. |
Endpoint Resources
🧰 Endpoint Resources under construction