Компоненты Навигация по навигационной цепочке Компонент навигации по цепочке навигации

Компонент навигации по цепочке навигации

Адаптивный навигационный компонент Breadcrumb, разработанный в стиле Neumorphism с использованием Tailwind CSS, с поддержкой темной темы.

Предварительный просмотр

HTML-код

<nav class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6 max-w-4xl mx-auto">
    <ol class="list-reset flex text-gray-700 dark:text-gray-300">
        <li>
            <a href="#" class="text-blue-500 hover:text-blue-700">Home</a>
        </li>
        <li>
            <span class="mx-2">/</span>
        </li>
        <li>
            <a href="#" class="text-blue-500 hover:text-blue-700">Library</a>
        </li>
        <li>
            <span class="mx-2">/</span>
        </li>
        <li>
            <a href="#" class="text-blue-500 hover:text-blue-700">Data</a>
        </li>
    </ol>
</nav>

<style>
    /* Neumorphism styles */
    nav {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1),
                    -8px -8px 15px rgba(255, 255, 255, 0.7);
    }
    nav.dark {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5),
                    -8px -8px 15px rgba(0, 0, 0, 0.2);
    }
</style>

Связанные компоненты

Бруталистский компонент навигации по навигационной цепочке

Бруталистский навигационный компонент Breadcrumb для портфолио с яркой цветовой схемой и сложным макетом, с адаптивным дизайном и поддержкой темного режима.

Открытый

Bauhaus_Music_Breadcrumb

Простой навигационный компонент в стиле Баухаус для музыкальных/аудиоплатформ с фирменными синими тонами и полной отзывчивостью с поддержкой темного режима.

Открытый

Компонент навигации по цепочке навигации

Адаптивный компонент навигации по хлебной цепочке, использующий Tailwind CSS со стилем дизайна glassmorphism. Имеет размытый фон, похожий на стекло, поддерживает темную тему и включает замещающие изображения.

Открытый