diff --git a/apps/studio/components/interfaces/ErrorHandling/error-mappings.tsx b/apps/studio/components/interfaces/ErrorHandling/error-mappings.tsx
index c4095cae060..b5ac4ecf9a6 100644
--- a/apps/studio/components/interfaces/ErrorHandling/error-mappings.tsx
+++ b/apps/studio/components/interfaces/ErrorHandling/error-mappings.tsx
@@ -1,6 +1,7 @@
 import { ComponentType } from 'react'
 import { ConnectionTimeoutError } from 'types/api-errors'
 import type { ClassifiedError, KnownErrorType } from 'types/api-errors'
+import type { ResponseError } from 'types/base'
 
 import { ConnectionTimeoutTroubleshooting } from './errorMappings/ConnectionTimeout'
 
@@ -9,7 +10,9 @@ export interface ErrorMapping {
   Troubleshooting: ComponentType
 }
 
-type ErrorConstructor = new (...args: any[]) => ClassifiedError
+type ErrorConstructor = new (
+  ...args: ConstructorParameters<typeof ResponseError>
+) => ClassifiedError
 
 export const ERROR_MAPPINGS = new Map<ErrorConstructor, ErrorMapping>([
   [
diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.test.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.test.tsx
new file mode 100644
index 00000000000..3f3fb85d7b1
--- /dev/null
+++ b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.test.tsx
@@ -0,0 +1,217 @@
+import { screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { FileExplorerHeader } from './FileExplorerHeader'
+import { STORAGE_SORT_BY, STORAGE_SORT_BY_ORDER, STORAGE_VIEWS } from '../Storage.constants'
+import { customRender as render } from 'tests/lib/custom-render'
+
+const {
+  mockTrack,
+  mockUseStorageExplorerStateSnapshot,
+  mockUseAsyncCheckPermissions,
+  mockIsAPIDocsSidePanelEnabled,
+} = vi.hoisted(() => ({
+  mockTrack: vi.fn(),
+  mockUseStorageExplorerStateSnapshot: vi.fn(),
+  mockUseAsyncCheckPermissions: vi.fn(),
+  mockIsAPIDocsSidePanelEnabled: vi.fn(),
+}))
+
+vi.mock('lib/telemetry/track', () => ({ useTrack: () => mockTrack }))
+vi.mock('state/storage-explorer', () => ({
+  useStorageExplorerStateSnapshot: () => mockUseStorageExplorerStateSnapshot(),
+}))
+vi.mock('hooks/misc/useCheckPermissions', () => ({
+  useAsyncCheckPermissions: () => mockUseAsyncCheckPermissions(),
+}))
+vi.mock('components/interfaces/App/FeaturePreview/FeaturePreviewContext', () => ({
+  useIsAPIDocsSidePanelEnabled: () => mockIsAPIDocsSidePanelEnabled(),
+}))
+vi.mock('components/ui/APIDocsButton', () => ({
+  APIDocsButton: () => null,
+}))
+
+function makeColumn(name: string) {
+  return {
+    id: name,
+    name,
+    status: 'READY',
+    items: [],
+  }
+}
+
+function createSnapshot(view: STORAGE_VIEWS = STORAGE_VIEWS.COLUMNS) {
+  return {
+    columns: [makeColumn('my-bucket'), makeColumn('images'), makeColumn('2024')],
+    sortBy: STORAGE_SORT_BY.NAME,
+    setSortBy: vi.fn(),
+    sortByOrder: STORAGE_SORT_BY_ORDER.ASC,
+    setSortByOrder: vi.fn(),
+    popColumn: vi.fn(),
+    popColumnAtIndex: vi.fn(),
+    popOpenedFolders: vi.fn(),
+    popOpenedFoldersAtIndex: vi.fn(),
+    fetchFoldersByPath: vi.fn().mockResolvedValue(undefined),
+    refetchAllOpenedFolders: vi.fn().mockResolvedValue(undefined),
+    addNewFolderPlaceholder: vi.fn(),
+    clearOpenedFolders: vi.fn(),
+    setSelectedFilePreview: vi.fn(),
+    selectedBucket: { id: 'bucket-id', name: 'my-bucket' },
+    isSearching: false,
+    setIsSearching: vi.fn(),
+    view,
+    setView: vi.fn(),
+  }
+}
+
+describe('FileExplorerHeader', () => {
+  beforeEach(() => {
+    mockTrack.mockReset()
+    mockUseStorageExplorerStateSnapshot.mockReset()
+    mockUseAsyncCheckPermissions.mockReset()
+    mockIsAPIDocsSidePanelEnabled.mockReset()
+
+    mockUseStorageExplorerStateSnapshot.mockReturnValue(createSnapshot())
+    mockUseAsyncCheckPermissions.mockReturnValue({ can: true })
+    mockIsAPIDocsSidePanelEnabled.mockReturnValue(false)
+  })
+
+  it('renders full breadcrumbs in column view and places Navigate before Reload', () => {
+    render(
+      <FileExplorerHeader
+        itemSearchString=""
+        setItemSearchString={vi.fn()}
+        onFilesUpload={vi.fn()}
+      />
+    )
+
+    const rootBreadcrumb = screen.getByRole('button', { name: 'my-bucket' })
+    const inactiveBreadcrumb = screen.getByRole('button', { name: 'images' })
+    const activeBreadcrumb = screen.getByText('2024')
+
+    expect(rootBreadcrumb).toBeInTheDocument()
+    expect(inactiveBreadcrumb).toBeInTheDocument()
+    expect(activeBreadcrumb).toBeInTheDocument()
+    expect(inactiveBreadcrumb).toHaveClass('text-foreground-lighter')
+    expect(activeBreadcrumb).toHaveClass('text-foreground')
+    expect(activeBreadcrumb).not.toHaveClass('text-foreground-lighter')
+    expect(screen.queryByRole('button', { name: '2024' })).not.toBeInTheDocument()
+
+    const navigateButton = screen.getByRole('button', { name: 'Navigate' })
+    const reloadButton = screen.getByRole('button', { name: 'Reload' })
+
+    expect(
+      navigateButton.compareDocumentPosition(reloadButton) & Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy()
+  })
+
+  it('uses breadcrumb buttons to navigate back to a previous folder level with keyboard input', async () => {
+    const snapshot = createSnapshot()
+    mockUseStorageExplorerStateSnapshot.mockReturnValue(snapshot)
+
+    render(
+      <FileExplorerHeader
+        itemSearchString=""
+        setItemSearchString={vi.fn()}
+        onFilesUpload={vi.fn()}
+      />
+    )
+
+    const breadcrumbButton = screen.getByRole('button', { name: 'images' })
+    breadcrumbButton.focus()
+    await userEvent.keyboard('{Enter}')
+
+    expect(snapshot.popColumnAtIndex).toHaveBeenCalledWith(1)
+    expect(snapshot.popOpenedFoldersAtIndex).toHaveBeenCalledWith(0)
+  })
+
+  it('opens path edit mode from Navigate and tracks the click', async () => {
+    render(
+      <FileExplorerHeader
+        itemSearchString=""
+        setItemSearchString={vi.fn()}
+        onFilesUpload={vi.fn()}
+      />
+    )
+
+    await userEvent.click(screen.getByRole('button', { name: 'Navigate' }))
+
+    expect(mockTrack).toHaveBeenCalledWith('storage_explorer_navigate_clicked')
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(screen.getByText('Navigate to folder')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('images/2024')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Navigate' })).toBeInTheDocument()
+  })
+
+  it('submits a path, tracks the submission, and calls the existing path navigation flow', async () => {
+    const snapshot = createSnapshot()
+    mockUseStorageExplorerStateSnapshot.mockReturnValue(snapshot)
+
+    render(
+      <FileExplorerHeader
+        itemSearchString=""
+        setItemSearchString={vi.fn()}
+        onFilesUpload={vi.fn()}
+      />
+    )
+
+    await userEvent.click(screen.getByRole('button', { name: 'Navigate' }))
+
+    const input = screen.getByDisplayValue('images/2024')
+    await userEvent.clear(input)
+    await userEvent.type(input, 'archive/2025')
+    await userEvent.click(screen.getByRole('button', { name: 'Navigate' }))
+
+    await waitFor(() => {
+      expect(snapshot.fetchFoldersByPath).toHaveBeenCalledWith({ paths: ['archive', '2025'] })
+    })
+    await waitFor(() => {
+      expect(mockTrack).toHaveBeenCalledWith('storage_explorer_navigate_submitted')
+    })
+
+    expect(mockTrack).toHaveBeenCalledWith('storage_explorer_navigate_clicked')
+  })
+
+  it('navigates to bucket root without tracking a folder-path submission', async () => {
+    const snapshot = createSnapshot()
+    mockUseStorageExplorerStateSnapshot.mockReturnValue(snapshot)
+
+    render(
+      <FileExplorerHeader
+        itemSearchString=""
+        setItemSearchString={vi.fn()}
+        onFilesUpload={vi.fn()}
+      />
+    )
+
+    await userEvent.click(screen.getByRole('button', { name: 'Navigate' }))
+
+    const input = screen.getByDisplayValue('images/2024')
+    await userEvent.clear(input)
+    await userEvent.click(screen.getByRole('button', { name: 'Navigate' }))
+
+    await waitFor(() => {
+      expect(snapshot.popColumnAtIndex).toHaveBeenCalledWith(0)
+    })
+
+    expect(snapshot.clearOpenedFolders).toHaveBeenCalled()
+    expect(snapshot.setSelectedFilePreview).toHaveBeenCalledWith(undefined)
+    expect(mockTrack).toHaveBeenCalledWith('storage_explorer_navigate_clicked')
+    expect(mockTrack).not.toHaveBeenCalledWith('storage_explorer_navigate_submitted')
+  })
+
+  it('does not render Navigate in list view', () => {
+    mockUseStorageExplorerStateSnapshot.mockReturnValue(createSnapshot(STORAGE_VIEWS.LIST))
+
+    render(
+      <FileExplorerHeader
+        itemSearchString=""
+        setItemSearchString={vi.fn()}
+        onFilesUpload={vi.fn()}
+      />
+    )
+
+    expect(screen.queryByRole('button', { name: 'Navigate' })).not.toBeInTheDocument()
+  })
+})
diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx
index f8d5cce061b..d16d59c1921 100644
--- a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx
@@ -3,10 +3,11 @@ import { useIsAPIDocsSidePanelEnabled } from 'components/interfaces/App/FeatureP
 import { APIDocsButton } from 'components/ui/APIDocsButton'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { useTrack } from 'lib/telemetry/track'
 import { compact, isEqual, noop } from 'lodash'
 import {
+  ArrowLeft,
   Check,
-  ChevronLeft,
   ChevronRight,
   Columns,
   Edit2,
@@ -18,11 +19,25 @@ import {
   Upload,
   X,
 } from 'lucide-react'
-import { useEffect, useRef, useState } from 'react'
+import {
+  type ChangeEvent,
+  type ChangeEventHandler,
+  type SyntheticEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
 import {
   Button,
   cn,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogSection,
+  DialogTitle,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -31,8 +46,10 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-  Input,
+  FieldDescription_Shadcn_,
+  Label_Shadcn_,
 } from 'ui'
+import { Input } from 'ui-patterns/DataInputs/Input'
 
 import { STORAGE_SORT_BY, STORAGE_SORT_BY_ORDER, STORAGE_VIEWS } from '../Storage.constants'
 
@@ -53,41 +70,72 @@ const SORT_ORDER_OPTIONS = [
   { key: STORAGE_SORT_BY_ORDER.DESC, name: 'Descending' },
 ]
 
-const HeaderPathEdit = ({ loading, isSearching, breadcrumbs, togglePathEdit }: any) => {
+interface NavigateDialogProps {
+  open: boolean
+  pathString: string
+  onOpenChange: (open: boolean) => void
+  onPathStringChange: ChangeEventHandler<HTMLInputElement>
+  onCancel: () => void
+  onSubmit: (event?: SyntheticEvent) => void
+}
+
+const NavigateDialog = ({
+  open,
+  pathString,
+  onOpenChange,
+  onPathStringChange,
+  onCancel,
+  onSubmit,
+}: NavigateDialogProps) => {
+  const inputId = 'storage-explorer-navigate-path'
+  const descriptionId = 'storage-explorer-navigate-path-description'
+
   return (
-    <div
-      className={cn('group', !loading && 'cursor-pointer')}
-      onClick={() => (!loading.isLoading ? togglePathEdit() : {})}
-    >
-      {loading.isLoading ? (
-        <div className="ml-2 flex items-center gap-x-3">
-          <LoaderCircle size={14} strokeWidth={2} className="animate-spin" />
-          <p className="text-sm text-foreground-light">{loading.message}</p>
-        </div>
-      ) : (
-        <div className="flex cursor-pointer items-center gap-x-3">
-          {breadcrumbs.length > 1 && (
-            <p className="ml-2 text-sm truncate">{breadcrumbs[breadcrumbs.length - 1] || ''}</p>
-          )}
-          {!isSearching && (
-            <Button type="text" icon={<Edit2 />} className="transition opacity-0 hover:opacity-100">
-              Navigate
-            </Button>
-          )}
-        </div>
-      )}
-    </div>
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent size="small">
+        <DialogHeader>
+          <DialogTitle>Navigate to folder</DialogTitle>
+          <DialogDescription className="sr-only">
+            Enter a folder path within this bucket.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogSection className="flex flex-col gap-y-2">
+          <Label_Shadcn_ htmlFor={inputId}>Path</Label_Shadcn_>
+          <Input
+            id={inputId}
+            autoFocus
+            size="small"
+            value={pathString}
+            onChange={onPathStringChange}
+            placeholder="parent/child/grandchild"
+            aria-describedby={descriptionId}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') onSubmit(event)
+            }}
+          />
+          <FieldDescription_Shadcn_ id={descriptionId} className="text-foreground-lighter">
+            Enter a folder path within this bucket.
+          </FieldDescription_Shadcn_>
+        </DialogSection>
+        <DialogFooter>
+          <Button type="default" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button type="primary" onClick={onSubmit}>
+            Navigate
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   )
 }
 
 const HeaderBreadcrumbs = ({
   loading,
-  isSearching,
   breadcrumbs,
   selectBreadcrumb,
 }: {
   loading: { isLoading: boolean; message: string }
-  isSearching: boolean
   breadcrumbs: string[]
   selectBreadcrumb: (i: number) => void
 }) => {
@@ -117,20 +165,32 @@ const HeaderBreadcrumbs = ({
       <p className="ml-3 text-sm">{loading.message}</p>
     </div>
   ) : (
-    <div className={`ml-3 flex items-center ${isSearching && 'max-w-[140px] overflow-x-auto'}`}>
-      {formattedBreadcrumbs.map((crumb, idx: number) => (
-        <div className="flex items-center" key={crumb.name}>
-          {idx !== 0 && <ChevronRight size={10} strokeWidth={2} className="mx-3" />}
-          <p
-            key={crumb.name}
-            className={`truncate text-sm ${crumb.name !== ellipsis ? 'cursor-pointer' : ''}`}
-            style={{ maxWidth: '6rem' }}
-            onClick={() => (crumb.name !== ellipsis ? selectBreadcrumb(crumb.index) : {})}
-          >
-            {crumb.name}
-          </p>
-        </div>
-      ))}
+    <div className="ml-3 flex min-w-0 flex-1 items-center overflow-hidden">
+      {formattedBreadcrumbs.map((crumb, idx: number) => {
+        const isEllipsis = crumb.name === ellipsis
+        const isActive = crumb.index === breadcrumbs.length - 1
+
+        return (
+          <div className="flex shrink-0 items-center" key={crumb.name}>
+            {idx !== 0 && (
+              <ChevronRight size={14} strokeWidth={2} className="text-foreground-muted mx-1" />
+            )}
+            {isEllipsis ? (
+              <span className="max-w-24 truncate text-sm text-foreground-light">{crumb.name}</span>
+            ) : isActive ? (
+              <span className="max-w-24 truncate text-sm text-foreground">{crumb.name}</span>
+            ) : (
+              <button
+                type="button"
+                className="max-w-24 truncate border-0 bg-transparent p-0 text-left text-sm text-foreground-lighter transition-colors hover:text-foreground focus-visible:text-foreground"
+                onClick={() => selectBreadcrumb(crumb.index)}
+              >
+                {crumb.name}
+              </button>
+            )}
+          </div>
+        )
+      })}
     </div>
   )
 }
@@ -138,7 +198,7 @@ const HeaderBreadcrumbs = ({
 interface FileExplorerHeader {
   itemSearchString: string
   setItemSearchString: (value: string) => void
-  onFilesUpload: (event: any, columnIndex?: number) => void
+  onFilesUpload: (event: ChangeEvent<HTMLInputElement>, columnIndex?: number) => void
 }
 
 export const FileExplorerHeader = ({
@@ -148,15 +208,16 @@ export const FileExplorerHeader = ({
 }: FileExplorerHeader) => {
   const snap = useStorageExplorerStateSnapshot()
   const isNewAPIDocsEnabled = useIsAPIDocsSidePanelEnabled()
+  const track = useTrack()
 
   const [pathString, setPathString] = useState('')
   const [loading, setLoading] = useState({ isLoading: false, message: '' })
 
-  const [isEditingPath, setIsEditingPath] = useState(false)
+  const [isPathDialogOpen, setIsPathDialogOpen] = useState(false)
   const [isRefreshing, setIsRefreshing] = useState(false)
 
-  const uploadButtonRef: any = useRef(null)
-  const previousBreadcrumbs: any = useRef(null)
+  const uploadButtonRef = useRef<HTMLInputElement | null>(null)
+  const previousBreadcrumbs = useRef<string[] | null>(null)
 
   const {
     columns,
@@ -184,7 +245,7 @@ export const FileExplorerHeader = ({
     // [Joshen] Somehow toggle search triggers this despite breadcrumbs
     // being unchanged. Manually doing a prop check to fix this
     if (!isEqual(previousBreadcrumbs.current, breadcrumbs)) {
-      setIsEditingPath(false)
+      setIsPathDialogOpen(false)
       previousBreadcrumbs.current = breadcrumbs
     }
   }, [breadcrumbs])
@@ -203,22 +264,28 @@ export const FileExplorerHeader = ({
 
   /** Methods for path editings */
   const togglePathEdit = () => {
-    setIsEditingPath(true)
+    setIsPathDialogOpen(true)
     setPathString(breadcrumbs.slice(1).join('/'))
     if (snap.isSearching) onCancelSearch()
   }
 
-  const onUpdatePathString = (event: any) => {
+  const onUpdatePathString = (event: ChangeEvent<HTMLInputElement>) => {
     setPathString(event.target.value)
   }
 
-  const navigateByPathString = (event: any) => {
+  const navigateByPathString = async (event?: SyntheticEvent) => {
     if (event) {
       event.preventDefault()
       event.stopPropagation()
     }
-    setIsEditingPath(false)
-    onSetPathByString(compact(pathString.split('/')))
+
+    const paths = compact(pathString.split('/'))
+    setIsPathDialogOpen(false)
+    await onSetPathByString(paths)
+
+    if (paths.length > 0) {
+      track('storage_explorer_navigate_submitted')
+    }
   }
 
   const onSetPathByString = async (paths: string[]) => {
@@ -235,14 +302,14 @@ export const FileExplorerHeader = ({
   }
 
   const cancelSetPathString = () => {
-    setIsEditingPath(false)
+    setIsPathDialogOpen(false)
   }
 
   /** Methods for searching */
   // Search is currently within local scope when the view is set to list
   // Searching for column view requires much more thinking
   const toggleSearch = () => {
-    setIsEditingPath(false)
+    setIsPathDialogOpen(false)
     snap.setIsSearching(true)
   }
 
@@ -264,232 +331,223 @@ export const FileExplorerHeader = ({
     setIsRefreshing(false)
   }
 
+  const onOpenNavigate = () => {
+    track('storage_explorer_navigate_clicked')
+    togglePathEdit()
+  }
+
   return (
-    <div
-      className={cn(
-        'flex h-[40px] pl-2',
-        'items-center justify-between',
-        'rounded-t-md border-b border-overlay bg-surface-100'
-      )}
-    >
-      {/* Navigation */}
-      <div className={`flex items-center ${isEditingPath ? 'w-1/2' : ''}`}>
-        {breadcrumbs.length > 1 && (
-          <Button
-            icon={<ChevronLeft size={16} strokeWidth={2} />}
-            size="tiny"
-            type="text"
-            className="opacity-100 px-1"
-            disabled={backDisabled}
-            onClick={() => {
-              setIsEditingPath(false)
-              onSelectBack()
-            }}
-          />
-        )}
-        {isEditingPath ? (
-          <form className="ml-2 flex-grow">
-            <Input
-              autoFocus
-              key="pathSet"
-              type="text"
-              size="small"
-              value={pathString}
-              onChange={onUpdatePathString}
-              placeholder="e.g Parent Folder/Child Folder"
-              actions={[
+    <div className="rounded-t-md border-b border-overlay bg-surface-100">
+      <div className="overflow-x-auto overflow-y-hidden">
+        <div className="flex min-h-[40px] w-max min-w-full items-center justify-between">
+          {/* Navigation */}
+          <div className="flex min-w-0 flex-1 items-center overflow-hidden pl-2 py-[7px]">
+            {breadcrumbs.length > 1 && (
+              <>
                 <Button
-                  key="cancelPath"
-                  type="default"
-                  htmlType="button"
-                  onClick={cancelSetPathString}
-                >
-                  Cancel
-                </Button>,
+                  icon={<ArrowLeft size={16} strokeWidth={2} />}
+                  size="tiny"
+                  type="text"
+                  className="shrink-0 px-1"
+                  disabled={backDisabled}
+                  onClick={() => {
+                    setIsPathDialogOpen(false)
+                    onSelectBack()
+                  }}
+                />
+                <div className="mx-1 h-5 shrink-0 border-r border-strong" />
+              </>
+            )}
+            {breadcrumbs.length > 1 ? (
+              <HeaderBreadcrumbs
+                loading={loading}
+                breadcrumbs={breadcrumbs}
+                selectBreadcrumb={selectBreadcrumb}
+              />
+            ) : null}
+          </div>
+
+          {/* Actions */}
+          <div className="flex shrink-0 items-center whitespace-nowrap py-[7px]">
+            <div className="flex shrink-0 items-center space-x-1 px-2">
+              {snap.view === STORAGE_VIEWS.COLUMNS && (
                 <Button
-                  key="setPath"
-                  type="primary"
-                  htmlType="submit"
-                  onClick={navigateByPathString}
+                  size="tiny"
+                  icon={<Edit2 />}
+                  type="text"
+                  disabled={isPathDialogOpen || loading.isLoading}
+                  onClick={onOpenNavigate}
                 >
-                  Go to folder
-                </Button>,
-              ]}
-            />
-          </form>
-        ) : snap.view === STORAGE_VIEWS.COLUMNS ? (
-          <HeaderPathEdit
-            loading={loading}
-            isSearching={snap.isSearching}
-            breadcrumbs={breadcrumbs}
-            togglePathEdit={togglePathEdit}
-          />
-        ) : breadcrumbs.length > 1 ? (
-          <HeaderBreadcrumbs
-            loading={loading}
-            isSearching={snap.isSearching}
-            breadcrumbs={breadcrumbs}
-            selectBreadcrumb={selectBreadcrumb}
-          />
-        ) : null}
-      </div>
-
-      {/* Actions */}
-      <div className="flex items-center">
-        <div className="flex items-center space-x-1 px-2">
-          <Button
-            size="tiny"
-            icon={<RefreshCw />}
-            type="text"
-            loading={isRefreshing}
-            onClick={refreshData}
-          >
-            Reload
-          </Button>
-
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
+                  Navigate
+                </Button>
+              )}
               <Button
+                size="tiny"
+                icon={<RefreshCw />}
                 type="text"
-                icon={
-                  snap.view === 'LIST' ? (
-                    <List size={16} strokeWidth={2} />
-                  ) : (
-                    <Columns size={16} strokeWidth={2} />
-                  )
-                }
+                loading={isRefreshing}
+                onClick={refreshData}
               >
-                View
+                Reload
               </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-40 min-w-0">
-              {VIEW_OPTIONS.map((option) => (
-                <DropdownMenuItem key={option.key} onClick={() => snap.setView(option.key)}>
-                  <div className="flex items-center justify-between w-full">
-                    <p>{option.name}</p>
-                    {snap.view === option.key && (
-                      <Check size={16} className="text-brand" strokeWidth={2} />
-                    )}
-                  </div>
-                </DropdownMenuItem>
-              ))}
-              <DropdownMenuSeparator />
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>Sort by</DropdownMenuSubTrigger>
-                <DropdownMenuSubContent className="w-44">
-                  {SORT_BY_OPTIONS.map((option) => (
-                    <DropdownMenuItem key={option.key} onClick={() => setSortBy(option.key)}>
-                      <div className="flex items-center justify-between w-full">
-                        <p>{option.name}</p>
-                        {sortBy === option.key && (
-                          <Check size={16} className="text-brand" strokeWidth={2} />
-                        )}
-                      </div>
-                    </DropdownMenuItem>
-                  ))}
-                </DropdownMenuSubContent>
-              </DropdownMenuSub>
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>Sort order</DropdownMenuSubTrigger>
-                <DropdownMenuSubContent>
-                  {SORT_ORDER_OPTIONS.map((option) => (
-                    <DropdownMenuItem key={option.key} onClick={() => setSortByOrder(option.key)}>
+
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type="text"
+                    icon={
+                      snap.view === 'LIST' ? (
+                        <List size={16} strokeWidth={2} />
+                      ) : (
+                        <Columns size={16} strokeWidth={2} />
+                      )
+                    }
+                  >
+                    View
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-40 min-w-0">
+                  {VIEW_OPTIONS.map((option) => (
+                    <DropdownMenuItem key={option.key} onClick={() => snap.setView(option.key)}>
                       <div className="flex items-center justify-between w-full">
                         <p>{option.name}</p>
-                        {sortByOrder === option.key && (
+                        {snap.view === option.key && (
                           <Check size={16} className="text-brand" strokeWidth={2} />
                         )}
                       </div>
                     </DropdownMenuItem>
                   ))}
-                </DropdownMenuSubContent>
-              </DropdownMenuSub>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>Sort by</DropdownMenuSubTrigger>
+                    <DropdownMenuSubContent className="w-44">
+                      {SORT_BY_OPTIONS.map((option) => (
+                        <DropdownMenuItem key={option.key} onClick={() => setSortBy(option.key)}>
+                          <div className="flex items-center justify-between w-full">
+                            <p>{option.name}</p>
+                            {sortBy === option.key && (
+                              <Check size={16} className="text-brand" strokeWidth={2} />
+                            )}
+                          </div>
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuSubContent>
+                  </DropdownMenuSub>
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>Sort order</DropdownMenuSubTrigger>
+                    <DropdownMenuSubContent>
+                      {SORT_ORDER_OPTIONS.map((option) => (
+                        <DropdownMenuItem
+                          key={option.key}
+                          onClick={() => setSortByOrder(option.key)}
+                        >
+                          <div className="flex items-center justify-between w-full">
+                            <p>{option.name}</p>
+                            {sortByOrder === option.key && (
+                              <Check size={16} className="text-brand" strokeWidth={2} />
+                            )}
+                          </div>
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuSubContent>
+                  </DropdownMenuSub>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
 
-        <div className="h-6 border-r border-control" />
-        <div className="flex items-center space-x-1 px-2">
-          <div className="hidden">
-            <input ref={uploadButtonRef} type="file" multiple onChange={onFilesUpload} />
-          </div>
-          <ButtonTooltip
-            icon={<Upload size={16} strokeWidth={2} />}
-            type="text"
-            disabled={!canUpdateStorage || breadcrumbs.length === 0}
-            onClick={onSelectUpload}
-            tooltip={{
-              content: {
-                side: 'bottom',
-                text: !canUpdateStorage
-                  ? 'You need additional permissions to upload files'
-                  : undefined,
-              },
-            }}
-          >
-            Upload files
-          </ButtonTooltip>
-          <ButtonTooltip
-            icon={<FolderPlus size={16} strokeWidth={2} />}
-            type="text"
-            disabled={!canUpdateStorage || breadcrumbs.length === 0}
-            onClick={() => addNewFolderPlaceholder(-1)}
-            tooltip={{
-              content: {
-                side: 'bottom',
-                text: !canUpdateStorage
-                  ? 'You need additional permissions to create folders'
-                  : undefined,
-              },
-            }}
-          >
-            Create folder
-          </ButtonTooltip>
-        </div>
+            <div className="h-6 shrink-0 border-r border-control" />
+            <div className="flex shrink-0 items-center space-x-1 px-2">
+              <div className="hidden">
+                <input ref={uploadButtonRef} type="file" multiple onChange={onFilesUpload} />
+              </div>
+              <ButtonTooltip
+                icon={<Upload size={16} strokeWidth={2} />}
+                type="text"
+                disabled={!canUpdateStorage || breadcrumbs.length === 0}
+                onClick={onSelectUpload}
+                tooltip={{
+                  content: {
+                    side: 'bottom',
+                    text: !canUpdateStorage
+                      ? 'You need additional permissions to upload files'
+                      : undefined,
+                  },
+                }}
+              >
+                Upload files
+              </ButtonTooltip>
+              <ButtonTooltip
+                icon={<FolderPlus size={16} strokeWidth={2} />}
+                type="text"
+                disabled={!canUpdateStorage || breadcrumbs.length === 0}
+                onClick={() => addNewFolderPlaceholder(-1)}
+                tooltip={{
+                  content: {
+                    side: 'bottom',
+                    text: !canUpdateStorage
+                      ? 'You need additional permissions to create folders'
+                      : undefined,
+                  },
+                }}
+              >
+                Create folder
+              </ButtonTooltip>
+            </div>
 
-        <div className="h-6 border-r border-control" />
-        <div className="flex items-center px-2">
-          {snap.isSearching ? (
-            <Input
-              size="tiny"
-              autoFocus
-              className="w-52"
-              icon={<Search />}
-              actions={[
+            <div className="h-6 shrink-0 border-r border-control" />
+            <div className="flex shrink-0 items-center px-2">
+              {snap.isSearching ? (
+                <Input
+                  size="tiny"
+                  autoFocus
+                  className="w-52"
+                  icon={<Search />}
+                  actions={[
+                    <Button
+                      key="cancel"
+                      size="tiny"
+                      type="text"
+                      icon={<X />}
+                      onClick={onCancelSearch}
+                      className="p-0 h-5 w-5"
+                    />,
+                  ]}
+                  placeholder="Search for a file or folder"
+                  type="text"
+                  value={itemSearchString}
+                  onChange={(event) => setItemSearchString(event.target.value)}
+                />
+              ) : (
                 <Button
-                  key="cancel"
+                  icon={<Search />}
                   size="tiny"
                   type="text"
-                  icon={<X />}
-                  onClick={onCancelSearch}
-                  className="p-0 h-5 w-5"
-                />,
-              ]}
-              placeholder="Search for a file or folder"
-              type="text"
-              value={itemSearchString}
-              onChange={(event) => setItemSearchString(event.target.value)}
-            />
-          ) : (
-            <Button
-              icon={<Search />}
-              size="tiny"
-              type="text"
-              className="px-1"
-              onClick={toggleSearch}
-            />
-          )}
-        </div>
-
-        {isNewAPIDocsEnabled && (
-          <>
-            <div className="h-6 border-r border-control" />
-            <div className="mx-2">
-              <APIDocsButton section={['storage', selectedBucket.name]} source="storage" />
+                  className="px-1"
+                  onClick={toggleSearch}
+                />
+              )}
             </div>
-          </>
-        )}
+
+            {isNewAPIDocsEnabled && (
+              <>
+                <div className="h-6 shrink-0 border-r border-control" />
+                <div className="mx-2 shrink-0">
+                  <APIDocsButton section={['storage', selectedBucket.name]} source="storage" />
+                </div>
+              </>
+            )}
+          </div>
+        </div>
       </div>
+
+      <NavigateDialog
+        open={isPathDialogOpen}
+        pathString={pathString}
+        onOpenChange={setIsPathDialogOpen}
+        onPathStringChange={onUpdatePathString}
+        onCancel={cancelSetPathString}
+        onSubmit={navigateByPathString}
+      />
     </div>
   )
 }
diff --git a/apps/studio/pages/project/[ref]/storage/files/buckets/[bucketId].tsx b/apps/studio/pages/project/[ref]/storage/files/buckets/[bucketId].tsx
index fdacc798f6e..1cb604fcfd5 100644
--- a/apps/studio/pages/project/[ref]/storage/files/buckets/[bucketId].tsx
+++ b/apps/studio/pages/project/[ref]/storage/files/buckets/[bucketId].tsx
@@ -84,6 +84,7 @@ const BucketPage: NextPageWithLayout = () => {
           },
           {
             label: 'Buckets',
+            href: `/project/${ref}/storage/files`,
           },
         ]}
         primaryActions={
diff --git a/packages/common/telemetry-constants.ts b/packages/common/telemetry-constants.ts
index 367fd1cd9f6..b42a401311d 100644
--- a/packages/common/telemetry-constants.ts
+++ b/packages/common/telemetry-constants.ts
@@ -3012,6 +3012,30 @@ export interface LogExplorerQueryRunButtonClickedEvent {
   groups: TelemetryGroups
 }
 
+/**
+ * User clicked the Navigate action in the storage explorer header.
+ *
+ * @group Events
+ * @source studio
+ * @page /project/{ref}/storage/files/buckets/{bucketId}
+ */
+export interface StorageExplorerNavigateClickedEvent {
+  action: 'storage_explorer_navigate_clicked'
+  groups: TelemetryGroups
+}
+
+/**
+ * User submitted a folder path from the storage explorer Navigate action.
+ *
+ * @group Events
+ * @source studio
+ * @page /project/{ref}/storage/files/buckets/{bucketId}
+ */
+export interface StorageExplorerNavigateSubmittedEvent {
+  action: 'storage_explorer_navigate_submitted'
+  groups: TelemetryGroups
+}
+
 /**
  * @hidden
  */
@@ -3085,6 +3109,8 @@ export type TelemetryEvent =
   | SendFeedbackButtonClickedEvent
   | SqlEditorQueryRunButtonClickedEvent
   | LogExplorerQueryRunButtonClickedEvent
+  | StorageExplorerNavigateClickedEvent
+  | StorageExplorerNavigateSubmittedEvent
   | StudioPricingPlanCtaClickedEvent
   | StudioPricingSidePanelOpenedEvent
   | ReportsDatabaseGrafanaBannerClickedEvent