- Button.tsx
- Nav.tsx
Breadcrumb im Terminal
Ein Terminalpfad dient als Breadcrumb: Klick auf einen Ordner, der cd-Befehl tippt sich, der Prompt ändert sich und der Inhalt erscheint.
Einstellungen
Code
<div class="uvq12-sh" aria-label="Terminal" role="group"><div class="tb" aria-hidden="true"><i></i><i></i><i></i><span>zsh</span></div><div class="bd"><div class="hs"></div><div class="pr"><span class="u">ana@mac</span>:<nav class="pa" aria-label="Brotkrumen" aria-live="polite"><button type="button">~</button>/<button type="button">code</button>/<button type="button">web</button>/<button type="button">src</button>/<button type="button" aria-current="location">components</button></nav><span class="u">$</span> <span class="cm"></span><span class="cr" aria-hidden="true"></span></div><ul class="ls" aria-label="Inhalt"><li><span>Button.tsx</span></li><li><span>Nav.tsx</span></li></ul></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Ein Breadcrumb für Entwickler im Stil eines Terminal-Prompts. Jeder Ordner im Pfad ist anklickbar, ebenso jeder darunter aufgelistete Ordner. Ein Klick tippt den passenden cd-Befehl Buchstabe für Buchstabe, schiebt ihn in den Verlauf, aktualisiert den Prompt und listet den neuen Ordner auf. Die Rücktaste geht eine Ebene höher. Passend für Dokus von Kommandozeilen-Tools, Dateibrowser und Portfolios.
Die Hauptfarbe färbt den Prompt, die Zweitfarbe die Ordner. Ersetze das kleine Dateisystem-Objekt im Skript durch deine eigene Struktur und halte die Ordnernamen kurz, damit der Pfad in eine Zeile passt.