Brutalist Breadcrumb Navigation Component
Brutalist Breadcrumb Navigation Component for Portfolios with Vibrant color scheme and Complex layout, featuring responsive design and dark mode support.
HTML Code
<nav class="text-sm font-mono">
<ol class="list-none p-0 inline-flex">
<li class="flex items-center">
<a href="#" class="text-blue-500 dark:text-teal- गलती this looks like a typo, will fix to something like: dark:text-teal-300 hover:underline">Home</a>
<svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 67.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
</li>
<li class="flex items-center">
<a href="#" class="text-blue-500 dark:text-teal-300 hover:underline">Projects</a>
<svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 67.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
</li>
<li>
<span class="text-purple-700 dark:text-pink-400 font-bold">Current Project</span>
</li>
</ol>
</nav>Related Components
Breadcrumb Navigation Component
Responsive Breadcrumb Navigation Component styled with Material Design and Tailwind CSS, featuring dark theme support and a triadic color scheme.
Neumorphism Breadcrumb Navigation Component
Neumorphism Breadcrumb Navigation Component for Blog/Content with Dark Mode support
Breadcrumb Navigation Component
A Tailwind CSS Breadcrumb Navigation Component with dark mode support.