This page defines every navigation pattern in the DomiDo Progressive Web App (PWA): how users move between screens, how the structure adapts to device size, how deep links resolve, and how the back gesture behaves on each platform. The platform is built on React Native plus React Native Web with React Navigation as the routing layer. Navigation is predictable, contextual, shallow, progressively disclosed, and accessible by default — every back gesture, every tab tap, every modal dismissal behaves the way iOS and Android users already expect. When a user leaves a screen (tab switch, incoming notification, app backgrounding) their state is preserved: scroll position, form inputs, 3D viewer camera, partial prompts. No flow exceeds five taps from a tab to its deepest screen unless that flow is restructured as a single-screen wizard. Every interactive element is reachable by keyboard, announced by VoiceOver and TalkBack, and usable at two-hundred-per-cent text zoom.
The customer-facing application uses a five-tab bottom bar as the root navigator.
| Tab | Label | Icon | Badge | Root screen |
|---|---|---|---|---|
| 0 | Home | house outline | none | Home Dashboard |
| 1 | Create | plus-circle | none | Mode Selector |
| 2 | Gallery | grid or compass | none | Gallery Feed |
| 3 | Cart | shopping bag | item count, red circle | Cart |
| 4 | Account | person outline | unread-notification dot | Account Dashboard |
The bar sits at the bottom of the viewport at the iOS-standard forty-nine points and the Android-standard fifty-six device-independent pixels. Its background is the warm-white surface with a one-pixel subtle border on top; iOS adds a slight shadow, Android uses elevation eight. Active tab icons and labels turn brand-primary; inactive tabs use a tertiary text colour that meets the four-and-a-half-to-one contrast ratio. Labels are always visible — there is no icon-only mode — because the older personas need labels. A light haptic impact fires on tab tap on iOS. The safe-area inset on the bottom is respected so the home indicator remains usable.
The tab bar is binary: it is either fully visible and interactive or completely hidden. It is hidden during the AI-mode projection workflow, the AI-mode 3D model preview, the Assembly Viewer in Assembly or Explode modes, the Stripe checkout WebView, and the full-screen 3D viewer on Product Detail. It is visible everywhere else. Tapping an inactive tab switches to its current screen with the stack preserved. Tapping the already-active tab pops the stack to the root and scrolls to the top. Tapping it again at the top does nothing. Long-press is reserved for future accessibility features. The Cart badge appears when the cart has one or more items, showing the count up to ninety-nine and "99+" beyond. The Account dot appears when there is unread order-update activity.
The bar's position adapts with the viewport. On phones it sits at the bottom. On tablets in portrait it stays at the bottom with sixty-four-point touch targets. On tablets in landscape and small desktops it converts to a left side rail seventy-two pixels wide that collapses to forty-eight pixels of icon-only. On wide desktops the side rail is a permanent two-hundred-and-forty-pixel column with both icon and full label.
Each tab owns an independent native stack navigator. Switching tabs preserves every other tab's state. The Home tab pushes Product Detail and the full-screen 3D viewer, capping at depth three. The Create tab carries the deepest stack: Mode Selector, then either Upload, Processing, and Design Review for upload mode, or AI Prompt, Projection Workflow, Provider Selection, 3D Preview, Processing, and Design Review for AI mode — depth seven. The projection workflow manages eight sub-steps in-screen rather than pushing new stack entries, which keeps the stack depth manageable. The Gallery tab pushes Design Detail, Designer Profile, and another Design Detail; the second design-detail push replaces rather than pushes, breaking the potential infinite loop. The Cart tab pushes Checkout Review and Order Confirmation; the Stripe checkout itself is a hosted page opened in an in-app browser, not a stack entry. The Account tab pushes My Orders to Order Detail to Return Request, or My Designs to Design Review, or My Collections to Collection Detail, or Settings to Edit Profile, Subscription Management, or Notification Preferences. Maximum depth here is four.
When a stack screen pops, the back gesture or back button returns to the previous screen. At a tab root no back button is shown. The interactive left-edge swipe on iOS performs an interactive pop. On Android the hardware back button pops; at a tab root it switches to the Home tab; on the Home tab it minimises the app rather than exiting. On the web, the browser back and forward buttons map onto the current tab's stack history. Tapping an already-active tab pops the stack to its root with no intermediate animation. If a user is in the AI-mode projection workflow when the Create tab is re-tapped, the stack pops to the Mode Selector but every approved projection is preserved server-side; the user can return through the "Resume" path on My Designs in the Account tab. The Resume path is a cross-tab navigation: tapping Resume on an "AI In Progress" design switches to the Create tab and pushes the Projection Workflow with the saved design identifier, current projection index, and the approved projection list. The workflow renders at the saved index with the approved thumbnails already populated.
Some interactions use modal overlays rather than stack pushes. The native share sheet, the collection picker bottom sheet on a design, the report-reason bottom sheet on a design or comment, the filter panel bottom sheet on the gallery and the catalogue, the PWA install prompt bottom sheet, the pre-order cancellation confirmation, the typed-confirmation account-deletion dialog, the full-screen return-request form, and the Assembly Viewer's step-number jumper all use modals. Modals trap focus, dismiss on Escape, and close when the user taps outside or selects an explicit Done.
Every shareable screen has a deep link in the form https://domido.com/{path}. The PWA service worker intercepts these and resolves them within the navigation tree. The most-used links are the home root, /create/upload and /create/describe for direct mode entry, /designs/:id and /designs/:id/assembly for design share and assembly access, /build/:code for the QR code on a physical kit, /catalogue and /catalogue/:slug for marketing entries, /gallery, /gallery/search?q=, /gallery/:id, and /designers/:id for community surfaces, and /orders/:id, /orders/:id/track, /orders/:id/return for email links from order notifications.
Transitions use standard native motion. iOS pushes slide in from the right and pop with the interactive swipe. Android pushes use a shared-axis horizontal transition. Tab switches are instantaneous; tab-bar items use a light fade and a filled-icon variant to mark the active tab. Modal bottom sheets slide up from below; dialogs fade in. Full-screen transitions for the Assembly Viewer and the Stripe session crossfade so the change of context is obvious.
The admin dashboard uses a left sidebar drawer that is always visible on desktop and collapses to a hamburger button on mobile. The sidebar lists every admin screen — Overview, Orders, Returns Queue, Pipeline Monitor, Revenue Dashboard, Customer Support, AI Credit Usage, Manufacturing and Inventory, Purchase Order Detail, Pre-orders, System Health, and Content Moderation. A persistent "Back to App" affordance returns the user to the customer surface; the transition fades through an "Admin Mode" banner so the change of context is visible. The admin layer adds keyboard shortcuts: a command-K search opens the global lookup, J and K navigate up and down through tables, and the standard tab order is respected throughout. Tables support sorting, filtering, and accessible alternatives — every chart has a data-table equivalent.
The Gallery search bar offers three input modes. Text search opens a results screen with active filter chips, a faceted sidebar, and sortable columns. Voice search opens a modal with a pulsing microphone, a waveform, and a thirty-second timeout. Image search opens a modal that accepts an uploaded or captured image, supports cropping, and runs visual similarity matching. Saved searches and quick-filter presets keep frequent queries within reach.
Errors keep the user inside the flow rather than navigating away. A pipeline failure stays on the Processing screen with the recovery message; the user can retry, upload a different file, or go home. A WebGL failure on Design Review falls back to a Bill of Materials text summary so the user can still proceed to order. A payment failure returns to the Cart with the items preserved. A network failure shows a context-specific offline screen rather than a generic one. A third-party logistics retry exhaustion fires an admin alert and surfaces a "Fulfilment Error" status on Order Detail with a clear customer message.
Every navigation state survives backgrounding. Tab selection, per-tab stack contents, scroll positions, form inputs, viewer camera angles, partial prompts, projection workflow progress, and cart contents persist locally and synchronise with the server. When the user reopens the application they return exactly to where they left off.