Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan receptivo diseñado en un estilo brutalista con una combinación de colores vibrantes para los tableros, con soporte para modo oscuro.
Código HTML
<nav class="bg-gray-800 p-4 rounded-lg dark:bg-gray-900">
<ol class="list-reset flex text-sm text-white">
<li class="mr-2">
<a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
Home
</a>
<span class="text-gray-600 dark:text-gray-400">/</span>
</li>
<li class="mr-2">
<a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
Dashboard
</a>
<span class="text-gray-600 dark:text-gray-400">/</span>
</li>
<li class="mr-2">
<a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
Analytics
</a>
<span class="text-gray-600 dark:text-gray-400">/</span>
</li>
<li class="text-gray-600 dark:text-gray-400">Current Page</li>
</ol>
</nav>
<div class="p-4 bg-gray-700 rounded-lg dark:bg-gray-800 mt-4">
<h2 class="text-xl text-white font-bold">
Breadcrumb Navigation in Brutalism Style
</h2>
<p class="text-gray-400 dark:text-gray-300">
Use the breadcrumbs above to navigate through the dashboard.
</p>
<div class="mt-4">
<img class="w-full h-40 object-cover rounded" src="https://picsum.photos/800/200" alt="Dashboard Image">
</div>
<div class="mt-4">
<h3 class="text-lg text-white">Team Members</h3>
<div class="flex space-x-4 mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
</div>
</div>
</div>Componentes relacionados
Bauhaus_Music_Breadcrumb
Un sencillo componente de navegación de migas de pan inspirado en la Bauhaus para plataformas de música/audio, con tonos azules corporativos y capacidad de respuesta total con soporte para modo oscuro.
Monospace_Developer_Breadcrumb_Navigation
Un componente de navegación de migas de pan receptivo con una estética monoespaciada / de desarrollador y un esquema de color retro / vintage, diseñado para sitios de documentación y wiki. Incluye soporte para modo oscuro.
Componente de navegación de ruta de navegación
Un componente de navegación de ruta de navegación receptivo que usa Tailwind CSS con un estilo de diseño de glassmorphism. Cuenta con un fondo borroso similar al vidrio, admite temas oscuros e incluye imágenes de marcador de posición.