Navigations Components

<section class="py-8 px-4 lg:px-10 bg-gray-800">
  <nav class="relative flex justify-between items-center">
    <a class="text-2xl text-white font-bold" href="#">
      <img class="h-7" src="zospace-assets/logos/zospace-logo.svg" alt="" width="auto">
    </a>
    <button class="p-2 navbar-burger">
      <svg class="w-10 h-3" width="39" height="13" viewbox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="39" height="2" rx="1" fill="#C4C4C4"></rect><rect x="19" y="11" width="20" height="2" rx="1" fill="#C4C4C4"></rect></svg>
    </button>
  </nav>
  <div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative flex flex-col py-8 h-full w-full bg-white overflow-y-auto">
      <div class="flex items-center mb-16 pr-6">
        <a class="ml-10 text-2xl text-gray-800 font-bold" href="#">
          <img class="h-7" src="zospace-assets/logos/zospace-dark-logo.svg" alt="" width="auto">
        </a>
      </div>
      <div>
        <ul>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Product</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Story</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Features</a></li>
          <li class="mb-1 px-10"><a class="block pl-8 py-4 text-xl text-gray-800 hover:bg-blueGray-50 rounded-xl" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="mt-auto px-10">
        <div class="pt-6"><a class="block mb-4 py-4 px-12 text-gray-800 text-center font-bold border border-gray-50 hover:border-gray-100 rounded-full" href="#">Sign in</a><a class="block py-4 px-12 text-white text-center font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Sign up</a></div>
        <p class="mt-6 mb-4 text-lg text-center">
          <span>2021 &copy; Zospace. All rights reserved.</span>
        </p>
      </div>
    </nav>
  </div>
</section>

Redirecting to PayPal

Flex

Zospace

Artemis

Yofte

Navigations Components

Framework

UI Library

Components

Component #1

Navigations Components by Shuffle

Component #2

This component is only available to registered users.

Component #3

This component is only available to registered users.

Component #4

This component is only available to registered users.

Component #5

This component is only available to registered users.

Component #6

This component is only available to registered users.

Component #7

This component is only available to registered users.

Component #8

This component is only available to registered users.

Component #9

This component is only available to registered users.

Component #10

This component is only available to registered users.

The easiest way to create beautiful templates

Annual

Monthly

Create an account

Beautiful UI libraries

Flexible solution

Constant update

No limits

Plugin support

Products

UI Components

Company

Legal