Breadcrumbs

Navigate your file system path with interactive breadcrumb trails

Overview

Gitlantis displays your current location in the file system using breadcrumb trails in the top-left corner of the screen. The breadcrumbs show both your current Git branch and your file path.

Breadcrumb Components

The breadcrumb system consists of two main parts:

Branch Breadcrumb

Displays the current Git branch with a clickable picker:

<span className="text-md cursor-pointer select-none rounded-br-md rounded-tl-lg rounded-tr-lg border-b border-l border-l-4 border-r border-t border-[#2d302f] bg-[#f2bc07] px-2 py-[1px] text-black">
  <span className="pr-1 font-semibold">Branch:</span>
  <span>{current || "none found"}</span>
</span>

The branch name appears in yellow (#f2bc07) with a bold “Branch:” label.

Source: src/browser/components/ui/breadcrumbs/branch/index.tsx:29-36

Path Breadcrumb

Shows your current location in the file system hierarchy:

<nav className={containerClasses}>
  <span className="mr-1 text-gray-300">Exploring:</span>
  {baseFolderChildren.map((segment, index) => {
    const fullPath = segments
      .slice(0, baseFolderIndex + index + 1)
      .join("/");
    const isLastItem = index === baseFolderChildren.length - 1;

    return (
      <span key={`route-${index}-${fullPath}`}>
        {index > 0 && <span className="mx-1 text-gray-500">{">"}​</span>}
        <button onClick={() => !isLastItem && setCurrentPath("/" + fullPath)}>
          {segment}
        </button>
      </span>
    );
  })}
</nav>

Source: src/browser/components/ui/breadcrumbs/path/index.tsx:43-69

Path Navigation

The breadcrumb path allows you to quickly navigate up the directory tree:

Segment Interaction

<button
  onMouseDown={(e) => e.preventDefault()}
  onClick={() => {
    if (!isLastItem) setCurrentPath("/" + fullPath);
  }}
  className={`${segmentButtonClasses} ${
    isLastItem ? "" : "hover:text-[#f2bc07] hover:underline"
  }`}
  title={segment}
>
  {segment}
</button>

Each path segment (except the current location) is clickable and will navigate to that folder when clicked.

Source: src/browser/components/ui/breadcrumbs/path/index.tsx:57-66

Path Parsing

The breadcrumb intelligently parses your current path:

Path Segmentation Logic

const segments = currentPath.split("/").filter(Boolean);
const baseFolderSegments = baseFolder.split("/").filter(Boolean);
const baseFolderIndex = segments.findIndex(
  (_, i) =>
    segments.slice(0, i + 1).join("/") === baseFolderSegments.join("/")
);

if (baseFolderIndex === -1) return null;

const baseFolderChildren = segments.slice(baseFolderIndex);

This logic:

1. Splits the path into segments
2. Finds where your base folder starts
3. Only shows the relevant portion of the path

Source: src/browser/components/ui/breadcrumbs/path/index.tsx:31-40

Root Directory Handling

When at the root directory, the breadcrumb shows a simplified view:

if (currentPath === ROOT_DIRECTORY_KEY) {
  if (rootLabel.length > 0) {
    return (
      <nav className={containerClasses}>
        <span className="flex items-center text-gray-300">
          <span className="mr-1">Exploring:</span>
          <span className="text-white">{rootLabel}</span>
        </span>
      </nav>
    );
  }
  return null;
}

Source: src/browser/components/ui/breadcrumbs/path/index.tsx:17-29

Styling and Layout

The breadcrumbs use a dark theme that contrasts with the ocean world:

Container Styling

const containerClasses =
  "flex flex-wrap max-w-[50vw] break-words rounded-bl-lg rounded-br-lg rounded-tr-lg bg-[#2d302f] px-2 py-1 gap-y-1";

• Background: Dark gray (#2d302f)
• Max width: 50% of viewport width
• Text wrapping: Enabled for long paths
• Rounded corners: Bottom-left, bottom-right, top-right

Source: src/browser/components/ui/breadcrumbs/path/index.tsx:11-12

Segment Styling

const segmentButtonClasses =
  "max-w-[10rem] truncate text-white text-sm focus:outline-none";

• Max width: 10rem per segment
• Truncation: Long folder names are truncated with ellipsis
• Hover effect: Yellow (#f2bc07) with underline (except current segment)

Source: src/browser/components/ui/breadcrumbs/path/index.tsx:14-15

Visibility and Animation

The breadcrumbs respect user settings and the splash screen state:

<div
  className={`text-md absolute left-3 top-3 z-50 z-[100] flex flex-col items-start rounded-t-lg text-gray-500 transition-opacity duration-300 ${
    showSplashScreen
      ? "pointer-events-none opacity-0"
      : "opacity-100 delay-[1700ms]"
  } block select-none`}
>
  {settings.breadcrumbs === "Hide" || currentPath.length === 0 ? null : (
    <>
      <BreadcrumbBranch />
      <BreadcrumbPath />
    </>
  )}
</div>

Key behaviors:

• Fade-in delay: 1700ms after splash screen disappears
• Settings respect: Hidden when settings.breadcrumbs === "Hide"
• Empty path: Not shown if no current path

Source: src/browser/components/ui/breadcrumbs/index.tsx:12-26

Separator Character

Path segments are separated by a > character:

{index > 0 && <span className="mx-1 text-gray-500">{">"}</span>}

The separator appears in gray between segments (but not before the first segment).

Source: src/browser/components/ui/breadcrumbs/path/index.tsx:56

The breadcrumb system integrates with the Git branch picker, allowing you to switch branches without leaving the 3D world. See Git Integration for more details.