Home Screen - Bottom Navigation
Use the Bottom Navigation to switch between primary application destinations.
This screen includes:
- Tab bar - Fixed at the bottom of the screen
- Destination tabs
- Home
- Appointments
- Account
- Chat / Support
- Icons
- Each tab includes an icon
- Labels may appear for the active tab
- Selected state
- Active tab displays a highlighted pill background
- Active tab shows label and icon
- Notification indicator - Displays as a badge (for example, green dot) on a tab when updates exist
- Persistent layout - Remains visible across all top-level screens
note
The Bottom Navigation controls top-level routing and remains visible across all main screens.
Workflow
This flow starts when the user interacts with the bottom navigation.
- Select a destination tab.
- Switch to the corresponding screen.
- Update the selected state.
Validations
| Scenario | App behavior | SDK output |
|---|---|---|
| Destination requires authentication and no session exists | Show sign-in entry flow | auth = required |
| Destination available | Enable navigation | Navigation ready |
| Destination fails to load | Display error state in destination | Error response |
Actions
| Scenario | App behavior | SDK output |
|---|---|---|
| Destination tab selected | Navigate to destination and update active tab | activeRoute = <destination>, activeTab = <destination> |
| Active tab selected | Do not navigate | No route change |
| Tab switch | Reset nested navigation | Nested state cleared |
| Back navigation after tab switch | Navigate within current destination flow | No tab change |