Monospace_Developer_Breadcrumb_Navigation
一个响应式痕迹导航组件，具有等宽/开发人员美学和复古/复古配色方案，专为文档和 Wiki 站点设计。包括深色模式支持。
HTML 代码
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-2 md:space-x-4 font-mono text-xs md:text-sm lg:text-base p-2 rounded-md
bg-gray-100 dark:bg-gray-800
text-gray-700 dark:text-gray-300
border border-gray-300 dark:border-gray-700
shadow-sm dark:shadow-md">
<li class="inline-flex items-center">
<a href="#" class="inline-flex items-center
text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
transition-colors duration-200
px-2 py-1 rounded-sm
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<svg class="w-3 h-3 mr-1 md:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
</path>
</svg>
_HOME
</a>
</li>
<li>
<div class="flex items-center">
<svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
</path>
</svg>
<a href="#" class="
text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
transition-colors duration-200
px-2 py-1 rounded-sm
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
_DOCS
</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
</path>
</svg>
<a href="#" class="
text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
transition-colors duration-200
px-2 py-1 rounded-sm
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
_GETTING_STARTED
</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
</path>
</svg>
<span class="
text-blue-600 dark:text-blue-400
font-bold
px-2 py-1
cursor-default">
_INSTALLATION
</span>
</div>
</li>
</ol>
</nav>