diff --git a/app/components/Breadcrumbs.tsx b/app/components/Breadcrumbs.tsx
new file mode 100644
index 0000000000..13760b55d9
--- /dev/null
+++ b/app/components/Breadcrumbs.tsx
@@ -0,0 +1,47 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import cn from 'classnames'
+import { Link } from 'react-router-dom'
+
+import { PrevArrow12Icon } from '@oxide/design-system/icons/react'
+
+import { useCrumbs } from '~/hooks/use-crumbs'
+import { Slash } from '~/ui/lib/Slash'
+import { intersperse } from '~/util/array'
+
+export function Breadcrumbs() {
+  const crumbs = useCrumbs().filter((c) => !c.titleOnly)
+  const isTopLevel = crumbs.length <= 1
+  return (
+    <nav
+      className="flex items-center gap-0.5 overflow-clip pr-4 text-sans-md"
+      aria-label="Breadcrumbs"
+    >
+      <PrevArrow12Icon
+        className={cn('mx-1.5 flex-shrink-0 text-quinary', isTopLevel && 'opacity-40')}
+      />
+
+      {intersperse(
+        crumbs.map(({ label, path }, i) => (
+          <Link
+            to={path}
+            className={cn(
+              'whitespace-nowrap text-sans-md hover:text-secondary',
+              // make the last breadcrumb brighter, but only if we're below the top level
+              !isTopLevel && i === crumbs.length - 1 ? 'text-secondary' : 'text-tertiary'
+            )}
+            key={`${label}|${path}`}
+          >
+            {label}
+          </Link>
+        )),
+        <Slash />
+      )}
+    </nav>
+  )
+}
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index 0cc380ca40..5061d3d942 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -77,7 +77,7 @@ Sidebar.Nav = ({ children, heading }: SidebarNav) => (
         <Truncate text={heading} maxLength={24} />
       </div>
     )}
-    <nav>
+    <nav aria-label="Sidebar navigation">
       <ul className="space-y-0.5">{children}</ul>
     </nav>
   </div>
diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index a9024161ca..35aa9219c8 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -11,35 +11,33 @@ import React from 'react'
 import { navToLogin, useApiMutation } from '@oxide/api'
 import { DirectionDownIcon, Profile16Icon } from '@oxide/design-system/icons/react'
 
+import { Breadcrumbs } from '~/components/Breadcrumbs'
+import { SiloSystemPicker } from '~/components/TopBarPicker'
 import { useCurrentUser } from '~/layouts/AuthenticatedLayout'
 import { buttonStyle } from '~/ui/lib/Button'
 import * as DropdownMenu from '~/ui/lib/DropdownMenu'
 import { pb } from '~/util/path-builder'
 
-export function TopBar({ children }: { children: React.ReactNode }) {
+export function TopBar({ systemOrSilo }: { systemOrSilo: 'system' | 'silo' }) {
   const logout = useApiMutation('logout', {
     onSuccess: () => navToLogin({ includeCurrent: false }),
   })
   // fetch happens in loader wrapping all authed pages
   const { me } = useCurrentUser()
 
-  // toArray filters out nulls, which is essential because the silo/system
-  // picker is going to come in null when the user isn't supposed to see it
-  const [cornerPicker, ...otherPickers] = React.Children.toArray(children)
-
   // The height of this component is governed by the `PageContainer`
   // It's important that this component returns two distinct elements (wrapped in a fragment).
   // Each element will occupy one of the top column slots provided by `PageContainer`.
   return (
     <>
       <div className="flex items-center border-b border-r px-3 border-secondary">
-        {cornerPicker}
+        <SiloSystemPicker value={systemOrSilo} />
       </div>
       {/* Height is governed by PageContainer grid */}
       {/* shrink-0 is needed to prevent getting squished by body content */}
       <div className="z-topBar border-b bg-default border-secondary">
-        <div className="mx-3 flex h-[60px] shrink-0 items-center justify-between">
-          <div className="flex items-center">{otherPickers}</div>
+        <div className="mx-3 flex h-[--top-bar-height] shrink-0 items-center justify-between">
+          <Breadcrumbs />
           <div className="flex items-center gap-2">
             <DropdownMenu.Root>
               <DropdownMenu.Trigger
diff --git a/app/components/TopBarPicker.tsx b/app/components/TopBarPicker.tsx
index 5ae3432948..9d30429303 100644
--- a/app/components/TopBarPicker.tsx
+++ b/app/components/TopBarPicker.tsx
@@ -8,23 +8,9 @@
 import cn from 'classnames'
 import { Link } from 'react-router-dom'
 
-import { useApiQuery, type Project } from '@oxide/api'
-import {
-  Folder16Icon,
-  SelectArrows6Icon,
-  Success12Icon,
-} from '@oxide/design-system/icons/react'
+import { SelectArrows6Icon, Success12Icon } from '@oxide/design-system/icons/react'
 
-import {
-  useInstanceSelector,
-  useIpPoolSelector,
-  useSiloSelector,
-  useSledParams,
-  useVpcRouterSelector,
-  useVpcSelector,
-} from '~/hooks/use-params'
 import { useCurrentUser } from '~/layouts/AuthenticatedLayout'
-import { PAGE_SIZE } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import * as DropdownMenu from '~/ui/lib/DropdownMenu'
 import { Identicon } from '~/ui/lib/Identicon'
@@ -124,10 +110,10 @@ const TopBarPicker = (props: TopBarPickerProps) => {
                   to={to}
                   className={cn({ 'is-selected': isSelected })}
                 >
-                  <span className="flex w-full items-center gap-2">
-                    {label}
+                  <div className="flex w-full items-center gap-2">
+                    <div className="flex-grow">{label}</div>
                     {isSelected && <Success12Icon className="-mr-3 block" />}
-                  </span>
+                  </div>
                 </DropdownMenu.LinkItem>
               )
             })
@@ -207,162 +193,3 @@ export function SiloSystemPicker({ value }: { value: 'silo' | 'system' }) {
     />
   )
 }
-
-/** Used when drilling down into a silo from the System view. */
-export function SiloPicker() {
-  // picker only shows up when a silo is in scope
-  const { silo: siloName } = useSiloSelector()
-  const { data } = useApiQuery('siloList', { query: { limit: PAGE_SIZE } })
-  const items = (data?.items || []).map((silo) => ({
-    label: silo.name,
-    to: pb.silo({ silo: silo.name }),
-  }))
-
-  return (
-    <TopBarPicker
-      aria-label="Switch silo"
-      category="Silo"
-      icon={<BigIdenticon name={siloName} />}
-      current={siloName}
-      items={items}
-      noItemsText="No silos found"
-    />
-  )
-}
-
-/** Used when drilling down into a pool from the System/Networking view. */
-export function IpPoolPicker() {
-  // picker only shows up when a pool is in scope
-  const { pool: poolName } = useIpPoolSelector()
-  const { data } = useApiQuery('ipPoolList', { query: { limit: PAGE_SIZE } })
-  const items = (data?.items || []).map((pool) => ({
-    label: pool.name,
-    to: pb.ipPool({ pool: pool.name }),
-  }))
-
-  return (
-    <TopBarPicker
-      aria-label="Switch pool"
-      category="IP Pools"
-      current={poolName}
-      items={items}
-      noItemsText="No IP pools found"
-    />
-  )
-}
-
-/** Used when drilling down into a VPC from the Silo view. */
-export function VpcPicker() {
-  // picker only shows up when a VPC is in scope
-  const { project, vpc } = useVpcSelector()
-  const { data } = useApiQuery('vpcList', { query: { project, limit: PAGE_SIZE } })
-  const items = (data?.items || []).map((v) => ({
-    label: v.name,
-    to: pb.vpc({ project, vpc: v.name }),
-  }))
-
-  return (
-    <TopBarPicker
-      aria-label="Switch VPC"
-      category="VPC"
-      current={vpc}
-      items={items}
-      noItemsText="No VPCs found"
-      to={pb.vpc({ project, vpc })}
-    />
-  )
-}
-
-/** Used when drilling down into a VPC Router from the Silo view. */
-export function VpcRouterPicker() {
-  // picker only shows up when a router is in scope
-  const { project, vpc, router } = useVpcRouterSelector()
-  const { data } = useApiQuery('vpcRouterList', {
-    query: { project, vpc, limit: PAGE_SIZE },
-  })
-  const items = (data?.items || []).map((r) => ({
-    label: r.name,
-    to: pb.vpcRouter({ vpc, project, router: r.name }),
-  }))
-
-  return (
-    <TopBarPicker
-      aria-label="Switch router"
-      category="router"
-      current={router}
-      items={items}
-      noItemsText="No routers found"
-    />
-  )
-}
-
-const NoProjectLogo = () => (
-  <div className="flex h-[34px] w-[34px] items-center justify-center rounded text-secondary bg-secondary">
-    <Folder16Icon />
-  </div>
-)
-
-export function ProjectPicker({ project }: { project?: Project }) {
-  const { data: projects } = useApiQuery('projectList', { query: { limit: 200 } })
-  const items = (projects?.items || []).map(({ name }) => ({
-    label: name,
-    to: pb.project({ project: name }),
-  }))
-
-  return (
-    <TopBarPicker
-      aria-label="Switch project"
-      icon={project ? undefined : <NoProjectLogo />}
-      category="Project"
-      current={project?.name}
-      to={project ? pb.project({ project: project.name }) : undefined}
-      items={items}
-      noItemsText="No projects found"
-    />
-  )
-}
-
-export function InstancePicker() {
-  // picker only shows up when an instance is in scope
-  const instanceSelector = useInstanceSelector()
-  const { project, instance } = instanceSelector
-  const { data: instances } = useApiQuery('instanceList', {
-    query: { project, limit: PAGE_SIZE },
-  })
-  const items = (instances?.items || []).map(({ name }) => ({
-    label: name,
-    to: pb.instance({ project, instance: name }),
-  }))
-  return (
-    <TopBarPicker
-      aria-label="Switch instance"
-      category="Instance"
-      current={instance}
-      to={pb.instance({ project, instance })}
-      items={items}
-      noItemsText="No instances found"
-    />
-  )
-}
-
-export function SledPicker() {
-  // picker only shows up when a sled is in scope
-  const { sledId } = useSledParams()
-  const { data: sleds } = useApiQuery('sledList', {
-    query: { limit: PAGE_SIZE },
-  })
-  const items = (sleds?.items || []).map(({ id }) => ({
-    label: id,
-    to: pb.sled({ sledId: id }),
-  }))
-  return (
-    <TopBarPicker
-      aria-label="Switch sled"
-      category="Sled"
-      current={sledId}
-      to={pb.sled({ sledId })}
-      items={items}
-      noItemsText="No sleds found"
-    />
-  )
-}
diff --git a/app/hooks/use-crumbs.ts b/app/hooks/use-crumbs.ts
new file mode 100644
index 0000000000..898d9f094d
--- /dev/null
+++ b/app/hooks/use-crumbs.ts
@@ -0,0 +1,71 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { useMatches, type Params, type UIMatch } from 'react-router-dom'
+
+import { invariant } from '~/util/invariant'
+
+type Crumb = {
+  crumb: MakeStr
+  /**
+   * Side modal forms have their own routes and their own crumbs that we want
+   * in the page title, but it's weird for them to affect the nav breadcrumbs
+   * because the side modal form opens on top of the page with an overlay
+   * covering the background and not interactive. It feels weird for the
+   * breadcrumbs to change in the background when you open a form. So we use
+   * `titleOnly` to mark the form crumbs as not part of the nav breadcrumbs.
+   */
+  titleOnly?: true
+  /**
+   * Some route nodes don't have their own pages, but rather just redirect
+   * immediately to their first child node. In this case, we need the crumb to
+   * link directly to that child, otherwise we get a weird flash due to linking
+   * to the parent node and waiting for the redirect.
+   */
+  path?: MakeStr
+}
+
+type MatchWithCrumb = UIMatch<unknown, Crumb>
+
+type MakeStr = string | ((p: Params) => string)
+
+/** Helper to make crumb definitions less verbose */
+export const makeCrumb = (crumb: MakeStr, path?: MakeStr) => ({ crumb, path })
+
+function hasCrumb(m: UIMatch): m is MatchWithCrumb {
+  return !!(m.handle && typeof m.handle === 'object' && 'crumb' in m.handle)
+}
+
+/**
+ * Throw if crumb is not a string or function. It would be nice if TS enforced
+ * this at the `<Route>` call, but overriding the type declarations is hard and
+ * `createRoutesFromChildren` rejects a custom Route component.
+ */
+function checkCrumbType(m: MatchWithCrumb): MatchWithCrumb {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const crumbType = typeof m.handle.crumb
+  invariant(
+    crumbType === 'string' || crumbType === 'function',
+    `Route crumb must be a string or function if present. Check <Route> for ${m.pathname}.`
+  )
+  return m
+}
+
+export const matchesToCrumbs = (matches: UIMatch[]) =>
+  matches
+    .filter(hasCrumb)
+    .map(checkCrumbType)
+    .map((m) => {
+      const { crumb, path } = m.handle
+      return {
+        label: typeof crumb === 'function' ? crumb(m.params) : crumb,
+        path: typeof path === 'function' ? path(m.params) : path || m.pathname,
+        titleOnly: !!m.handle.titleOnly,
+      }
+    })
+
+export const useCrumbs = () => matchesToCrumbs(useMatches())
diff --git a/app/hooks/use-title.ts b/app/hooks/use-title.ts
deleted file mode 100644
index f627f2306a..0000000000
--- a/app/hooks/use-title.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, you can obtain one at https://mozilla.org/MPL/2.0/.
- *
- * Copyright Oxide Computer Company
- */
-import { useMatches } from 'react-router-dom'
-import type { Spread } from 'type-fest'
-
-import { invariant } from '~/util/invariant'
-
-type UseMatchesMatch = ReturnType<typeof useMatches>[number]
-
-// Merge has a bug where it makes `data` optional for no reason
-type MatchWithCrumb = Spread<UseMatchesMatch, { handle: { crumb: string | CrumbFunc } }>
-
-export type CrumbFunc = (m: MatchWithCrumb) => string
-
-function hasCrumb(m: UseMatchesMatch): m is MatchWithCrumb {
-  return !!(m.handle && typeof m.handle === 'object' && 'crumb' in m.handle)
-}
-
-/**
- * Throw if crumb is not a string or function. It would be nice if TS enforced
- * this at the `<Route>` call, but overriding the type declarations is hard and
- * `createRoutesFromChildren` rejects a custom Route component.
- */
-function checkCrumbType(m: MatchWithCrumb): MatchWithCrumb {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const crumbType = typeof (m.handle as any).crumb
-  invariant(
-    crumbType === 'string' || crumbType === 'function',
-    `Route crumb must be a string or function if present. Check <Route> for ${m.pathname}.`
-  )
-  return m
-}
-
-/**
- * non top-level route: Instances / mock-project / Projects / maze-war / Oxide Console
- * top-level route: Oxide Console
- */
-export const useTitle = () =>
-  useMatches()
-    .filter(hasCrumb)
-    .map(checkCrumbType)
-    .map((m) => (typeof m.handle.crumb === 'function' ? m.handle.crumb(m) : m.handle.crumb))
-    .reverse()
-    .concat('Oxide Console') // if there are no crumbs, we're still Oxide Console
-    .join(' / ')
diff --git a/app/layouts/ProjectLayout.tsx b/app/layouts/ProjectLayout.tsx
index 5c186c213a..3ba21d9518 100644
--- a/app/layouts/ProjectLayout.tsx
+++ b/app/layouts/ProjectLayout.tsx
@@ -6,12 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useMemo, type ReactElement } from 'react'
-import {
-  useLocation,
-  useNavigate,
-  useParams,
-  type LoaderFunctionArgs,
-} from 'react-router-dom'
+import { useLocation, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 
 import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
 import {
@@ -26,13 +21,6 @@ import {
 } from '@oxide/design-system/icons/react'
 
 import { TopBar } from '~/components/TopBar'
-import {
-  InstancePicker,
-  ProjectPicker,
-  SiloSystemPicker,
-  VpcPicker,
-  VpcRouterPicker,
-} from '~/components/TopBarPicker'
 import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
 import { useQuickActions } from '~/hooks/use-quick-actions'
 import { Divider } from '~/ui/lib/Divider'
@@ -61,7 +49,6 @@ export function ProjectLayout({ overrideContentPane }: ProjectLayoutProps) {
   const projectSelector = useProjectSelector()
   const { data: project } = usePrefetchedApiQuery('projectView', { path: projectSelector })
 
-  const { instance, router, vpc } = useParams()
   const { pathname } = useLocation()
   useQuickActions(
     useMemo(
@@ -88,13 +75,7 @@ export function ProjectLayout({ overrideContentPane }: ProjectLayoutProps) {
 
   return (
     <PageContainer>
-      <TopBar>
-        <SiloSystemPicker value="silo" />
-        <ProjectPicker project={project} />
-        {instance && <InstancePicker />}
-        {vpc && <VpcPicker />}
-        {router && <VpcRouterPicker />}
-      </TopBar>
+      <TopBar systemOrSilo="silo" />
       <Sidebar>
         <Sidebar.Nav>
           <NavLinkItem to={pb.projects()} end>
diff --git a/app/layouts/RootLayout.tsx b/app/layouts/RootLayout.tsx
index 6cf6d455fa..a7029149b6 100644
--- a/app/layouts/RootLayout.tsx
+++ b/app/layouts/RootLayout.tsx
@@ -10,7 +10,18 @@ import { Outlet, useNavigation } from 'react-router-dom'
 
 import { MswBanner } from '~/components/MswBanner'
 import { ToastStack } from '~/components/ToastStack'
-import { useTitle } from '~/hooks/use-title'
+import { useCrumbs } from '~/hooks/use-crumbs'
+
+/**
+ * non top-level route: Instances / mock-project / Projects / maze-war / Oxide Console
+ * top-level route: Oxide Console
+ */
+export const useTitle = () =>
+  useCrumbs()
+    .map((c) => c.label)
+    .reverse()
+    .concat('Oxide Console') // if there are no crumbs, we're still Oxide Console
+    .join(' / ')
 
 /**
  * Root layout that applies to the entire app. Modify sparingly. It's rare for
diff --git a/app/layouts/SettingsLayout.tsx b/app/layouts/SettingsLayout.tsx
index 1fea93b502..9b860c9bcb 100644
--- a/app/layouts/SettingsLayout.tsx
+++ b/app/layouts/SettingsLayout.tsx
@@ -11,7 +11,6 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import { Folder16Icon, Key16Icon, Profile16Icon } from '@oxide/design-system/icons/react'
 
 import { TopBar } from '~/components/TopBar'
-import { SiloSystemPicker } from '~/components/TopBarPicker'
 import { useQuickActions } from '~/hooks/use-quick-actions'
 import { Divider } from '~/ui/lib/Divider'
 import { pb } from '~/util/path-builder'
@@ -43,9 +42,7 @@ export function SettingsLayout() {
 
   return (
     <PageContainer>
-      <TopBar>
-        <SiloSystemPicker value="silo" />
-      </TopBar>
+      <TopBar systemOrSilo="silo" />
       <Sidebar>
         <Sidebar.Nav>
           <NavLinkItem to={pb.projects()}>
diff --git a/app/layouts/SiloLayout.tsx b/app/layouts/SiloLayout.tsx
index bb8e946c16..9f9f3b550d 100644
--- a/app/layouts/SiloLayout.tsx
+++ b/app/layouts/SiloLayout.tsx
@@ -17,7 +17,6 @@ import {
 
 import { DocsLinkItem, NavLinkItem, Sidebar } from '~/components/Sidebar'
 import { TopBar } from '~/components/TopBar'
-import { ProjectPicker, SiloSystemPicker } from '~/components/TopBarPicker'
 import { useQuickActions } from '~/hooks/use-quick-actions'
 import { Divider } from '~/ui/lib/Divider'
 import { pb } from '~/util/path-builder'
@@ -52,10 +51,7 @@ export function SiloLayout() {
 
   return (
     <PageContainer>
-      <TopBar>
-        <SiloSystemPicker value="silo" />
-        <ProjectPicker />
-      </TopBar>
+      <TopBar systemOrSilo="silo" />
       <Sidebar>
         <Sidebar.Nav>
           <DocsLinkItem />
diff --git a/app/layouts/SystemLayout.tsx b/app/layouts/SystemLayout.tsx
index 22aeda4281..9d5ad97ffa 100644
--- a/app/layouts/SystemLayout.tsx
+++ b/app/layouts/SystemLayout.tsx
@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 import { useMemo } from 'react'
-import { useLocation, useNavigate, useParams } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import { apiQueryClient } from '@oxide/api'
 import {
@@ -19,12 +19,6 @@ import {
 import { trigger404 } from '~/components/ErrorBoundary'
 import { DocsLinkItem, NavLinkItem, Sidebar } from '~/components/Sidebar'
 import { TopBar } from '~/components/TopBar'
-import {
-  IpPoolPicker,
-  SiloPicker,
-  SiloSystemPicker,
-  SledPicker,
-} from '~/components/TopBarPicker'
 import { useQuickActions } from '~/hooks/use-quick-actions'
 import { Divider } from '~/ui/lib/Divider'
 import { pb } from '~/util/path-builder'
@@ -60,7 +54,6 @@ export function SystemLayout() {
   // robust way of doing this would be to make a separate layout for the
   // silo-specific routes in the route config, but it's overkill considering
   // this is a one-liner. Switch to that approach at the first sign of trouble.
-  const { silo, pool, sledId } = useParams()
   const navigate = useNavigate()
   const { pathname } = useLocation()
 
@@ -70,7 +63,7 @@ export function SystemLayout() {
     const systemLinks = [
       { value: 'Silos', path: pb.silos() },
       { value: 'Utilization', path: pb.systemUtilization() },
-      { value: 'Inventory', path: pb.inventory() },
+      { value: 'Inventory', path: pb.sledInventory() },
       { value: 'IP Pools', path: pb.ipPools() },
     ]
       // filter out the entry for the path we're currently on
@@ -93,12 +86,7 @@ export function SystemLayout() {
 
   return (
     <PageContainer>
-      <TopBar>
-        <SiloSystemPicker value="system" />
-        {silo && <SiloPicker />}
-        {pool && <IpPoolPicker />}
-        {sledId && <SledPicker />}
-      </TopBar>
+      <TopBar systemOrSilo="system" />
       <Sidebar>
         <Sidebar.Nav>
           <DocsLinkItem />
@@ -114,7 +102,7 @@ export function SystemLayout() {
           <NavLinkItem to={pb.systemUtilization()}>
             <Metrics16Icon /> Utilization
           </NavLinkItem>
-          <NavLinkItem to={pb.inventory()}>
+          <NavLinkItem to={pb.sledInventory()}>
             <Servers16Icon /> Inventory
           </NavLinkItem>
           <NavLinkItem to={pb.ipPools()}>
diff --git a/app/layouts/helpers.tsx b/app/layouts/helpers.tsx
index 64a00c9cb0..1aef3d1865 100644
--- a/app/layouts/helpers.tsx
+++ b/app/layouts/helpers.tsx
@@ -14,7 +14,7 @@ import { useScrollRestoration } from '~/hooks/use-scroll-restoration'
 import { SkipLinkTarget } from '~/ui/lib/SkipLink'
 import { classed } from '~/util/classed'
 
-export const PageContainer = classed.div`grid h-screen grid-cols-[14.25rem,1fr] grid-rows-[60px,1fr]`
+export const PageContainer = classed.div`grid h-screen grid-cols-[14.25rem,1fr] grid-rows-[--top-bar-height,1fr]`
 
 export function ContentPane() {
   const ref = useRef<HTMLDivElement>(null)
diff --git a/app/pages/project/instances/instance/SerialConsolePage.tsx b/app/pages/project/instances/instance/SerialConsolePage.tsx
index a6f3bdacfe..a09c84577a 100644
--- a/app/pages/project/instances/instance/SerialConsolePage.tsx
+++ b/app/pages/project/instances/instance/SerialConsolePage.tsx
@@ -135,7 +135,7 @@ export function SerialConsolePage() {
   }, [canConnect])
 
   return (
-    <div className="!mx-0 flex h-full max-h-[calc(100vh-60px)] !w-full flex-col">
+    <div className="!mx-0 flex h-full max-h-[calc(100vh-var(--top-bar-height))] !w-full flex-col">
       <Link
         to={pb.instance(instanceSelector)}
         className="mx-3 mb-6 mt-3 flex h-10 shrink-0 items-center rounded px-3 bg-accent-secondary"
@@ -145,7 +145,6 @@ export function SerialConsolePage() {
           <span className="text-accent-tertiary">Back to</span> instance
         </div>
       </Link>
-
       <div className="gutter relative w-full shrink grow overflow-hidden">
         {connectionStatus === 'connecting' && <ConnectingSkeleton />}
         {connectionStatus === 'error' && <ErrorSkeleton />}
diff --git a/app/routes.tsx b/app/routes.tsx
index 86b159f5fa..10e8d1b7da 100644
--- a/app/routes.tsx
+++ b/app/routes.tsx
@@ -39,7 +39,8 @@ import { CreateRouterSideModalForm } from './forms/vpc-router-create'
 import { EditRouterSideModalForm } from './forms/vpc-router-edit'
 import { CreateRouterRouteSideModalForm } from './forms/vpc-router-route-create'
 import { EditRouterRouteSideModalForm } from './forms/vpc-router-route-edit'
-import type { CrumbFunc } from './hooks/use-title'
+import { makeCrumb } from './hooks/use-crumbs'
+import { getInstanceSelector, getProjectSelector, getVpcSelector } from './hooks/use-params'
 import { AuthenticatedLayout } from './layouts/AuthenticatedLayout'
 import { AuthLayout } from './layouts/AuthLayout'
 import { SerialConsoleContentPane } from './layouts/helpers'
@@ -90,12 +91,6 @@ import { SilosPage } from './pages/system/silos/SilosPage'
 import { SystemUtilizationPage } from './pages/system/UtilizationPage'
 import { pb } from './util/path-builder'
 
-const projectCrumb: CrumbFunc = (m) => m.params.project!
-const instanceCrumb: CrumbFunc = (m) => m.params.instance!
-const vpcCrumb: CrumbFunc = (m) => m.params.vpc!
-const siloCrumb: CrumbFunc = (m) => m.params.silo!
-const poolCrumb: CrumbFunc = (m) => m.params.pool!
-
 export const routes = createRoutesFromElements(
   <Route element={<RootLayout />}>
     <Route path="*" element={<NotFound />} />
@@ -117,14 +112,23 @@ export const routes = createRoutesFromElements(
       // very important. see `currentUserLoader` and `useCurrentUser`
       shouldRevalidate={() => true}
     >
-      <Route path="settings" handle={{ crumb: 'settings' }} element={<SettingsLayout />}>
+      <Route
+        path="settings"
+        handle={makeCrumb('Settings', pb.profile())}
+        element={<SettingsLayout />}
+      >
+        <Route index element={<Navigate to="profile" replace />} />
         <Route path="profile" element={<ProfilePage />} handle={{ crumb: 'Profile' }} />
-        <Route element={<SSHKeysPage />} loader={SSHKeysPage.loader}>
-          <Route path="ssh-keys" handle={{ crumb: 'SSH Keys' }} element={null} />
+        <Route
+          element={<SSHKeysPage />}
+          loader={SSHKeysPage.loader}
+          handle={makeCrumb('SSH Keys', pb.sshKeys)}
+        >
+          <Route path="ssh-keys" element={null} />
           <Route
             path="ssh-keys-new"
             element={<CreateSSHKeySideModalForm />}
-            handle={{ crumb: 'New SSH key' }}
+            handle={{ crumb: 'New SSH key', titleOnly: true }}
           />
         </Route>
       </Route>
@@ -133,7 +137,7 @@ export const routes = createRoutesFromElements(
         <Route
           element={<SilosPage />}
           loader={SilosPage.loader}
-          handle={{ crumb: 'Silos' }}
+          handle={makeCrumb('Silos', pb.silos())}
         >
           <Route path="silos" element={null} />
           <Route path="silos-new" element={<CreateSiloSideModalForm />} />
@@ -143,13 +147,14 @@ export const routes = createRoutesFromElements(
             path=":silo"
             element={<SiloPage />}
             loader={SiloPage.loader}
-            handle={{ crumb: siloCrumb }}
+            handle={makeCrumb((p) => p.silo!)}
           >
             <Route path="idps-new" element={<CreateIdpSideModalForm />} />
             <Route
               path="idps/saml/:provider"
               element={<EditIdpSideModalForm />}
               loader={EditIdpSideModalForm.loader}
+              handle={{ crumb: 'Edit Identity Provider', titleOnly: true }}
             />
           </Route>
         </Route>
@@ -164,48 +169,61 @@ export const routes = createRoutesFromElements(
           path="inventory"
           element={<InventoryPage />}
           loader={InventoryPage.loader}
-          handle={{ crumb: 'Inventory' }}
+          handle={makeCrumb('Inventory', pb.sledInventory())}
         >
           <Route index element={<Navigate to="sleds" replace />} loader={SledsTab.loader} />
-          <Route path="sleds" element={<SledsTab />} loader={SledsTab.loader} />
-          <Route path="disks" element={<DisksTab />} loader={DisksTab.loader} />
-        </Route>
-        <Route
-          path="inventory/sleds/:sledId"
-          element={<SledPage />}
-          loader={SledPage.loader}
-          handle={{ crumb: 'Sleds' }}
-        >
           <Route
-            index
-            element={<Navigate to="instances" replace />}
-            loader={SledInstancesTab.loader}
+            path="sleds"
+            element={<SledsTab />}
+            handle={{ crumb: 'Sleds' }}
+            loader={SledsTab.loader}
           />
           <Route
-            path="instances"
-            element={<SledInstancesTab />}
-            loader={SledInstancesTab.loader}
+            path="disks"
+            element={<DisksTab />}
+            handle={{ crumb: 'Disks' }}
+            loader={DisksTab.loader}
           />
         </Route>
-        <Route path="health" element={null} handle={{ crumb: 'Health' }} />
-        <Route path="update" element={null} handle={{ crumb: 'Update' }} />
+        <Route path="inventory" handle={{ crumb: 'Inventory' }}>
+          <Route path="sleds" handle={{ crumb: 'Sleds' }}>
+            <Route
+              path=":sledId"
+              element={<SledPage />}
+              loader={SledPage.loader}
+              // a crumb for the sled ID looks ridiculous, unfortunately
+            >
+              <Route
+                index
+                element={<Navigate to="instances" replace />}
+                loader={SledInstancesTab.loader}
+              />
+              <Route
+                path="instances"
+                handle={{ crumb: 'Instances' }}
+                element={<SledInstancesTab />}
+                loader={SledInstancesTab.loader}
+              />
+            </Route>
+          </Route>
+        </Route>
         <Route path="networking">
           <Route index element={<Navigate to="ip-pools" replace />} />
           <Route
             element={<IpPoolsPage />}
             loader={IpPoolsPage.loader}
-            handle={{ crumb: 'IP pools' }}
+            handle={{ crumb: 'IP Pools' }}
           >
             <Route path="ip-pools" element={null} />
             <Route path="ip-pools-new" element={<CreateIpPoolSideModalForm />} />
           </Route>
         </Route>
-        <Route path="networking/ip-pools" handle={{ crumb: 'IP pools' }}>
+        <Route path="networking/ip-pools" handle={{ crumb: 'IP Pools' }}>
           <Route
             path=":pool"
             element={<IpPoolPage />}
             loader={IpPoolPage.loader}
-            handle={{ crumb: poolCrumb }}
+            handle={makeCrumb((p) => p.pool!)}
           >
             <Route
               path="edit"
@@ -213,16 +231,17 @@ export const routes = createRoutesFromElements(
               loader={EditIpPoolSideModalForm.loader}
               handle={{ crumb: 'Edit IP pool' }}
             />
-            <Route path="ranges-add" element={<IpPoolAddRangeSideModalForm />} />
+            <Route
+              path="ranges-add"
+              element={<IpPoolAddRangeSideModalForm />}
+              handle={{ crumb: 'Add Range', titleOnly: true }}
+            />
           </Route>
         </Route>
       </Route>
 
       <Route index element={<Navigate to={pb.projects()} replace />} />
 
-      {/* These are done here instead of nested so we don't flash a layout on 404s */}
-      <Route path="projects/:project" element={<Navigate to="instances" replace />} />
-
       <Route element={<SiloLayout />}>
         <Route
           path="images"
@@ -234,7 +253,7 @@ export const routes = createRoutesFromElements(
             path=":image/edit"
             element={<EditSiloImageSideModalForm />}
             loader={EditSiloImageSideModalForm.loader}
-            handle={{ crumb: 'Edit Image' }}
+            handle={{ crumb: 'Edit Image', titleOnly: true }}
           />
         </Route>
         <Route
@@ -252,20 +271,26 @@ export const routes = createRoutesFromElements(
         />
         <Route path="lookup/i/:instance" element={null} loader={instanceLookupLoader} />
 
-        <Route loader={ProjectsPage.loader} element={<ProjectsPage />}>
-          <Route path="projects" handle={{ crumb: 'Projects' }} element={null} />
+        {/* these are here instead of under projects because they need to use SiloLayout */}
+        <Route
+          handle={makeCrumb('Projects', pb.projects())}
+          loader={ProjectsPage.loader}
+          element={<ProjectsPage />}
+        >
+          <Route path="projects" element={null} />
           <Route
             path="projects-new"
             element={<CreateProjectSideModalForm />}
-            handle={{ crumb: 'New project' }}
+            handle={{ crumb: 'New project', titleOnly: true }}
           />
           <Route
             path="projects/:project/edit"
             element={<EditProjectSideModalForm />}
             loader={EditProjectSideModalForm.loader}
-            handle={{ crumb: 'Edit project' }}
+            handle={{ crumb: 'Edit project', titleOnly: true }}
           />
         </Route>
+
         <Route
           path="access"
           element={<SiloAccessPage />}
@@ -276,228 +301,290 @@ export const routes = createRoutesFromElements(
 
       {/* PROJECT */}
 
-      {/* Serial console page gets its own little section here because it
-            cannot use the normal <ContentPane>.*/}
-      <Route
-        path="projects/:project"
-        element={<ProjectLayout overrideContentPane={<SerialConsoleContentPane />} />}
-        loader={ProjectLayout.loader}
-        handle={{ crumb: projectCrumb }}
-      >
-        <Route path="instances" handle={{ crumb: 'Instances' }}>
-          <Route path=":instance" handle={{ crumb: instanceCrumb }}>
-            <Route
-              path="serial-console"
-              loader={SerialConsolePage.loader}
-              element={<SerialConsolePage />}
-              handle={{ crumb: 'Serial Console' }}
-            />
-          </Route>
-        </Route>
-      </Route>
-
-      <Route
-        path="projects/:project"
-        element={<ProjectLayout />}
-        loader={ProjectLayout.loader}
-        handle={{ crumb: projectCrumb }}
-      >
+      <Route path="projects" handle={{ crumb: 'Projects' }}>
+        {/* Serial console page gets its own little section here because it
+              cannot use the normal <ContentPane>.*/}
         <Route
-          path="instances-new"
-          element={<CreateInstanceForm />}
-          loader={CreateInstanceForm.loader}
-          handle={{ crumb: 'New instance' }}
-        />
-        <Route path="instances" handle={{ crumb: 'Instances' }}>
-          <Route index element={<InstancesPage />} loader={InstancesPage.loader} />
-          <Route path=":instance" handle={{ crumb: instanceCrumb }}>
-            <Route index element={<Navigate to="storage" replace />} />
-            <Route element={<InstancePage />} loader={InstancePage.loader}>
-              <Route
-                path="storage"
-                element={<StorageTab />}
-                loader={StorageTab.loader}
-                handle={{ crumb: 'Storage' }}
-              />
-              <Route
-                path="networking"
-                element={<NetworkingTab />}
-                loader={NetworkingTab.loader}
-                handle={{ crumb: 'Networking' }}
-              />
-              <Route
-                path="metrics"
-                element={<MetricsTab />}
-                loader={MetricsTab.loader}
-                handle={{ crumb: 'metrics' }}
-              />
+          path=":project"
+          element={<ProjectLayout overrideContentPane={<SerialConsoleContentPane />} />}
+          loader={ProjectLayout.loader}
+          handle={makeCrumb(
+            (p) => p.project!,
+            (p) => pb.project(getProjectSelector(p))
+          )}
+        >
+          <Route path="instances" handle={{ crumb: 'Instances' }}>
+            <Route path=":instance" handle={makeCrumb((p) => p.instance!)}>
               <Route
-                path="connect"
-                element={<ConnectTab />}
-                loader={ConnectTab.loader}
-                handle={{ crumb: 'Connect' }}
+                path="serial-console"
+                loader={SerialConsolePage.loader}
+                element={<SerialConsolePage />}
+                handle={{ crumb: 'Serial Console' }}
               />
             </Route>
           </Route>
         </Route>
 
-        <Route loader={VpcsPage.loader} element={<VpcsPage />}>
-          <Route path="vpcs" handle={{ crumb: 'VPCs' }} element={null} />
+        <Route
+          path=":project"
+          element={<ProjectLayout />}
+          loader={ProjectLayout.loader}
+          handle={makeCrumb(
+            (p) => p.project!,
+            (p) => pb.project(getProjectSelector(p))
+          )}
+        >
+          <Route index element={<Navigate to="instances" replace />} />
           <Route
-            path="vpcs-new"
-            element={<CreateVpcSideModalForm />}
-            handle={{ crumb: 'New VPC' }}
+            path="instances-new"
+            element={<CreateInstanceForm />}
+            loader={CreateInstanceForm.loader}
+            handle={{ crumb: 'New instance' }}
           />
-        </Route>
-
-        <Route path="vpcs" handle={{ crumb: 'VPCs' }}>
-          <Route path=":vpc" handle={{ crumb: vpcCrumb }}>
-            <Route element={<VpcPage />} loader={VpcPage.loader}>
-              <Route
-                index
-                element={<Navigate to="firewall-rules" replace />}
-                loader={VpcFirewallRulesTab.loader}
-              />
-              <Route element={<VpcFirewallRulesTab />} loader={VpcFirewallRulesTab.loader}>
+          <Route path="instances" handle={{ crumb: 'Instances' }}>
+            <Route index element={<InstancesPage />} loader={InstancesPage.loader} />
+            <Route
+              path=":instance"
+              handle={makeCrumb(
+                (p) => p.instance!,
+                (p) => pb.instance(getInstanceSelector(p))
+              )}
+            >
+              <Route index element={<Navigate to="storage" replace />} />
+              <Route element={<InstancePage />} loader={InstancePage.loader}>
                 <Route
-                  path="edit"
-                  element={<EditVpcSideModalForm />}
-                  loader={EditVpcSideModalForm.loader}
-                  handle={{ crumb: 'Edit VPC' }}
+                  path="storage"
+                  element={<StorageTab />}
+                  loader={StorageTab.loader}
+                  handle={{ crumb: 'Storage' }}
                 />
                 <Route
-                  path="firewall-rules"
-                  handle={{ crumb: 'Firewall Rules' }}
-                  element={null}
+                  path="networking"
+                  element={<NetworkingTab />}
+                  loader={NetworkingTab.loader}
+                  handle={{ crumb: 'Networking' }}
                 />
                 <Route
-                  path="firewall-rules-new/:rule?"
-                  element={<CreateFirewallRuleForm />}
-                  loader={CreateFirewallRuleForm.loader}
-                  handle={{ crumb: 'New Firewall Rule' }}
+                  path="metrics"
+                  element={<MetricsTab />}
+                  loader={MetricsTab.loader}
+                  handle={{ crumb: 'Metrics' }}
                 />
                 <Route
-                  path="firewall-rules/:rule/edit"
-                  element={<EditFirewallRuleForm />}
-                  loader={EditFirewallRuleForm.loader}
-                  handle={{ crumb: 'Edit Firewall Rule' }}
+                  path="connect"
+                  element={<ConnectTab />}
+                  loader={ConnectTab.loader}
+                  handle={{ crumb: 'Connect' }}
                 />
               </Route>
-              <Route element={<VpcSubnetsTab />} loader={VpcSubnetsTab.loader}>
-                <Route path="subnets" handle={{ crumb: 'Subnets' }} />
+            </Route>
+          </Route>
+
+          <Route
+            loader={VpcsPage.loader}
+            handle={makeCrumb('VPCs', (p) => pb.vpcs(getProjectSelector(p)))}
+            element={<VpcsPage />}
+          >
+            <Route path="vpcs" element={null} />
+            <Route
+              path="vpcs-new"
+              element={<CreateVpcSideModalForm />}
+              handle={{ crumb: 'New VPC', titleOnly: true }}
+            />
+          </Route>
+
+          <Route path="vpcs" handle={{ crumb: 'VPCs' }}>
+            <Route
+              path=":vpc"
+              handle={makeCrumb(
+                (p) => p.vpc!,
+                (p) => pb.vpc(getVpcSelector(p))
+              )}
+            >
+              <Route element={<VpcPage />} loader={VpcPage.loader}>
                 <Route
-                  path="subnets-new"
-                  element={<CreateSubnetForm />}
-                  handle={{ crumb: 'New Subnet' }}
+                  index
+                  element={<Navigate to="firewall-rules" replace />}
+                  loader={VpcFirewallRulesTab.loader}
                 />
                 <Route
-                  path="subnets/:subnet/edit"
-                  element={<EditSubnetForm />}
-                  loader={EditSubnetForm.loader}
-                  handle={{ crumb: 'Edit Subnet' }}
-                />
-              </Route>
-              <Route element={<VpcRoutersTab />} loader={VpcRoutersTab.loader}>
-                <Route path="routers" handle={{ crumb: 'Routers' }} element={null}>
+                  element={<VpcFirewallRulesTab />}
+                  loader={VpcFirewallRulesTab.loader}
+                >
+                  <Route
+                    path="edit"
+                    element={<EditVpcSideModalForm />}
+                    loader={EditVpcSideModalForm.loader}
+                    handle={{ crumb: 'Edit VPC' }}
+                  />
                   <Route
-                    path=":router/edit"
-                    element={<EditRouterSideModalForm />}
-                    loader={EditRouterSideModalForm.loader}
-                    handle={{ crumb: 'Edit Router' }}
+                    path="firewall-rules"
+                    handle={{ crumb: 'Firewall Rules' }}
+                    element={null}
                   />
+                  <Route handle={{ crumb: 'Firewall Rules' }} element={null}>
+                    <Route
+                      path="firewall-rules-new/:rule?"
+                      element={<CreateFirewallRuleForm />}
+                      loader={CreateFirewallRuleForm.loader}
+                      handle={{ crumb: 'New Rule', titleOnly: true }}
+                    />
+                    <Route
+                      path="firewall-rules/:rule/edit"
+                      element={<EditFirewallRuleForm />}
+                      loader={EditFirewallRuleForm.loader}
+                      handle={{ crumb: 'Edit Rule', titleOnly: true }}
+                    />
+                  </Route>
                 </Route>
                 <Route
-                  path="routers-new"
-                  element={<CreateRouterSideModalForm />}
-                  handle={{ crumb: 'New Router' }}
-                />
+                  element={<VpcSubnetsTab />}
+                  loader={VpcSubnetsTab.loader}
+                  handle={{ crumb: 'Subnets' }}
+                >
+                  <Route path="subnets" element={null} />
+                  <Route
+                    path="subnets-new"
+                    element={<CreateSubnetForm />}
+                    handle={{ crumb: 'New Subnet', titleOnly: true }}
+                  />
+                  <Route
+                    path="subnets/:subnet/edit"
+                    element={<EditSubnetForm />}
+                    loader={EditSubnetForm.loader}
+                    handle={{ crumb: 'Edit Subnet', titleOnly: true }}
+                  />
+                </Route>
+                <Route
+                  element={<VpcRoutersTab />}
+                  handle={{ crumb: 'Routers' }}
+                  loader={VpcRoutersTab.loader}
+                >
+                  <Route path="routers" element={null}>
+                    <Route
+                      path=":router/edit"
+                      element={<EditRouterSideModalForm />}
+                      loader={EditRouterSideModalForm.loader}
+                      handle={{ crumb: 'Edit Router', titleOnly: true }}
+                    />
+                  </Route>
+                  <Route
+                    path="routers-new"
+                    element={<CreateRouterSideModalForm />}
+                    handle={{ crumb: 'New Router', titleOnly: true }}
+                  />
+                </Route>
+              </Route>
+            </Route>
+          </Route>
+          <Route path="vpcs" handle={{ crumb: 'VPCs' }}>
+            <Route path=":vpc" handle={makeCrumb((p) => p.vpc!)}>
+              <Route path="routers" handle={{ crumb: 'Routers' }}>
+                <Route
+                  path=":router"
+                  element={<RouterPage />}
+                  loader={RouterPage.loader}
+                  handle={makeCrumb((p) => p.router!)}
+                >
+                  <Route handle={{ crumb: 'Routes' }}>
+                    <Route index />
+                    <Route
+                      path="routes-new"
+                      element={<CreateRouterRouteSideModalForm />}
+                      loader={CreateRouterRouteSideModalForm.loader}
+                      handle={{ crumb: 'New Route', titleOnly: true }}
+                    />
+                    <Route
+                      path="routes/:route/edit"
+                      element={<EditRouterRouteSideModalForm />}
+                      loader={EditRouterRouteSideModalForm.loader}
+                      handle={{ crumb: 'Edit Route', titleOnly: true }}
+                    />
+                  </Route>
+                </Route>
               </Route>
             </Route>
           </Route>
-        </Route>
-        <Route
-          element={<RouterPage />}
-          loader={RouterPage.loader}
-          handle={{ crumb: 'Routes' }}
-          path="vpcs/:vpc/routers/:router"
-        >
-          <Route
-            path="routes-new"
-            element={<CreateRouterRouteSideModalForm />}
-            loader={CreateRouterRouteSideModalForm.loader}
-            handle={{ crumb: 'New Route' }}
-          />
-          <Route
-            path="routes/:route/edit"
-            element={<EditRouterRouteSideModalForm />}
-            loader={EditRouterRouteSideModalForm.loader}
-            handle={{ crumb: 'Edit Route' }}
-          />
-        </Route>
-        <Route element={<FloatingIpsPage />} loader={FloatingIpsPage.loader}>
-          <Route path="floating-ips" handle={{ crumb: 'Floating IPs' }} element={null} />
-          <Route
-            path="floating-ips-new"
-            element={<CreateFloatingIpSideModalForm />}
-            handle={{ crumb: 'New Floating IP' }}
-          />
           <Route
-            path="floating-ips/:floatingIp/edit"
-            element={<EditFloatingIpSideModalForm />}
-            loader={EditFloatingIpSideModalForm.loader}
-            handle={{ crumb: 'Edit Floating IP' }}
-          />
-        </Route>
+            element={<FloatingIpsPage />}
+            loader={FloatingIpsPage.loader}
+            handle={makeCrumb('Floating IPs', (p) => pb.floatingIps(getProjectSelector(p)))}
+          >
+            <Route path="floating-ips" element={null} />
+            <Route
+              path="floating-ips-new"
+              element={<CreateFloatingIpSideModalForm />}
+              handle={{ crumb: 'New Floating IP', titleOnly: true }}
+            />
+            <Route
+              path="floating-ips/:floatingIp/edit"
+              element={<EditFloatingIpSideModalForm />}
+              loader={EditFloatingIpSideModalForm.loader}
+              handle={{ crumb: 'Edit Floating IP', titleOnly: true }}
+            />
+          </Route>
 
-        <Route element={<DisksPage />} loader={DisksPage.loader}>
           <Route
-            path="disks-new"
-            element={
-              // relative nav is allowed just this once because the route is
-              // literally right there
-              <CreateDiskSideModalForm onDismiss={(navigate) => navigate('../disks')} />
-            }
-            handle={{ crumb: 'New disk' }}
-          />
-
-          <Route path="disks" handle={{ crumb: 'Disks' }} element={null} />
-        </Route>
+            element={<DisksPage />}
+            handle={makeCrumb('Disks', (p) => pb.disks(getProjectSelector(p)))}
+            loader={DisksPage.loader}
+          >
+            <Route path="disks" element={null} />
+            <Route
+              path="disks-new"
+              element={
+                // relative nav is allowed just this once because the route is
+                // literally right there
+                <CreateDiskSideModalForm onDismiss={(navigate) => navigate('../disks')} />
+              }
+              handle={{ crumb: 'New disk', titleOnly: true }}
+            />
+          </Route>
 
-        <Route element={<SnapshotsPage />} loader={SnapshotsPage.loader}>
-          <Route path="snapshots" handle={{ crumb: 'Snapshots' }} element={null} />
-          <Route
-            path="snapshots-new"
-            element={<CreateSnapshotSideModalForm />}
-            handle={{ crumb: 'New snapshot' }}
-          />
           <Route
-            path="snapshots/:snapshot/images-new"
-            element={<CreateImageFromSnapshotSideModalForm />}
-            loader={CreateImageFromSnapshotSideModalForm.loader}
-            handle={{ crumb: 'Create image from snapshot' }}
-          />
-        </Route>
+            element={<SnapshotsPage />}
+            handle={makeCrumb('Snapshots', (p) => pb.snapshots(getProjectSelector(p)))}
+            loader={SnapshotsPage.loader}
+          >
+            <Route path="snapshots" element={null} />
+            <Route
+              path="snapshots-new"
+              element={<CreateSnapshotSideModalForm />}
+              handle={{ crumb: 'New snapshot', titleOnly: true }}
+            />
+            <Route
+              path="snapshots/:snapshot/images-new"
+              element={<CreateImageFromSnapshotSideModalForm />}
+              loader={CreateImageFromSnapshotSideModalForm.loader}
+              handle={{ crumb: 'Create image from snapshot', titleOnly: true }}
+            />
+          </Route>
 
-        <Route element={<ImagesPage />} loader={ImagesPage.loader}>
-          <Route path="images" handle={{ crumb: 'Images' }} element={null} />
           <Route
-            path="images-new"
-            handle={{ crumb: 'Upload image' }}
-            element={<CreateImageSideModalForm />}
-          />
+            element={<ImagesPage />}
+            handle={makeCrumb('Images', (p) => pb.projectImages(getProjectSelector(p)))}
+            loader={ImagesPage.loader}
+          >
+            <Route path="images" element={null} />
+            <Route
+              path="images-new"
+              handle={{ crumb: 'Upload image', titleOnly: true }}
+              element={<CreateImageSideModalForm />}
+            />
+            <Route
+              path="images/:image/edit"
+              element={<EditProjectImageSideModalForm />}
+              loader={EditProjectImageSideModalForm.loader}
+              handle={{ crumb: 'Edit Image', titleOnly: true }}
+            />
+          </Route>
           <Route
-            path="images/:image/edit"
-            element={<EditProjectImageSideModalForm />}
-            loader={EditProjectImageSideModalForm.loader}
-            handle={{ crumb: 'Edit Image' }}
+            path="access"
+            element={<ProjectAccessPage />}
+            loader={ProjectAccessPage.loader}
+            handle={{ crumb: 'Access' }}
           />
         </Route>
-        <Route
-          path="access"
-          element={<ProjectAccessPage />}
-          loader={ProjectAccessPage.loader}
-          handle={{ crumb: 'Access' }}
-        />
       </Route>
     </Route>
   </Route>
diff --git a/app/ui/lib/DialogOverlay.tsx b/app/ui/lib/DialogOverlay.tsx
index 1d12dabcba..005ebac86f 100644
--- a/app/ui/lib/DialogOverlay.tsx
+++ b/app/ui/lib/DialogOverlay.tsx
@@ -9,5 +9,9 @@
 import { forwardRef } from 'react'
 
 export const DialogOverlay = forwardRef<HTMLDivElement>((_, ref) => (
-  <div ref={ref} aria-hidden className="fixed inset-0 z-10 overflow-auto bg-scrim" />
+  <div
+    ref={ref}
+    aria-hidden
+    className="fixed inset-0 z-modalOverlay overflow-auto bg-scrim"
+  />
 ))
diff --git a/app/ui/styles/index.css b/app/ui/styles/index.css
index 5746fa8af6..c2c6fa55ed 100644
--- a/app/ui/styles/index.css
+++ b/app/ui/styles/index.css
@@ -2,7 +2,7 @@
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, you can obtain one at https://mozilla.org/MPL/2.0/.
- *  
+ *
  * Copyright Oxide Computer Company
  */
 
@@ -44,6 +44,7 @@
 
 :root {
   --content-gutter: 2.5rem;
+  --top-bar-height: 54px;
 }
 
 @layer base {
diff --git a/app/util/__snapshots__/path-builder.spec.ts.snap b/app/util/__snapshots__/path-builder.spec.ts.snap
new file mode 100644
index 0000000000..fbb1d08283
--- /dev/null
+++ b/app/util/__snapshots__/path-builder.spec.ts.snap
@@ -0,0 +1,951 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`breadcrumbs 2`] = `
+{
+  "deviceSuccess (/device/success)": [],
+  "diskInventory (/system/inventory/disks)": [
+    {
+      "label": "Inventory",
+      "path": "/system/inventory/sleds",
+    },
+    {
+      "label": "Disks",
+      "path": "/system/inventory/disks",
+    },
+  ],
+  "disks (/projects/p/disks)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Disks",
+      "path": "/projects/p/disks",
+    },
+  ],
+  "disksNew (/projects/p/disks-new)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Disks",
+      "path": "/projects/p/disks",
+    },
+  ],
+  "floatingIpEdit (/projects/p/floating-ips/f/edit)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Floating IPs",
+      "path": "/projects/p/floating-ips",
+    },
+  ],
+  "floatingIps (/projects/p/floating-ips)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Floating IPs",
+      "path": "/projects/p/floating-ips",
+    },
+  ],
+  "floatingIpsNew (/projects/p/floating-ips-new)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Floating IPs",
+      "path": "/projects/p/floating-ips",
+    },
+  ],
+  "instance (/projects/p/instances/i/storage)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Instances",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "i",
+      "path": "/projects/p/instances/i/storage",
+    },
+    {
+      "label": "Storage",
+      "path": "/projects/p/instances/i/storage",
+    },
+  ],
+  "instanceConnect (/projects/p/instances/i/connect)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Instances",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "i",
+      "path": "/projects/p/instances/i/storage",
+    },
+    {
+      "label": "Connect",
+      "path": "/projects/p/instances/i/connect",
+    },
+  ],
+  "instanceMetrics (/projects/p/instances/i/metrics)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Instances",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "i",
+      "path": "/projects/p/instances/i/storage",
+    },
+    {
+      "label": "Metrics",
+      "path": "/projects/p/instances/i/metrics",
+    },
+  ],
+  "instanceNetworking (/projects/p/instances/i/networking)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Instances",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "i",
+      "path": "/projects/p/instances/i/storage",
+    },
+    {
+      "label": "Networking",
+      "path": "/projects/p/instances/i/networking",
+    },
+  ],
+  "instanceStorage (/projects/p/instances/i/storage)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Instances",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "i",
+      "path": "/projects/p/instances/i/storage",
+    },
+    {
+      "label": "Storage",
+      "path": "/projects/p/instances/i/storage",
+    },
+  ],
+  "instances (/projects/p/instances)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Instances",
+      "path": "/projects/p/instances",
+    },
+  ],
+  "instancesNew (/projects/p/instances-new)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "New instance",
+      "path": "/projects/p/instances-new",
+    },
+  ],
+  "ipPool (/system/networking/ip-pools/pl)": [
+    {
+      "label": "IP Pools",
+      "path": "/system/networking/ip-pools",
+    },
+    {
+      "label": "pl",
+      "path": "/system/networking/ip-pools/pl",
+    },
+  ],
+  "ipPoolEdit (/system/networking/ip-pools/pl/edit)": [
+    {
+      "label": "IP Pools",
+      "path": "/system/networking/ip-pools",
+    },
+    {
+      "label": "pl",
+      "path": "/system/networking/ip-pools/pl",
+    },
+    {
+      "label": "Edit IP pool",
+      "path": "/system/networking/ip-pools/pl/edit",
+    },
+  ],
+  "ipPoolRangeAdd (/system/networking/ip-pools/pl/ranges-add)": [
+    {
+      "label": "IP Pools",
+      "path": "/system/networking/ip-pools",
+    },
+    {
+      "label": "pl",
+      "path": "/system/networking/ip-pools/pl",
+    },
+  ],
+  "ipPools (/system/networking/ip-pools)": [
+    {
+      "label": "IP Pools",
+      "path": "/system/networking/",
+    },
+  ],
+  "ipPoolsNew (/system/networking/ip-pools-new)": [
+    {
+      "label": "IP Pools",
+      "path": "/system/networking/",
+    },
+  ],
+  "profile (/settings/profile)": [
+    {
+      "label": "Settings",
+      "path": "/settings/profile",
+    },
+    {
+      "label": "Profile",
+      "path": "/settings/profile",
+    },
+  ],
+  "project (/projects/p/instances)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Instances",
+      "path": "/projects/p/instances",
+    },
+  ],
+  "projectAccess (/projects/p/access)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Access",
+      "path": "/projects/p/access",
+    },
+  ],
+  "projectEdit (/projects/p/edit)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+  ],
+  "projectImageEdit (/projects/p/images/im/edit)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Images",
+      "path": "/projects/p/images",
+    },
+  ],
+  "projectImages (/projects/p/images)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Images",
+      "path": "/projects/p/images",
+    },
+  ],
+  "projectImagesNew (/projects/p/images-new)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Images",
+      "path": "/projects/p/images",
+    },
+  ],
+  "projects (/projects)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+  ],
+  "projectsNew (/projects-new)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+  ],
+  "samlIdp (/system/silos/s/idps/saml/pr)": [
+    {
+      "label": "Silos",
+      "path": "/system/silos",
+    },
+    {
+      "label": "s",
+      "path": "/system/silos/s",
+    },
+  ],
+  "serialConsole (/projects/p/instances/i/serial-console)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Instances",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "i",
+      "path": "/projects/p/instances/i",
+    },
+    {
+      "label": "Serial Console",
+      "path": "/projects/p/instances/i/serial-console",
+    },
+  ],
+  "silo (/system/silos/s)": [
+    {
+      "label": "Silos",
+      "path": "/system/silos",
+    },
+    {
+      "label": "s",
+      "path": "/system/silos/s",
+    },
+  ],
+  "siloAccess (/access)": [
+    {
+      "label": "Access",
+      "path": "/access",
+    },
+  ],
+  "siloIdpsNew (/system/silos/s/idps-new)": [
+    {
+      "label": "Silos",
+      "path": "/system/silos",
+    },
+    {
+      "label": "s",
+      "path": "/system/silos/s",
+    },
+  ],
+  "siloImageEdit (/images/im/edit)": [
+    {
+      "label": "Images",
+      "path": "/images",
+    },
+  ],
+  "siloImages (/images)": [
+    {
+      "label": "Images",
+      "path": "/images",
+    },
+  ],
+  "siloIpPools (/system/silos/s?tab=ip-pools)": [
+    {
+      "label": "Silos",
+      "path": "/system/silos",
+    },
+    {
+      "label": "s",
+      "path": "/system/silos/s",
+    },
+  ],
+  "siloUtilization (/utilization)": [
+    {
+      "label": "Utilization",
+      "path": "/utilization",
+    },
+  ],
+  "silos (/system/silos)": [
+    {
+      "label": "Silos",
+      "path": "/system/silos",
+    },
+  ],
+  "silosNew (/system/silos-new)": [
+    {
+      "label": "Silos",
+      "path": "/system/silos",
+    },
+  ],
+  "sled (/system/inventory/sleds/sl)": [
+    {
+      "label": "Inventory",
+      "path": "/system/inventory",
+    },
+    {
+      "label": "Sleds",
+      "path": "/system/inventory/sleds",
+    },
+  ],
+  "sledInstances (/system/inventory/sleds/sl/instances)": [
+    {
+      "label": "Inventory",
+      "path": "/system/inventory",
+    },
+    {
+      "label": "Sleds",
+      "path": "/system/inventory/sleds",
+    },
+    {
+      "label": "Instances",
+      "path": "/system/inventory/sleds/sl/instances",
+    },
+  ],
+  "sledInventory (/system/inventory/sleds)": [
+    {
+      "label": "Inventory",
+      "path": "/system/inventory/sleds",
+    },
+    {
+      "label": "Sleds",
+      "path": "/system/inventory/sleds",
+    },
+  ],
+  "snapshotImagesNew (/projects/p/snapshots/sn/images-new)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Snapshots",
+      "path": "/projects/p/snapshots",
+    },
+  ],
+  "snapshots (/projects/p/snapshots)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Snapshots",
+      "path": "/projects/p/snapshots",
+    },
+  ],
+  "snapshotsNew (/projects/p/snapshots-new)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Snapshots",
+      "path": "/projects/p/snapshots",
+    },
+  ],
+  "sshKeys (/settings/ssh-keys)": [
+    {
+      "label": "Settings",
+      "path": "/settings/profile",
+    },
+    {
+      "label": "SSH Keys",
+      "path": "/settings/ssh-keys",
+    },
+  ],
+  "sshKeysNew (/settings/ssh-keys-new)": [
+    {
+      "label": "Settings",
+      "path": "/settings/profile",
+    },
+    {
+      "label": "SSH Keys",
+      "path": "/settings/ssh-keys",
+    },
+  ],
+  "systemUtilization (/system/utilization)": [
+    {
+      "label": "Utilization",
+      "path": "/system/utilization",
+    },
+  ],
+  "vpc (/projects/p/vpcs/v/firewall-rules)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+    {
+      "label": "v",
+      "path": "/projects/p/vpcs/v/firewall-rules",
+    },
+    {
+      "label": "Firewall Rules",
+      "path": "/projects/p/vpcs/v/firewall-rules",
+    },
+  ],
+  "vpcEdit (/projects/p/vpcs/v/edit)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+    {
+      "label": "v",
+      "path": "/projects/p/vpcs/v/firewall-rules",
+    },
+    {
+      "label": "Edit VPC",
+      "path": "/projects/p/vpcs/v/edit",
+    },
+  ],
+  "vpcFirewallRuleClone (/projects/p/vpcs/v/firewall-rules-new/fr)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+    {
+      "label": "v",
+      "path": "/projects/p/vpcs/v/firewall-rules",
+    },
+    {
+      "label": "Firewall Rules",
+      "path": "/projects/p/vpcs/v/",
+    },
+  ],
+  "vpcFirewallRuleEdit (/projects/p/vpcs/v/firewall-rules/fr/edit)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+    {
+      "label": "v",
+      "path": "/projects/p/vpcs/v/firewall-rules",
+    },
+    {
+      "label": "Firewall Rules",
+      "path": "/projects/p/vpcs/v/",
+    },
+  ],
+  "vpcFirewallRules (/projects/p/vpcs/v/firewall-rules)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+    {
+      "label": "v",
+      "path": "/projects/p/vpcs/v/firewall-rules",
+    },
+    {
+      "label": "Firewall Rules",
+      "path": "/projects/p/vpcs/v/firewall-rules",
+    },
+  ],
+  "vpcFirewallRulesNew (/projects/p/vpcs/v/firewall-rules-new)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+    {
+      "label": "v",
+      "path": "/projects/p/vpcs/v/firewall-rules",
+    },
+    {
+      "label": "Firewall Rules",
+      "path": "/projects/p/vpcs/v/",
+    },
+  ],
+  "vpcRouter (/projects/p/vpcs/v/routers/r)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+    {
+      "label": "v",
+      "path": "/projects/p/vpcs/v",
+    },
+    {
+      "label": "Routers",
+      "path": "/projects/p/vpcs/v/routers",
+    },
+    {
+      "label": "r",
+      "path": "/projects/p/vpcs/v/routers/r",
+    },
+    {
+      "label": "Routes",
+      "path": "/projects/p/vpcs/v/routers/r/",
+    },
+  ],
+  "vpcRouterEdit (/projects/p/vpcs/v/routers/r/edit)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+    {
+      "label": "v",
+      "path": "/projects/p/vpcs/v/firewall-rules",
+    },
+    {
+      "label": "Routers",
+      "path": "/projects/p/vpcs/v/",
+    },
+  ],
+  "vpcRouterRouteEdit (/projects/p/vpcs/v/routers/r/routes/rr/edit)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+    {
+      "label": "v",
+      "path": "/projects/p/vpcs/v",
+    },
+    {
+      "label": "Routers",
+      "path": "/projects/p/vpcs/v/routers",
+    },
+    {
+      "label": "r",
+      "path": "/projects/p/vpcs/v/routers/r",
+    },
+    {
+      "label": "Routes",
+      "path": "/projects/p/vpcs/v/routers/r/",
+    },
+  ],
+  "vpcRouterRoutesNew (/projects/p/vpcs/v/routers/r/routes-new)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+    {
+      "label": "v",
+      "path": "/projects/p/vpcs/v",
+    },
+    {
+      "label": "Routers",
+      "path": "/projects/p/vpcs/v/routers",
+    },
+    {
+      "label": "r",
+      "path": "/projects/p/vpcs/v/routers/r",
+    },
+    {
+      "label": "Routes",
+      "path": "/projects/p/vpcs/v/routers/r/",
+    },
+  ],
+  "vpcRouters (/projects/p/vpcs/v/routers)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+    {
+      "label": "v",
+      "path": "/projects/p/vpcs/v/firewall-rules",
+    },
+    {
+      "label": "Routers",
+      "path": "/projects/p/vpcs/v/",
+    },
+  ],
+  "vpcRoutersNew (/projects/p/vpcs/v/routers-new)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+    {
+      "label": "v",
+      "path": "/projects/p/vpcs/v/firewall-rules",
+    },
+    {
+      "label": "Routers",
+      "path": "/projects/p/vpcs/v/",
+    },
+  ],
+  "vpcSubnets (/projects/p/vpcs/v/subnets)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+    {
+      "label": "v",
+      "path": "/projects/p/vpcs/v/firewall-rules",
+    },
+    {
+      "label": "Subnets",
+      "path": "/projects/p/vpcs/v/",
+    },
+  ],
+  "vpcSubnetsEdit (/projects/p/vpcs/v/subnets/su/edit)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+    {
+      "label": "v",
+      "path": "/projects/p/vpcs/v/firewall-rules",
+    },
+    {
+      "label": "Subnets",
+      "path": "/projects/p/vpcs/v/",
+    },
+  ],
+  "vpcSubnetsNew (/projects/p/vpcs/v/subnets-new)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+    {
+      "label": "v",
+      "path": "/projects/p/vpcs/v/firewall-rules",
+    },
+    {
+      "label": "Subnets",
+      "path": "/projects/p/vpcs/v/",
+    },
+  ],
+  "vpcs (/projects/p/vpcs)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+  ],
+  "vpcsNew (/projects/p/vpcs-new)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "VPCs",
+      "path": "/projects/p/vpcs",
+    },
+  ],
+}
+`;
diff --git a/app/util/path-builder.spec.ts b/app/util/path-builder.spec.ts
index 76e39846ef..a6ca824e76 100644
--- a/app/util/path-builder.spec.ts
+++ b/app/util/path-builder.spec.ts
@@ -5,8 +5,13 @@
  *
  * Copyright Oxide Computer Company
  */
+import { matchRoutes } from 'react-router-dom'
+import * as R from 'remeda'
 import { expect, test } from 'vitest'
 
+import { matchesToCrumbs } from '~/hooks/use-crumbs'
+import { routes } from '~/routes'
+
 import { pb } from './path-builder'
 
 // params can be the same for all of them because they only use what they need
@@ -36,7 +41,6 @@ test('path builder', () => {
         "diskInventory": "/system/inventory/disks",
         "disks": "/projects/p/disks",
         "disksNew": "/projects/p/disks-new",
-        "floatingIp": "/projects/p/floating-ips/f",
         "floatingIpEdit": "/projects/p/floating-ips/f/edit",
         "floatingIps": "/projects/p/floating-ips",
         "floatingIpsNew": "/projects/p/floating-ips-new",
@@ -47,7 +51,6 @@ test('path builder', () => {
         "instanceStorage": "/projects/p/instances/i/storage",
         "instances": "/projects/p/instances",
         "instancesNew": "/projects/p/instances-new",
-        "inventory": "/system/inventory",
         "ipPool": "/system/networking/ip-pools/pl",
         "ipPoolEdit": "/system/networking/ip-pools/pl/edit",
         "ipPoolRangeAdd": "/system/networking/ip-pools/pl/ranges-add",
@@ -57,19 +60,16 @@ test('path builder', () => {
         "project": "/projects/p/instances",
         "projectAccess": "/projects/p/access",
         "projectEdit": "/projects/p/edit",
-        "projectImage": "/projects/p/images/im",
         "projectImageEdit": "/projects/p/images/im/edit",
         "projectImages": "/projects/p/images",
         "projectImagesNew": "/projects/p/images-new",
         "projects": "/projects",
         "projectsNew": "/projects-new",
-        "rackInventory": "/system/inventory/racks",
         "samlIdp": "/system/silos/s/idps/saml/pr",
         "serialConsole": "/projects/p/instances/i/serial-console",
         "silo": "/system/silos/s",
         "siloAccess": "/access",
         "siloIdpsNew": "/system/silos/s/idps-new",
-        "siloImage": "/images/im",
         "siloImageEdit": "/images/im/edit",
         "siloImages": "/images",
         "siloIpPools": "/system/silos/s?tab=ip-pools",
@@ -84,9 +84,6 @@ test('path builder', () => {
         "snapshotsNew": "/projects/p/snapshots-new",
         "sshKeys": "/settings/ssh-keys",
         "sshKeysNew": "/settings/ssh-keys-new",
-        "system": "/system",
-        "systemHealth": "/system/health",
-        "systemIssues": "/system/issues",
         "systemUtilization": "/system/utilization",
         "vpc": "/projects/p/vpcs/v/firewall-rules",
         "vpcEdit": "/projects/p/vpcs/v/edit",
@@ -108,3 +105,39 @@ test('path builder', () => {
       }
     `)
 })
+
+// matchRoutes returns something slightly different from UIMatch
+const getMatches = (pathname: string) =>
+  matchRoutes(routes, pathname)!.map((m) => ({
+    pathname: m.pathname,
+    params: m.params,
+    handle: m.route.handle,
+    // not used
+    id: '',
+    data: undefined,
+  }))
+
+// run every route in the path builder through the crumbs logic
+test('breadcrumbs', () => {
+  const pairs = Object.entries(pb).map(([key, fn]) => {
+    const pathname = fn(params)
+    return [
+      `${key} (${pathname})`,
+      matchesToCrumbs(getMatches(pathname))
+        .filter((c) => !c.titleOnly)
+        // omit titleOnly because of noise in the snapshot
+        .map(R.omit(['titleOnly'])),
+    ] as const
+  })
+
+  const zeroCrumbKeys = pairs
+    .filter(([_, crumbs]) => crumbs.length === 0)
+    .map(([key]) => key)
+  expect(zeroCrumbKeys).toMatchInlineSnapshot(`
+    [
+      "deviceSuccess (/device/success)",
+    ]
+  `)
+
+  expect(Object.fromEntries(pairs)).toMatchSnapshot()
+})
diff --git a/app/util/path-builder.ts b/app/util/path-builder.ts
index 1709b19c59..de5b58ea1f 100644
--- a/app/util/path-builder.ts
+++ b/app/util/path-builder.ts
@@ -43,8 +43,7 @@ export const pb = {
   projectAccess: (params: Project) => `${projectBase(params)}/access`,
   projectImages: (params: Project) => `${projectBase(params)}/images`,
   projectImagesNew: (params: Project) => `${projectBase(params)}/images-new`,
-  projectImage: (params: Image) => `${pb.projectImages(params)}/${params.image}`,
-  projectImageEdit: (params: Image) => `${pb.projectImage(params)}/edit`,
+  projectImageEdit: (params: Image) => `${pb.projectImages(params)}/${params.image}/edit`,
 
   instances: (params: Project) => `${projectBase(params)}/instances`,
   instancesNew: (params: Project) => `${projectBase(params)}/instances-new`,
@@ -99,19 +98,15 @@ export const pb = {
 
   floatingIps: (params: Project) => `${projectBase(params)}/floating-ips`,
   floatingIpsNew: (params: Project) => `${projectBase(params)}/floating-ips-new`,
-  floatingIp: (params: FloatingIp) => `${pb.floatingIps(params)}/${params.floatingIp}`,
-  floatingIpEdit: (params: FloatingIp) => `${pb.floatingIp(params)}/edit`,
+  floatingIpEdit: (params: FloatingIp) =>
+    `${pb.floatingIps(params)}/${params.floatingIp}/edit`,
 
   siloUtilization: () => '/utilization',
   siloAccess: () => '/access',
   siloImages: () => '/images',
-  siloImage: (params: SiloImage) => `${pb.siloImages()}/${params.image}`,
-  siloImageEdit: (params: SiloImage) => `${pb.siloImage(params)}/edit`,
+  siloImageEdit: (params: SiloImage) => `${pb.siloImages()}/${params.image}/edit`,
 
-  system: () => '/system',
-  systemIssues: () => '/system/issues',
   systemUtilization: () => '/system/utilization',
-  systemHealth: () => '/system/health',
 
   ipPools: () => '/system/networking/ip-pools',
   ipPoolsNew: () => '/system/networking/ip-pools-new',
@@ -119,8 +114,6 @@ export const pb = {
   ipPoolEdit: (params: IpPool) => `${pb.ipPool(params)}/edit`,
   ipPoolRangeAdd: (params: IpPool) => `${pb.ipPool(params)}/ranges-add`,
 
-  inventory: () => '/system/inventory',
-  rackInventory: () => '/system/inventory/racks',
   sledInventory: () => '/system/inventory/sleds',
   diskInventory: () => '/system/inventory/disks',
   sled: ({ sledId }: Sled) => `/system/inventory/sleds/${sledId}`,
diff --git a/tailwind.config.js b/tailwind.config.js
index 9868c46e9e..16af5bc06d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -48,8 +48,9 @@ module.exports = {
         modal: '40',
         sideModalDropdown: '40',
         sideModal: '30',
-        topBarDropdown: '25',
-        topBar: '20',
+        modalOverlay: '25',
+        topBarDropdown: '20',
+        topBar: '15',
         popover: '10',
         contentDropdown: '10',
         content: '0',
diff --git a/test/e2e/breadcrumbs.e2e.ts b/test/e2e/breadcrumbs.e2e.ts
new file mode 100644
index 0000000000..2c260a2d1c
--- /dev/null
+++ b/test/e2e/breadcrumbs.e2e.ts
@@ -0,0 +1,82 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import { expect, test, type Page } from '@playwright/test'
+
+async function getCrumbs(page: Page) {
+  const links = await page
+    .getByRole('navigation', { name: 'Breadcrumbs' })
+    .getByRole('link')
+    .all()
+  return Promise.all(
+    links.map(async (link) => [await link.textContent(), await link.getAttribute('href')])
+  )
+}
+
+type Pair = [string, string]
+
+async function expectCrumbs(page: Page, crumbs: Pair[]) {
+  await expect.poll(() => getCrumbs(page)).toEqual(crumbs)
+}
+
+const projectCrumbs: Pair[] = [
+  ['Projects', '/projects'],
+  ['mock-project', '/projects/mock-project/instances'],
+]
+
+// Not trying to get too comprehensive about testing the crumbs, that's what the
+// big snapshot unit test is for. Just testing a couple of cases here to make
+// sure the functions tested by the unit test are hooked up right in the UI.
+test('breadcrumbs', async ({ page }) => {
+  await page.goto('/projects/mock-project/vpcs')
+  const vpcsCrumbs: Pair[] = [...projectCrumbs, ['VPCs', '/projects/mock-project/vpcs']]
+  await expectCrumbs(page, vpcsCrumbs)
+
+  // the breadcrumbs should be the same with the form open because
+  // the form route doesn't have its own crumb
+  await page.getByRole('link', { name: 'New VPC' }).click()
+  await expect(page).toHaveURL('/projects/mock-project/vpcs-new')
+  await expectCrumbs(page, vpcsCrumbs)
+
+  // try a nested one with a tab
+  await page.goto('/projects/mock-project/instances/db1/networking')
+  await expectCrumbs(page, [
+    ...projectCrumbs,
+    ['Instances', '/projects/mock-project/instances'],
+    ['db1', '/projects/mock-project/instances/db1/storage'],
+    ['Networking', '/projects/mock-project/instances/db1/networking'],
+  ])
+
+  // test a settings page
+  await page.goto('/settings/ssh-keys')
+  await expectCrumbs(page, [
+    ['Settings', '/settings/profile'],
+    ['SSH Keys', '/settings/ssh-keys'],
+  ])
+
+  // test a couple of system pages
+  await page.goto('/system/silos/maze-war')
+  const siloCrumbs: Pair[] = [
+    ['Silos', '/system/silos'],
+    ['maze-war', '/system/silos/maze-war'],
+  ]
+  await expectCrumbs(page, siloCrumbs)
+  // same crumbs on IdP detail side modal
+  await page.getByRole('link', { name: 'mock-idp' }).click()
+  await expect(page).toHaveURL('/system/silos/maze-war/idps/saml/mock-idp')
+  await expectCrumbs(page, siloCrumbs)
+
+  await page.goto('/system/networking/ip-pools/ip-pool-1')
+  const poolCrumbs: Pair[] = [
+    ['IP Pools', '/system/networking/ip-pools'],
+    ['ip-pool-1', '/system/networking/ip-pools/ip-pool-1'],
+  ]
+  await expectCrumbs(page, poolCrumbs)
+  await page.goto('/system/networking/ip-pools/ip-pool-1/ranges-add')
+  await expectCrumbs(page, poolCrumbs)
+})
diff --git a/test/e2e/instance-serial.e2e.ts b/test/e2e/instance-serial.e2e.ts
index 417ad1044c..399f4bf577 100644
--- a/test/e2e/instance-serial.e2e.ts
+++ b/test/e2e/instance-serial.e2e.ts
@@ -19,7 +19,7 @@ test('serial console can connect while starting', async ({ page }) => {
   // now go starting to its serial console page while it's starting up
   await expect(page).toHaveURL('/projects/mock-project/instances/abc/storage')
   await page.getByRole('tab', { name: 'Connect' }).click()
-  await page.getByRole('link', { name: 'Connect' }).click()
+  await page.getByRole('main').getByRole('link', { name: 'Connect' }).click()
 
   // The message goes from creating to starting and then disappears once
   // the instance is running. skip the check for "creating" because it can
diff --git a/test/e2e/instance.e2e.ts b/test/e2e/instance.e2e.ts
index 75629efbb7..8da3ba836f 100644
--- a/test/e2e/instance.e2e.ts
+++ b/test/e2e/instance.e2e.ts
@@ -17,7 +17,7 @@ const expectInstanceState = async (page: Page, instance: string, state: string)
 test('can delete a failed instance', async ({ page }) => {
   await page.goto('/projects/mock-project/instances')
 
-  await expect(page).toHaveTitle('Instances / mock-project / Oxide Console')
+  await expect(page).toHaveTitle('Instances / mock-project / Projects / Oxide Console')
 
   const cell = page.getByRole('cell', { name: 'you-fail' })
   await expect(cell).toBeVisible() // just to match hidden check at the end
@@ -52,7 +52,7 @@ test('can start a failed instance', async ({ page }) => {
 
 test('can stop a failed instance', async ({ page }) => {
   await page.goto('/projects/mock-project/instances')
-  await expect(page).toHaveTitle('Instances / mock-project / Oxide Console')
+  await expect(page).toHaveTitle('Instances / mock-project / Projects / Oxide Console')
   await expectInstanceState(page, 'you-fail', 'failed')
   await clickRowAction(page, 'you-fail', 'Stop')
   await page.getByRole('button', { name: 'Confirm' }).click()
@@ -85,7 +85,7 @@ test('can stop and delete a running instance', async ({ page }) => {
 
 test('can stop a starting instance, then start it again', async ({ page }) => {
   await page.goto('/projects/mock-project/instances')
-  await expect(page).toHaveTitle('Instances / mock-project / Oxide Console')
+  await expect(page).toHaveTitle('Instances / mock-project / Projects / Oxide Console')
 
   await expectInstanceState(page, 'not-there-yet', 'starting')
   await clickRowAction(page, 'not-there-yet', 'Stop')
diff --git a/test/e2e/ip-pools.e2e.ts b/test/e2e/ip-pools.e2e.ts
index ea17e815dc..70db5b15fb 100644
--- a/test/e2e/ip-pools.e2e.ts
+++ b/test/e2e/ip-pools.e2e.ts
@@ -13,7 +13,7 @@ import { clickRowAction, expectRowVisible, expectToast } from './utils'
 test('IP pool list', async ({ page }) => {
   await page.goto('/system/networking/ip-pools')
 
-  await expect(page).toHaveTitle('IP pools / Oxide Console')
+  await expect(page).toHaveTitle('IP Pools / Oxide Console')
 
   await expect(page.getByRole('heading', { name: 'IP Pools' })).toBeVisible()
 
@@ -55,7 +55,7 @@ test('IP pool silo list', async ({ page }) => {
   await page.goto('/system/networking/ip-pools')
 
   await page.getByRole('link', { name: 'ip-pool-1' }).click()
-  await expect(page).toHaveTitle('ip-pool-1 / IP pools / Oxide Console')
+  await expect(page).toHaveTitle('ip-pool-1 / IP Pools / Oxide Console')
 
   await page.getByRole('tab', { name: 'Linked silos' }).click()
   // this is here because waiting for the `tab` query param to show up avoids
@@ -251,7 +251,9 @@ test('IP range validation and add', async ({ page }) => {
   await expect(page.getByText('Capacity32')).toBeVisible()
 
   // go back to the pool and verify the utilization column changed
-  await page.getByRole('link', { name: 'IP Pools' }).click()
+  // use the sidebar nav to get there
+  const sidebar = page.getByRole('navigation', { name: 'Sidebar navigation' })
+  await sidebar.getByRole('link', { name: 'IP Pools' }).click()
   await expectRowVisible(table, {
     name: 'ip-pool-2',
     Utilization: 'v4' + '0 / 1' + 'v6' + '0 / 32',
@@ -285,7 +287,9 @@ test('remove range', async ({ page }) => {
   await expect(page.getByText('Capacity21')).toBeVisible()
 
   // go back to the pool and verify the utilization column changed
-  await page.getByRole('link', { name: 'IP Pools' }).click()
+  // use the topbar breadcrumb to get there
+  const breadcrumbs = page.getByRole('navigation', { name: 'Breadcrumbs' })
+  await breadcrumbs.getByRole('link', { name: 'IP Pools' }).click()
   await expectRowVisible(table, {
     name: 'ip-pool-1',
     Utilization: '6 / 21',
diff --git a/test/e2e/networking.e2e.ts b/test/e2e/networking.e2e.ts
index 221dac5d67..b13bf99b52 100644
--- a/test/e2e/networking.e2e.ts
+++ b/test/e2e/networking.e2e.ts
@@ -47,7 +47,8 @@ test('Create and edit VPC', async ({ page }) => {
   }
 
   // now go back up a level to vpcs table
-  await page.getByRole('link', { name: 'VPCs' }).click()
+  const breadcrumbs = page.getByRole('navigation', { name: 'Breadcrumbs' })
+  await breadcrumbs.getByRole('link', { name: 'VPCs' }).click()
   await expect(table.getByRole('row')).toHaveCount(3) // header plus two rows
   await expectRowVisible(table, {
     name: 'another-vpc',
diff --git a/test/e2e/vpcs.e2e.ts b/test/e2e/vpcs.e2e.ts
index 2e6ea3b466..dadcc16be5 100644
--- a/test/e2e/vpcs.e2e.ts
+++ b/test/e2e/vpcs.e2e.ts
@@ -29,7 +29,7 @@ test('can nav to VpcPage from /', async ({ page }) => {
   await expect(page.getByRole('cell', { name: 'allow-icmp' })).toBeVisible()
   await expect(page).toHaveURL('/projects/mock-project/vpcs/mock-vpc/firewall-rules')
   await expect(page).toHaveTitle(
-    'Firewall Rules / mock-vpc / VPCs / mock-project / Oxide Console'
+    'Firewall Rules / mock-vpc / VPCs / mock-project / Projects / Oxide Console'
   )
 
   // we can also click the firewall rules cell to get to the VPC detail
@@ -62,7 +62,8 @@ test('can edit VPC', async ({ page }) => {
   await expect(page.getByText('descriptionupdated description')).toBeVisible()
 
   // go to the VPCs list page and verify the name and description change
-  await page.getByRole('link', { name: 'VPCs' }).click()
+  const breadcrumbs = page.getByRole('navigation', { name: 'Breadcrumbs' })
+  await breadcrumbs.getByRole('link', { name: 'VPCs' }).click()
   await expect(page.getByRole('table').locator('tbody >> tr')).toHaveCount(1)
   await expectRowVisible(page.getByRole('table'), {
     name: 'mock-vpc-2',