Компонент навигации по цепочке навигации
Навигационный компонент с ретро/винтажным дизайном, яркой цветовой схемой и простым уровнем сложности, для блога/контента.
HTML-код
<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="text-sm font-medium text-purple-700 hover:text-purple-900 dark:text-purple-400 dark:hover:text-white">
Home
</a>
</li>
<li>
<div class="flex items-center">
<svg class="w-4 h-4 text-purple-500" 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 10l-3.293-3.293a1 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="ml-1 text-sm font-medium text-purple-700 hover:text-purple-900 md:ml-2 dark:text-purple-400 dark:hover:text-white">Articles</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg class="w-4 h-4 text-purple-500" 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 10l-3.293-3.293a1 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="ml-1 text-sm font-medium text-purple-500 md:ml-2 dark:text-gray-500">This Article</span>
</div>
</li>
</ol>
</nav>Связанные компоненты
Компонент навигации по цепочке навигации
Компонент навигации в цепочке навигации со скевоморфизмом, монохроматической цветовой схемой и простой сложностью для приборной панели, с темной темой
Компонент навигации по навигационной цепочке Neumorphism
Компонент навигации по навигационной цепочке Neumorphism для блогов/контента с поддержкой темного режима
Компонент навигации по цепочке навигации
Адаптивный компонент навигации по хлебной цепочке, использующий Tailwind CSS со стилем дизайна glassmorphism. Имеет размытый фон, похожий на стекло, поддерживает темную тему и включает замещающие изображения.