Navigation
The top bar, the phone bar, tabs and getting back.
Bridge OS has three places, always one tap away: Activity, Network and Outcomes. On a computer they're tabs in the top bar; on a phone, a bar at the bottom. Sub-pages offer a plain "Back" link; there are no breadcrumbs.
The problem
Bridge OS has three main areas, a handful of sub-pages under them, and other Bridge apps beside it. Without a rule, each new screen adds its own tab to the top bar, invents a trail of breadcrumbs, or opens a person in a popup that can't be linked to. People then lose track of where they are and how to get back.
What to do
- Three places, always one tap away. Activity, Network and Outcomes are the only main areas. On a computer they're in the top bar; on a phone, in a bar at the bottom. Nothing else joins them: other apps open from the app launcher.
- Go deeper, then come back. A sub-page (Invites, Sharing, an organization) has a "← Back" link at the top. No breadcrumbs. When the way back is a fixed place, the link names it: "Back to Outcomes".
- A person or organization is a page. Choosing one, from search or from a row, goes to its own page (
/to/{username},/contact/{refId},/network/{domain}), so it has an address that can be shared and reopened.
Which one do I use?
| Situation | Do this | Bridge example |
|---|---|---|
| Moving between the main areas | The top-bar tabs (the bottom bar on phones). They're links to pages, not the Tabs component | Activity, Network, Outcomes |
| Switching views of one page or record | Tabs inside the page; the selected tab goes in the address (Deep links) | An organization's People, Connectors and Intros |
| Going one level deeper in an area | A sub-page with a "← Back" link that returns where you came from | Network → Invites (/network/invites) |
| A sub-page reached from a known place | The back link names that place | Your intros, opened from Outcomes: "Back to Outcomes" |
| Opening a person or organization | Go to its page; don't open a popup | Quillbase → /network/quillbase.example |
| Another Bridge app | The app launcher (the grid button), never an extra top-bar tab | All apps → Intros |
| Looking at one row's details without leaving the list | A drawer, not a new page (Panes, rails and sheets) | An intro from the Outcomes intros table |
See it work
Live examples built from the package on the sample network. Click through them.
The three main areas, on a computer and on a phone
Click between Activity, Network and Outcomes. Switch to Phone to see the same three as a bottom bar. The red dot on Network means something new, and clears once you open it.
Activity
You're on Activity.
os.brdg.app/activity
Go deeper, then come back
From Network, open Invites or an organization. The sub-page has a "← Back" link at the top; it returns you to where you were.
A back link that names where it goes
Your intros can be reached from Outcomes or from your profile. The back link says which one it returns to.
os.brdg.app/profile/intros?from=outcomes
What to write
| Part | Rule | Example |
|---|---|---|
| Main areas | The area's name, one word. Only these three. | Activity · Network · Outcomes |
| Back link | "Back" when it returns to wherever you came from. "Back to" and the place when it always goes to one place. | Back to Outcomes |
| Sub-page title | The thing itself, sentence case. A record's page uses its name. | Invites · Quillbase |
| Tabs inside a page | One or two words, short nouns, sentence case. | People · Connectors · Co-investors |
| Menu items that go somewhere | Say where they go. | View profile · Account settings · All apps |
Approved, not built yet
- Each Bridge app keeps the same top-bar layout (logo, its own few tabs, then search, launcher, avatar), so moving between apps feels like one product.
Accessibility
- The top bar is a navigation landmark named "Main navigation"; the phone bar is "Mobile navigation".
- The current area is marked as the current page (
aria-current="page"), not only by its underline or color. - The main areas are links, because they go to other pages. Tabs (with arrow keys) are only for views inside one page.
- The back link is a real control with words ("Back"); its arrow icon is hidden from screen readers.
- Search (⌘K) is reachable from every page, so nobody has to walk the menus to find a person.
| Keys | What happens |
|---|---|
| Tab | Moves through the top bar: logo, Activity, Network, Outcomes, search, app launcher, your avatar. |
| Enter | Follows the focused link or opens the focused menu. |
| ⌘K / Ctrl+K | Opens "Search your network" from any page. |
| Esc | Closes an open menu; focus returns to its button. |
Components this uses
Each opens that component’s own page, with its options and code.
| Component | Its job here |
|---|---|
| Tabs | Views inside one page (an organization's People, Intros…). Not for the main areas. |
| ActionMenu | Where the app launcher and your avatar menu move to: rows that go somewhere use href. |
| IconButton | The app-launcher button and other icon-only controls in the bar; always with an aria-label. |
| Button | secondary for "View profile" and "Account settings" in the avatar menu today. |
| SegmentedControl | Not navigation: it switches modes of one view (12w / 26w). Don't use it to move between pages. |
Where Bridge OS differs today
Follow this page, not the gap.
- The app launcher, user menu and app switcher use a raw Radix dropdown; they move to ActionMenu (Base UI).
- The desktop top-bar links don't mark the current area with
aria-currentyet (the phone bar does). - The phone bar's labels are 10px; they move to 11px, the smallest text size.
- The red "new" dots have no text for screen readers, and use a hex color instead of a token.
Sources
- Bridge OS
top-nav.tsx - Bridge OS
mobile-bottom-nav.tsx - Bridge OS sharing-content, invites-content, org-network-content
- Bridge OS
app-launcher.tsx - Bridge OS
docs/DEEP-LINKS.md - Bridge OS
src/hooks/use-open-org.ts,src/hooks/use-open-profile.ts - Bridge OS sharing-content, invites-content, org-network-content;
app/(shell)/profile/intros/page.tsx - Bridge OS
top-nav.tsx,mobile-bottom-nav.tsx - Bridge OS
user-profile-popup.tsx - Tabs component guidance (handbook); Bridge OS
top-nav.tsx - Proposals approved by Aman 2026-11-02.