--- a/src/VideoPage.ts	Mon Apr 17 13:33:59 2023 -0700
+++ b/src/VideoPage.ts	Mon Apr 17 13:35:18 2023 -0700
@@ -2,6 +2,7 @@
 import { customElement, property } from "lit/decorators.js";
 import { PagePlayer, ShakaVideoElement } from "./PagePlayer";
 import maincss from "./main.css?inline";
+export { SlProgressBar } from "@shoelace-style/shoelace";
 export { PagePlayer } from "./PagePlayer";
 export { VideoSection } from "./VideoSection";
 
@@ -83,7 +84,15 @@
   ];
   render() {
     return html`
-      <div id="path-segs">${this.pathSegs.map((seg) => html`<span><a href="./?${subdirQuery(seg.subdir)}">${seg.label}</a></span>`)}</div>
+      <sl-breadcrumb>
+        ${this.pathSegs.map(
+          (seg, i) => 
+          html`<sl-breadcrumb-item>
+                 <a href="./?${subdirQuery(seg.subdir)}">
+                 ${i == 0 ? html`<sl-icon name="house"></sl-icon>`:''}
+                 ${seg.label}
+                 </a></sl-breadcrumb-item>`)}
+      </sl-breadcrumb>
 
       <div class="listing">
       ${this.subdirs.map((s) => html`<div class="subdir"><a href="${"./?" + subdirQuery(s.path)}">${s.label}</a></div>`)}