Header

Overview

The header is a collection of components that include navigational links and utilities and is shared by all pages within the website. It is a global and persistent feature that is used to show users they are on the TalkJS website and to help them find what they need.

Default

Open main menu

• Product
• Solutions
• Docs
• Demos
• Pricing
• Company

Sign in Try for free

<header className="header flex flex-wrap items-center justify-between">
  {/* TalkJS logo */}
  <div className="logo flex-none">
    <a href="/">
      <img src="/talkjs-logo.svg" width={44} className="mr-4 hover:opacity-60 ease-in-out duration-200" />
    </a>
  </div>
  {/* Main nav */}
  <button data-collapse-toggle="mobile-menu" type="button" className="inline-block items-center p-3 text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-600 ease-in-out duration-200" aria-controls="mobile-menu" aria-expanded="false">
    <span className="sr-only">Open main menu</span>
    <Icon.Menu color="var(--accent-9)" size={24} /> 
  </button>
  <div className="main-menu flex flex-wrap items-center sm:hidden lg:flex" id="mobile-menu">
    <ul className="list-none font-medium m-0 flex flex-col lg:flex-row gap-x-6">
      <li>
        <a href="#" className="dropdown">Product</a>
      </li>
      <li>
        <a href="#" className="dropdown">Solutions</a>
      </li>
      <li>
        <a href="#" className="dropdown">Docs</a>
      </li>
      <li>
        <a href="#" className="dropdown">Demos</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
      <li>
        <a href="#" className="dropdown">Company</a>
      </li>
    </ul>
    {/* CTA buttons */}
    <div className="header-actions flex gap-x-2 ml-8">
      <a href="#" className="px-4 py-3 font-semibold rounded-xl bg-blue-200 !text-blue-500 text-base hover:text-blue-500 dark:hover:text-blue-500 hover:shadow-3xl hover:shadow-blue-200 ease-in-out duration-200">Sign in</a>
      <a href="#" className="px-4 py-3 font-semibold rounded-xl bg-blue-500 !text-white text-base hover:text-white hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200">Try for free</a>
    </div>
  </div>
</header>