Components Navbar

html

typescript

<nav flowbiteNavbar>
  <a
    flowbiteNavbarBrand
    href="#">
    <span class="sr-only">Open navbar</span>
    <img
      src="https://flowbite.com/docs/images/logo.svg"
      class="h-8"
      alt="Flowbite Logo" />
    <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
      Flowbite
    </span>
  </a>
  <button flowbiteNavbarToggle>
    <flowbite-icon
      name="bars"
      class="size-5 stroke-2" />
  </button>
  <div flowbiteNavbarContent>
    <li>
      <a
        flowbiteNavbarItem
        href="#">
        Home
      </a>
    </li>
    <li>
      <a
        flowbiteNavbarItem
        href="#">
        About
      </a>
    </li>
    <li>
      <a
        flowbiteNavbarItem
        href="#">
        Services
      </a>
    </li>
    <li>
      <a
        flowbiteNavbarItem
        href="#">
        Pricing
      </a>
    </li>
    <li>
      <a
        flowbiteNavbarItem
        href="#">
        Contact
      </a>
    </li>
  </div>
</nav>

<div class="p-4">
  <div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
    @for (i of [0, 1]; track $index) {
      <div class="mb-4 grid grid-cols-3 gap-4">
        <div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
          <p class="text-2xl text-gray-400 dark:text-gray-500">
            <svg
              class="h-3.5 w-3.5"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 18 18">
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 1v16M1 9h16"></path>
            </svg>
          </p>
        </div>
        <div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
          <p class="text-2xl text-gray-400 dark:text-gray-500">
            <svg
              class="h-3.5 w-3.5"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 18 18">
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 1v16M1 9h16"></path>
            </svg>
          </p>
        </div>
        <div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
          <p class="text-2xl text-gray-400 dark:text-gray-500">
            <svg
              class="h-3.5 w-3.5"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 18 18">
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 1v16M1 9h16"></path>
            </svg>
          </p>
        </div>
      </div>
      <div
        class="mb-4 flex h-48 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
        <p class="text-2xl text-gray-400 dark:text-gray-500">
          <svg
            class="h-3.5 w-3.5"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 18 18">
            <path
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 1v16M1 9h16"></path>
          </svg>
        </p>
      </div>
    }
  </div>
</div>

Themes

{
  "host": {
    "base": "flex cursor-pointer items-center space-x-3",
    "transition": ""
  }
}

{
  "host": {
    "base": "w-full overflow-hidden max-md:order-last md:flex md:w-auto",
    "transition": "",
    "fixed": {
      "on": "",
      "off": ""
    },
    "open": {
      "on": "",
      "off": "hidden"
    }
  },
  "container": {
    "base": "mt-4 flex flex-col rounded-lg border p-4 font-medium md:mt-0 md:flex-row md:space-x-4 md:border-0 md:p-0",
    "transition": "",
    "color": {
      "default": {
        "light": "bg-gray-200 md:bg-inherit",
        "dark": "dark:bg-gray-800 dark:md:bg-inherit"
      },
      "info": {
        "light": "bg-gray-200 md:bg-inherit",
        "dark": "dark:bg-gray-800 dark:md:bg-inherit"
      },
      "failure": {
        "light": "bg-gray-200 md:bg-inherit",
        "dark": "dark:bg-gray-800 dark:md:bg-inherit"
      },
      "success": {
        "light": "bg-gray-200 md:bg-inherit",
        "dark": "dark:bg-gray-800 dark:md:bg-inherit"
      },
      "warning": {
        "light": "bg-gray-200 md:bg-inherit",
        "dark": "dark:bg-gray-800 dark:md:bg-inherit"
      },
      "primary": {
        "light": "bg-gray-200 md:bg-inherit",
        "dark": "dark:bg-gray-800 dark:md:bg-inherit"
      }
    }
  }
}

{
  "host": {
    "base": "hidden cursor-pointer items-center justify-center rounded-lg p-2 text-sm sm:inline-flex",
    "transition": "",
    "focus": "data-focus:ring-0 data-focus:outline-none data-focus-visible:ring-2 data-focus-visible:outline-none",
    "disabled": "data-disabled:cursor-not-allowed data-disabled:opacity-50",
    "size": {},
    "pill": {},
    "color": {
      "default": {
        "light": "text-gray-800 data-hover:text-gray-900",
        "dark": "dark:text-white dark:data-hover:text-gray-100"
      },
      "info": {
        "light": "text-gray-800 data-hover:text-blue-900",
        "dark": "dark:text-white dark:data-hover:text-blue-100"
      },
      "failure": {
        "light": "text-gray-800 data-hover:text-red-900",
        "dark": "dark:text-white dark:data-hover:text-red-100"
      },
      "success": {
        "light": "text-gray-800 data-hover:text-green-900",
        "dark": "dark:text-white dark:data-hover:text-green-100"
      },
      "warning": {
        "light": "text-gray-800 data-hover:text-yellow-900",
        "dark": "dark:text-white dark:data-hover:text-yellow-100"
      },
      "primary": {
        "light": "data-hover:text-primary-900 text-gray-800",
        "dark": "dark:data-hover:text-primary-100 dark:text-white"
      }
    },
    "colorOutline": {}
  }
}

{
  "host": {
    "base": "m-0 block cursor-pointer rounded-sm px-3 py-2",
    "transition": "",
    "focus": "data-focus:ring-0 data-focus:outline-none data-focus-visible:ring-2 data-focus-visible:outline-none",
    "disabled": "data-disabled:cursor-not-allowed data-disabled:opacity-50",
    "size": {},
    "pill": {},
    "color": {
      "default": {
        "light": "text-gray-800 data-hover:text-gray-900",
        "dark": "dark:text-white dark:data-hover:text-gray-100"
      },
      "info": {
        "light": "text-gray-800 data-hover:text-blue-900",
        "dark": "dark:text-white dark:data-hover:text-blue-100"
      },
      "failure": {
        "light": "text-gray-800 data-hover:text-red-900",
        "dark": "dark:text-white dark:data-hover:text-red-100"
      },
      "success": {
        "light": "text-gray-800 data-hover:text-green-900",
        "dark": "dark:text-white dark:data-hover:text-green-100"
      },
      "warning": {
        "light": "text-gray-800 data-hover:text-yellow-900",
        "dark": "dark:text-white dark:data-hover:text-yellow-100"
      },
      "primary": {
        "light": "data-hover:text-primary-900 text-gray-800",
        "dark": "dark:data-hover:text-primary-100 dark:text-white"
      }
    },
    "colorOutline": {}
  }
}

{
  "host": {
    "base": "",
    "transition": "",
    "fixed": {
      "on": "fixed start-0 top-0 z-20 w-full border-b",
      "off": ""
    },
    "color": {
      "default": {
        "light": "border-gray-200 bg-gray-100",
        "dark": "dark:border-gray-800 dark:bg-gray-900"
      },
      "info": {
        "light": "border-blue-200 bg-gray-100",
        "dark": "dark:border-blue-800 dark:bg-gray-900"
      },
      "failure": {
        "light": "border-red-200 bg-gray-100",
        "dark": "dark:border-red-800 dark:bg-gray-900"
      },
      "success": {
        "light": "border-green-200 bg-gray-100",
        "dark": "dark:border-green-800 dark:bg-gray-900"
      },
      "warning": {
        "light": "border-yellow-200 bg-gray-100",
        "dark": "dark:border-yellow-800 dark:bg-gray-900"
      },
      "primary": {
        "light": "border-primary-200 bg-gray-100",
        "dark": "dark:border-primary-800 dark:bg-gray-900"
      }
    }
  },
  "container": {
    "base": "mx-auto flex max-w-screen flex-wrap items-center justify-between p-4",
    "transition": ""
  }
}

{
  "host": {
    "base": "inline-flex cursor-pointer items-center justify-center rounded-lg p-2 text-sm md:hidden",
    "transition": "",
    "focus": "data-focus:ring-0 data-focus:outline-none data-focus-visible:ring-2 data-focus-visible:outline-none",
    "disabled": "data-disabled:cursor-not-allowed data-disabled:opacity-50",
    "size": {},
    "pill": {},
    "color": {
      "default": {
        "light": "text-gray-900",
        "dark": "dark:text-gray-100"
      },
      "info": {
        "light": "text-blue-900",
        "dark": "dark:text-blue-100"
      },
      "failure": {
        "light": "text-red-900",
        "dark": "dark:text-red-100"
      },
      "success": {
        "light": "text-green-900",
        "dark": "dark:text-green-100"
      },
      "warning": {
        "light": "text-yellow-900",
        "dark": "dark:text-yellow-100"
      },
      "primary": {
        "light": "text-primary-900",
        "dark": "dark:text-primary-100"
      }
    },
    "colorOutline": {}
  }
}

Navbar

Default Navbar

Themes

Navbar brand

Navbar content

Navbar icon item

Navbar item

Navbar

Navbar toggle