Компоненты Панель навигации Компонент панели навигации 47

Компонент панели навигации 47

Адаптивная панель навигации со стилем 3D-дизайна, включающая глубину и вовлеченность, поддерживающая темную тему.

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

HTML-код

<nav class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6">
    <div class="flex justify-between items-center"> 
        <div class="flex items-center">
            <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-3 shadow-md">
            <h1 class="text-xl font-bold text-gray-800 dark:text-gray-100">My Website</h1>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
            <a href="#" class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 6h14M3 10h14m-7 4h7" clip-rule="evenodd" /></svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden space-x-4">
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Home</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">About</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Services</a>
        <a href="#" class="block text-gray-800 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200">Contact</a>
    </div>
</nav>

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

3D_Corporate_Blues_Food_Restaurant_Nav

Сложная, вдохновленная 3D панель навигации для веб-сайтов ресторанов и ресторанов с корпоративным синим цветом и полной отзывчивостью с поддержкой темного режима. Включает в себя такие элементы, как логотип, навигационные ссылки, строка поиска, аватар пользователя и корзина.

Открытый

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

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

Открытый

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

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

Открытый