Компонент навигации по цепочке навигации
Адаптивный компонент навигации по хлебной цепочке, использующий Tailwind CSS со стилем дизайна glassmorphism. Имеет размытый фон, похожий на стекло, поддерживает темную тему и включает замещающие изображения.
HTML-код
<div class="bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg p-4 mb-6">
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
<a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">
<img src="https://picsum.photos/20/20?random=1" alt="Home" class="w-5 h-5 rounded-full mr-2">
Home
</a>
</li>
<li>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
</svg>
<a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">Category</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
</svg>
<a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">Subcategory</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
</svg>
<span class="ml-1 text-sm font-medium text-gray-700 dark:text-gray-200">Current Page</span>
</div>
</li>
</ol>
</nav>
</div>Связанные компоненты
Компонент навигации по цепочке навигации
Навигационный компонент с ретро/винтажным дизайном, яркой цветовой схемой и простым уровнем сложности, для блога/контента.
Компонент навигации по цепочке навигации
Компонент навигации в цепочке навигации со скевоморфизмом, отзывчивыми эффектами и поддержкой темных тем.
Компонент навигации по цепочке навигации
Адаптивный навигационный компонент с навигационной цепочкой, выполненный в минималистичном плоском стиле, подходит для блогов и потребления контента. Он включает интерактивные элементы для удобной навигации и поддерживает темный режим.