Компонент навигации по цепочке навигации
Адаптивный навигационный компонент навигационной цепочки, разработанный в стиле Glassmorphism и цветов Earth ton, идеально подходит для профессиональных веб-сайтов компаний. Он поддерживает темную тему и включает в себя интерактивные функции для навигации.
HTML-код
<nav class="bg-opacity-50 backdrop-blur-lg bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg">
<ol class="list-reset flex items-center space-x-4 text-gray-600 dark:text-gray-300">
<li>
<a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Home</a>
</li>
<li>
<span class="text-gray-400 dark:text-gray-500">/</span>
</li>
<li>
<a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Services</a>
</li>
<li>
<span class="text-gray-400 dark:text-gray-500">/</span>
</li>
<li>
<a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Consulting</a>
</li>
</ol>
</nav>
<!-- Example of how to display user avatars or images in a Breadcrumb if needed -->
<div class="flex items-center space-x-3 mt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
<span class="text-gray-600 dark:text-gray-300">John Doe</span>
</div>Связанные компоненты
Хлебная крошка стекломорфизма
Адаптивная навигационная цепочка Glassmorphism с темным режимом.
Компонент навигации по цепочке навигации
Компонент навигации в цепочке навигации со скевоморфизмом, монохроматической цветовой схемой и простой сложностью для приборной панели, с темной темой
Компонент навигации по цепочке навигации
Отзывчивый навигационный компонент навигационной цепочки, выполненный в бруталистском стиле с яркой цветовой гаммой для информационных панелей, с поддержкой темного режима.