Skip to main content

​
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. The breadcrumb system consists of two main parts:
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 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: 
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us