DEV Community 👩‍💻👨‍💻

Cover image for SvelteKit Responsive Navbar Menu with Tailwind CSS Example
larainfo
larainfo

Posted on • Originally published at larainfo.com

SvelteKit Responsive Navbar Menu with Tailwind CSS Example

In this tutorial, we will create responsive navbar menu in SvelteKit using tailwind css. We will see navbar with hamburger menu with SvelteKit, sveltekit tailwind navbar component, navbar with sign in and signup examples with Tailwind CSS & SvelteKit. You can also use this code in svelte.

Tool Use

SvelteKit / Svelte
Tailwind CSS 3.v
Heroicons Icon
view

First you need to setup react project with tailwind css. You can install manually or you read below blog.
Install Tailwind CSS in Sveltekit + Vite + Typescript
Install Skeleton Svelte UI with Tailwind CSS in Svelte + SvelteKit

Example 1

SvelteKit responsive navbar menu with tailwind css.

<script>
  let showMenu = false;

  function toggleNavbar() {
    showMenu = !showMenu;
  }
</script>

<div>
  <div>
    <nav
      class="container px-6 py-8 mx-auto md:flex md:justify-between md:items-center"
    >
      <div class="flex items-center justify-between">
        <a
          class="text-xl font-bold text-gray-800 md:text-2xl hover:text-blue-400"
          href="/home"
          >Logo
        </a>
        <!-- Mobile menu button -->
        <div on:click={toggleNavbar} class="flex md:hidden">
          <button
            type="button"
            class="text-gray-800 hover:text-gray-400 focus:outline-none focus:text-gray-400"
          >
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
          </button>
        </div>
      </div>

      <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
      <div
        class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0 {showMenu
          ? 'flex'
          : 'hidden'}"
      >
        <a class="text-gray-800 hover:text-blue-400" href="/home">Home</a>
        <a class="text-gray-800 hover:text-blue-400" href="/blog">Blogs</a>
        <a class="text-gray-800 hover:text-blue-400" href="/contact">Contact US</a>
        <a class="text-gray-800 hover:text-blue-400" href="/about">About Us</a>
      </div>
    </nav>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

create responsive navbar in sveltekit with tailwind css

Example 2

SvelteKit responsive hamburger menu with tailwind css login and sign up button.

<script>
  let showMenu = false;

  function toggleNavbar() {
    showMenu = !showMenu;
  }
</script>

<div>
  <div class="bg-gray-800">
    <nav
      class="container px-6 py-8 mx-auto md:flex md:justify-between md:items-center"
    >
      <div class="flex items-center justify-between">
        <a
          class="text-xl font-bold text-gray-100 md:text-2xl hover:text-blue-400"
          href="/home"
          >Logo
        </a>
        <!-- Mobile menu button -->
        <div on:click={toggleNavbar} class="flex md:hidden">
          <button
            type="button"
            class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-6 h-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
              />
            </svg>
          </button>
        </div>
      </div>

      <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
      <div
        class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0 {showMenu
          ? 'flex'
          : 'hidden'}"
      >
        <a class="text-gray-100 hover:text-blue-400" href="/home">Home</a>
        <a class="text-gray-100 hover:text-blue-400" href="/blog">Blogs</a>
        <a class="text-gray-100 hover:text-blue-400" href="/contact"
          >Contact US</a
        >
        <a class="text-gray-100 hover:text-blue-400" href="/about">About Us</a>
        <div class="space-y-2">
          <a
            href="/login"
            class="py-3 px-4 text-center border text-gray-800 bg-white hover:text-indigo-600 rounded-md block lg:inline lg:border-0"
          >
            Login
          </a>
          <a
            href="/signup"
            class="py-3 px-4 text-center text-white bg-indigo-600 hover:bg-indigo-700 rounded-md shadow block lg:inline"
          >
            Sign Up
          </a>
        </div>
      </div>
    </nav>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

login and signup navigation menu in sveltekit with tailwind css

Example 3

SvelteKit navbar menu with search using tailwind css.

<script>
  let showMenu = false;

  function toggleNavbar() {
    showMenu = !showMenu;
  }
</script>

<div>
  <div>
    <nav
      class="container px-6 py-8 mx-auto md:flex md:justify-between md:items-center"
    >
      <div class="flex items-center justify-between">
        <a
          class="text-xl font-bold text-gray-800 md:text-2xl hover:text-blue-400"
          href="/home"
          >Logo
        </a>
        <!-- Mobile menu button -->
        <div on:click={toggleNavbar} class="flex md:hidden">
          <button
            type="button"
            class="text-gray-800 hover:text-gray-400 focus:outline-none focus:text-gray-400"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-6 h-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
              />
            </svg>
          </button>
        </div>
      </div>

      <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
      <div
        class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0 {showMenu
          ? 'flex'
          : 'hidden'}"
      >
        <a class="text-gray-800 hover:text-blue-400" href="/home">Home</a>
        <a class="text-gray-800 hover:text-blue-400" href="/blog">Blogs</a>
        <a class="text-gray-800 hover:text-blue-400" href="/contact"
          >Contact US</a
        >
        <a class="text-gray-800 hover:text-blue-400" href="/about">About Us</a>

        <form class="flex items-center space-x-2 border-2 border-blue-600 rounded-full p-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-6 h-6 text-gray-800"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
            />
          </svg>

          <input
            class="w-full outline-none placeholder-gray-800 text-gray-800"
            type="text"
            placeholder="Search"
          />
        </form>
      </div>
    </nav>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

sveltekit navbar menu with search using tailwind css

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠