- Button.tsx
- Nav.tsx
Terminal breadcrumb
A terminal path works as a breadcrumb: click a folder and the cd command types itself, the prompt updates and its contents appear.
Settings
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="Breadcrumb" 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="Content"><li><span>Button.tsx</span></li><li><span>Nav.tsx</span></li></ul></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Navigation
See all NavigationWhere to use it
A breadcrumb for developers, drawn as a terminal prompt. Every folder in the path is clickable, and so is every folder listed below it. Clicking types the right cd command letter by letter, moves it into the history, updates the prompt and lists the new folder. Backspace goes up one level. It suits docs for command line tools, file browsers and portfolios.
The main color sets the prompt and the secondary color the folders. Replace the small file system object in the script with your own structure, and keep folder names short.