Skip to main content

FileBreadcrumbs

FileBreadcrumbs

Path bar from the drive root to the current folder; each crumb navigates

Tags: files breadcrumbs navigation path

The path bar from the root to the current folder. Each crumb navigates; the current folder is aria-current="page". Long paths collapse the middle into a "…" button that expands them.

Import​

<script>
  import { FileBreadcrumbs } from '@classic-homes/files-svelte';
</script>

Basic Usage​

<script lang="ts">
  import { FileBreadcrumbs } from '@classic-homes/files-svelte';

  let path = $state('105 BREWERY/Plans');
</script>

<FileBreadcrumbs rootLabel="Land Development" {path} onnavigate={(p) => (path = p)} />

Props​

Prop Type Default Description
rootLabel string required Label of the root crumb
path string required Current folder, root-relative
onnavigate (path: string) => void - Called with the crumb's path ('' for the root)
maxItems number 4 Crumbs to show before the middle collapses into "…"
label string 'Folder path' Accessible name of the nav landmark
class string - Classes for the nav element
On this page