SvelteKit Responsive Navbar Menu with Tailwind CSS Example
Tags: svelte, sveltekit, tailwindcss, webdev
Published: 2022-09-13 07:07:34

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](https://larainfo.com/blogs/sveltekit-responsive-navbar-menu-with-tailwind-css-example)

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](https://larainfo.com/blogs/install-tailwind-css-in-sveltekit-vite-typescript)
[Install Skeleton Svelte UI with Tailwind CSS in Svelte + SvelteKit](https://larainfo.com/blogs/install-skeleton-svelte-ui-with-tailwind-css-in-svelte-sveltekit)

### Example 1

SvelteKit responsive navbar menu with tailwind css.
```html
<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>
```
![create responsive navbar in sveltekit with tailwind css](https://demo.larainfo.com/screenshot/sveltekit/sveltekit-responsive-navbar-1.png)

### Example 2
SvelteKit responsive hamburger menu with tailwind css login and sign up button.
```html
<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>
```
![login and signup navigation menu in sveltekit with tailwind css](https://demo.larainfo.com/screenshot/sveltekit/sveltekit-responsive-navbar-with-login-signup.png)

### Example 3
SvelteKit navbar menu with search using tailwind css.
```html
<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>
```
![sveltekit navbar menu with search using tailwind css](https://demo.larainfo.com/screenshot/sveltekit/sveltekit-responsive-navbar-with-search.png)