Application toolkit - Navbar

Documentation and examples for Preline UI's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more.

Basic

A basic form of the navbar.

Open this basic navbar example in new window
Copy basic navbar code 
<header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white text-sm py-4 dark:bg-gray-800">
  <nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
    <a class="flex-none text-xl font-semibold dark:text-white" href="#">HS2 Application</a>
    <div class="flex flex-row items-center gap-5 mt-5 sm:justify-end sm:mt-0 sm:pl-5">
      <a class="font-medium text-blue-500" href="#" aria-current="page">Landing</a>
      <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Account</a>
      <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Work</a>
      <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Blog</a>
    </div>
  </nav>
</header>
Close basic navbar code

With horizontal scroll

Here's an example of a navbar that is horizontally scrollable at the sm (small) breakpoint.

Open this with horizontal scroll navbar example in new window
Copy with horizontal scroll navbar code 
<header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white text-sm py-4 dark:bg-gray-800">
  <nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
    <a class="flex-none text-xl font-semibold dark:text-white" href="#">HS2 Application</a>
    <div class="flex flex-row items-center gap-5 mt-5 pb-2 overflow-x-auto sm:justify-end sm:mt-0 sm:pl-5 sm:pb-0 sm:overflow-x-visible">
      <a class="font-medium text-blue-500" href="#" aria-current="page">Landing</a>
      <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Link</a>
      <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Link</a>
      <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Link</a>
      <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Link</a>
      <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Link</a>
      <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Link</a>
      <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Link</a>
      <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Link</a>
      <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Link</a>
    </div>
  </nav>
</header>
Close with horizontal scroll navbar code

With collapse

Group and hide navbar contents by a parent breakpoint.

Here's an example of a navbar that automatically collapses at the sm (small) breakpoint.

Open this with collapse navbar example in new window
Copy with collapse navbar code 
<header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white text-sm py-4 dark:bg-gray-800">
  <nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
    <div class="flex items-center justify-between">
      <a class="flex-none text-xl font-semibold dark:text-white" href="#">HS2 Application</a>
      <div class="sm:hidden">
        <button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" data-hs-collapse="#navbar-with-collapse" aria-controls="navbar-with-collapse" aria-label="Toggle navigation">
          <svg class="hs-collapse-open:hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
          </svg>
          <svg class="hs-collapse-open:block hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
          </svg>
        </button>
      </div>
    </div>
    <div id="navbar-with-collapse" class="hidden basis-full grow sm:block">
      <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
        <a class="font-medium text-blue-500" href="#" aria-current="page">Landing</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Account</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Work</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Blog</a>
      </div>
    </div>
  </nav>
</header>
Close with collapse navbar code

Collapse with animation

Open this collapse with animation navbar example in new window
Copy collapse with animation navbar code 
<header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white text-sm py-4 dark:bg-gray-800">
  <nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
    <div class="flex items-center justify-between">
      <a class="flex-none text-xl font-semibold dark:text-white" href="#">HS2 Application</a>
      <div class="sm:hidden">
        <button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" data-hs-collapse="#navbar-collapse-with-animation" aria-controls="navbar-collapse-with-animation" aria-label="Toggle navigation">
          <svg class="hs-collapse-open:hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
          </svg>
          <svg class="hs-collapse-open:block hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
          </svg>
        </button>
      </div>
    </div>
    <div id="navbar-collapse-with-animation" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
      <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
        <a class="font-medium text-blue-500" href="#" aria-current="page">Landing</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Account</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Work</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Blog</a>
      </div>
    </div>
  </nav>
</header>
Close collapse with animation navbar code

SVG

You can replace the text within the navbar with an <svg>.

Open this svg navbar example in new window
Copy svg navbar code 
<header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white text-sm py-4 dark:bg-gray-800">
  <nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
    <div class="flex items-center justify-between">
      <a class="flex-none" href="#">
        <svg width="68px" height="25px" viewBox="0 0 68 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>hs2-logo</title>
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="hs2-logo" fill="#1E3773" fill-rule="nonzero">
              <path d="M21.9359377,0.685756649 L21.9359377,9.89250301 L5.01272282,9.89250301 L5.01272282,0.685756649 C5.01272282,0.423964415 4.79936558,0.21314058 4.53442747,0.21314058 L0.478295349,0.21314058 C0.213357239,0.21314058 0,0.423964415 0,0.685756649 L0,24.2146233 C0,24.4764155 0.213357239,24.6872394 0.478295349,24.6872394 L4.53442747,24.6872394 C4.79936558,24.6872394 5.01272282,24.4764155 5.01272282,24.2146233 L5.01272282,14.8480215 L21.9359377,14.8480215 L21.9359377,24.2146233 C21.9359377,24.4764155 22.1492949,24.6872394 22.414233,24.6872394 L26.4703651,24.6872394 C26.7353032,24.6872394 26.9486605,24.4764155 26.9486605,24.2146233 L26.9486605,0.685756649 C26.9486605,0.423964415 26.7353032,0.21314058 26.4703651,0.21314058 L22.414233,0.21314058 C22.1492949,0.21314058 21.9359377,0.423964415 21.9359377,0.685756649 Z" id="Path"></path>
              <path d="M54.0356515,6.64210917 L52.1201255,3.13455657 C52.0146192,2.9422667 52.0591663,2.70595867 52.2209427,2.55768696 C52.6500017,2.16152349 53.1517429,1.79084422 53.7074096,1.4479659 C54.3849947,1.03095172 55.1751198,0.681123158 56.0519946,0.410063942 C56.9359032,0.136687981 57.9557977,1.02884165e-16 59.0858877,1.02884165e-16 C60.3566528,1.02884165e-16 61.5195669,0.194606617 62.541806,0.576869614 C63.5687343,0.961449356 64.4549874,1.51051802 65.174775,2.20554166 C65.8969072,2.90288203 66.4596076,3.75312761 66.8441196,4.72847743 C67.2286315,5.70151052 67.4232321,6.78111389 67.4232321,7.94180335 C67.4232321,8.69937911 67.3317933,9.40830322 67.1489156,10.0523584 C66.9683826,10.6940969 66.717512,11.3057177 66.4033376,11.8733204 C66.0915078,12.4386062 65.7163742,12.9899917 65.2896597,13.5158929 C64.869979,14.0325271 64.4080957,14.5514781 63.920422,15.0634788 L59.3508258,19.812807 L67.5217047,19.812807 C67.7866428,19.812807 68,20.0236308 68,20.285423 L68,24.2192568 C68,24.481049 67.7866428,24.6918729 67.5217047,24.6918729 L52.2209427,24.6918729 C51.9560046,24.6918729 51.7426473,24.481049 51.7426473,24.2192568 L51.7426473,21.0522658 C51.7426473,20.8275415 51.8317415,20.6097674 51.9888287,20.4475952 L60.2065993,12.040126 C60.8255698,11.421555 61.2968314,10.7914002 61.6086612,10.1635622 C61.9134572,9.54962469 62.0681998,8.88703549 62.0681998,8.19201186 C62.0681998,7.7147623 61.9884839,7.27689741 61.8290522,6.88536744 C61.6696204,6.4961542 61.4445402,6.15327588 61.1585008,5.86831619 C60.8724615,5.5833565 60.5231183,5.35863219 60.1198497,5.2010935 C59.7118919,5.04123807 59.2500086,4.96015198 58.7482674,4.96015198 C58.2160466,4.96015198 57.7307175,5.0273376 57.3063476,5.15707534 C56.874944,5.28912983 56.4740199,5.46983597 56.1152984,5.69224354 C55.7518877,5.91696784 55.4189567,6.19034381 55.1000931,6.48225373 C54.9852084,6.58650727 54.8773575,6.68149384 54.7741958,6.76953016 C54.5420819,6.96877027 54.1833603,6.90621814 54.0379961,6.63979242 L54.0356515,6.64210917 Z" id="Path"></path>
              <path d="M48.7814364,14.2294505 C48.3969245,13.4440738 47.8647037,12.7652674 47.1988415,12.2115652 C46.5400131,11.66713 45.7545771,11.2199981 44.8636348,10.8863868 C43.9844154,10.557409 43.0278247,10.302567 42.0173086,10.1334445 L40.7559218,9.91567047 C40.0970934,9.80446669 39.4828121,9.67936243 38.9271455,9.54035771 C38.3855463,9.40598647 37.9142847,9.2391808 37.5250836,9.04689093 C37.1569838,8.86618478 36.8685998,8.64146048 36.6693101,8.37966824 C36.4817433,8.13640997 36.3903045,7.8421833 36.3903045,7.48308776 C36.3903045,7.08924103 36.4793987,6.7509962 36.6646209,6.44981929 C36.8521877,6.14169215 37.1194704,5.87758317 37.4570906,5.6598091 C37.8064338,5.43508479 38.2331483,5.26132889 38.720822,5.14085812 C39.217874,5.01807061 39.7758853,4.95551849 40.376099,4.95551849 C41.5601145,4.95551849 42.676137,5.14317487 43.6936869,5.51153739 C44.6408992,5.85441572 45.5294969,6.28764711 46.3477571,6.79038087 C46.3477571,6.79038087 46.3501017,6.78806413 46.3501017,6.78574738 C46.427473,6.83439904 46.5189118,6.86219998 46.6173844,6.86219998 C46.8143296,6.86219998 46.9854843,6.74867946 47.0675447,6.58650727 C47.0675447,6.58650727 47.0675447,6.58650727 47.0675447,6.58650727 L48.9549357,3.14382356 C48.9549357,3.14382356 48.9549357,3.14382356 48.9549357,3.14382356 C48.9994828,3.0696877 49.0252732,2.98396812 49.0252732,2.8912983 C49.0252732,2.70827541 48.9244561,2.55073673 48.7767472,2.4627004 C48.1249526,2.06422018 47.4731579,1.70975813 46.8377754,1.41321472 C46.1437782,1.08887035 45.4357135,0.820127884 44.7346826,0.616254286 C44.0359963,0.412380688 43.3091749,0.259475489 42.5753198,0.162172181 C41.8438093,0.0648688722 41.0700962,0.0162172181 40.2776265,0.0162172181 C39.0678206,0.0162172181 37.9002172,0.180706144 36.805296,0.50736725 C35.7056856,0.834028357 34.7233045,1.32517839 33.8862876,1.96691688 C33.042237,2.61328885 32.3599628,3.43341674 31.8605661,4.40413307 C31.3564804,5.38179965 31.1009206,6.51932166 31.1009206,7.78658141 C31.1009206,8.89166898 31.2814536,9.78361598 31.6378306,10.5921601 C31.9942075,11.403021 32.4959487,12.0980447 33.1313312,12.6563803 C33.75968,13.2077657 34.5099472,13.6595311 35.3657208,13.9954592 C36.2074268,14.3267538 37.1405717,14.579279 38.1463986,14.7507182 L39.562528,14.9870262 C40.3292073,15.1190807 41.0114816,15.2627189 41.5882495,15.4109906 C42.1556391,15.5569456 42.6339344,15.7307015 43.0114126,15.9276249 C43.3677895,16.1129645 43.6350722,16.3330553 43.8085715,16.5855806 C43.9750371,16.8265221 44.0570975,17.1902511 44.0570975,17.5308127 C44.0570975,17.9339264 43.9633141,18.274488 43.7710582,18.5733482 C43.5717684,18.883792 43.2927628,19.1525345 42.9363859,19.3749421 C42.5706306,19.6042999 42.1298486,19.7780558 41.6257629,19.8938931 C41.1122987,20.0120471 40.5519429,20.0722825 39.9564183,20.0722825 C39.2553874,20.0722825 38.5660794,20.0027801 37.907251,19.8684089 C37.2437334,19.7317209 36.6083509,19.548698 36.01986,19.3262904 C35.4313692,19.1015661 34.8780471,18.8374571 34.3739613,18.538597 C33.9495914,18.2883885 33.5650795,18.0242795 33.2227701,17.755537 C33.2227701,17.755537 33.2227701,17.7578538 33.2227701,17.7601705 C33.0234803,17.6049486 32.7350964,17.6142155 32.5498742,17.7972384 C32.5240837,17.8227226 32.5029825,17.8482068 32.4842258,17.8760078 C32.4842258,17.8760078 32.4842258,17.8760078 32.4842258,17.8760078 L30.381133,21.3210082 C30.381133,21.3210082 30.381133,21.3210082 30.381133,21.3210082 C30.2639037,21.5132981 30.2873496,21.7681401 30.4561597,21.932629 C30.4842947,21.96043 30.5124297,21.9812807 30.5452539,22.0021314 C31.1079543,22.4562135 31.731614,22.8709109 32.409199,23.225373 C33.1594663,23.6192197 33.9566252,23.9505143 34.7795745,24.2123066 C35.6001793,24.4740988 36.460642,24.6710221 37.3304831,24.8030766 C38.2003241,24.9328144 39.0771989,25 39.935317,25 C41.1545013,25 42.3408613,24.8378278 43.4592284,24.5181169 C44.5869738,24.1960893 45.5974899,23.7026226 46.4649864,23.0516171 C47.3395166,22.3936614 48.0475813,21.5573163 48.5657346,20.5634325 C49.0862325,19.5625985 49.348826,18.3741081 49.348826,17.028079 C49.348826,15.9646928 49.1542254,15.0240942 48.7673689,14.2317672 L48.7814364,14.2294505 Z" id="Path"></path>
            </g>
          </g>
        </svg>
      </a>
      <div class="sm:hidden">
        <button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" data-hs-collapse="#navbar-image-1" aria-controls="navbar-image-1" aria-label="Toggle navigation">
          <svg class="hs-collapse-open:hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
          </svg>
          <svg class="hs-collapse-open:block hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
          </svg>
        </button>
      </div>
    </div>
    <div id="navbar-image-1" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
      <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
        <a class="font-medium text-blue-500" href="#" aria-current="page">Landing</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Account</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Work</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Blog</a>
      </div>
    </div>
  </nav>
</header>
Close svg navbar code

SVG and text

You can also make use of some additional utilities to add an svg and text at the same time.

Open this svg and text navbar example in new window
Copy svg and text navbar code 
<header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white text-sm py-4 dark:bg-gray-800">
  <nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
    <div class="flex items-center justify-between">
      <a class="inline-flex items-center gap-x-2 text-xl font-semibold dark:text-white" href="#">
        <svg width="68px" height="25px" viewBox="0 0 68 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>hs2-logo</title>
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="hs2-logo" fill="#1E3773" fill-rule="nonzero">
              <path d="M21.9359377,0.685756649 L21.9359377,9.89250301 L5.01272282,9.89250301 L5.01272282,0.685756649 C5.01272282,0.423964415 4.79936558,0.21314058 4.53442747,0.21314058 L0.478295349,0.21314058 C0.213357239,0.21314058 0,0.423964415 0,0.685756649 L0,24.2146233 C0,24.4764155 0.213357239,24.6872394 0.478295349,24.6872394 L4.53442747,24.6872394 C4.79936558,24.6872394 5.01272282,24.4764155 5.01272282,24.2146233 L5.01272282,14.8480215 L21.9359377,14.8480215 L21.9359377,24.2146233 C21.9359377,24.4764155 22.1492949,24.6872394 22.414233,24.6872394 L26.4703651,24.6872394 C26.7353032,24.6872394 26.9486605,24.4764155 26.9486605,24.2146233 L26.9486605,0.685756649 C26.9486605,0.423964415 26.7353032,0.21314058 26.4703651,0.21314058 L22.414233,0.21314058 C22.1492949,0.21314058 21.9359377,0.423964415 21.9359377,0.685756649 Z" id="Path"></path>
              <path d="M54.0356515,6.64210917 L52.1201255,3.13455657 C52.0146192,2.9422667 52.0591663,2.70595867 52.2209427,2.55768696 C52.6500017,2.16152349 53.1517429,1.79084422 53.7074096,1.4479659 C54.3849947,1.03095172 55.1751198,0.681123158 56.0519946,0.410063942 C56.9359032,0.136687981 57.9557977,1.02884165e-16 59.0858877,1.02884165e-16 C60.3566528,1.02884165e-16 61.5195669,0.194606617 62.541806,0.576869614 C63.5687343,0.961449356 64.4549874,1.51051802 65.174775,2.20554166 C65.8969072,2.90288203 66.4596076,3.75312761 66.8441196,4.72847743 C67.2286315,5.70151052 67.4232321,6.78111389 67.4232321,7.94180335 C67.4232321,8.69937911 67.3317933,9.40830322 67.1489156,10.0523584 C66.9683826,10.6940969 66.717512,11.3057177 66.4033376,11.8733204 C66.0915078,12.4386062 65.7163742,12.9899917 65.2896597,13.5158929 C64.869979,14.0325271 64.4080957,14.5514781 63.920422,15.0634788 L59.3508258,19.812807 L67.5217047,19.812807 C67.7866428,19.812807 68,20.0236308 68,20.285423 L68,24.2192568 C68,24.481049 67.7866428,24.6918729 67.5217047,24.6918729 L52.2209427,24.6918729 C51.9560046,24.6918729 51.7426473,24.481049 51.7426473,24.2192568 L51.7426473,21.0522658 C51.7426473,20.8275415 51.8317415,20.6097674 51.9888287,20.4475952 L60.2065993,12.040126 C60.8255698,11.421555 61.2968314,10.7914002 61.6086612,10.1635622 C61.9134572,9.54962469 62.0681998,8.88703549 62.0681998,8.19201186 C62.0681998,7.7147623 61.9884839,7.27689741 61.8290522,6.88536744 C61.6696204,6.4961542 61.4445402,6.15327588 61.1585008,5.86831619 C60.8724615,5.5833565 60.5231183,5.35863219 60.1198497,5.2010935 C59.7118919,5.04123807 59.2500086,4.96015198 58.7482674,4.96015198 C58.2160466,4.96015198 57.7307175,5.0273376 57.3063476,5.15707534 C56.874944,5.28912983 56.4740199,5.46983597 56.1152984,5.69224354 C55.7518877,5.91696784 55.4189567,6.19034381 55.1000931,6.48225373 C54.9852084,6.58650727 54.8773575,6.68149384 54.7741958,6.76953016 C54.5420819,6.96877027 54.1833603,6.90621814 54.0379961,6.63979242 L54.0356515,6.64210917 Z" id="Path"></path>
              <path d="M48.7814364,14.2294505 C48.3969245,13.4440738 47.8647037,12.7652674 47.1988415,12.2115652 C46.5400131,11.66713 45.7545771,11.2199981 44.8636348,10.8863868 C43.9844154,10.557409 43.0278247,10.302567 42.0173086,10.1334445 L40.7559218,9.91567047 C40.0970934,9.80446669 39.4828121,9.67936243 38.9271455,9.54035771 C38.3855463,9.40598647 37.9142847,9.2391808 37.5250836,9.04689093 C37.1569838,8.86618478 36.8685998,8.64146048 36.6693101,8.37966824 C36.4817433,8.13640997 36.3903045,7.8421833 36.3903045,7.48308776 C36.3903045,7.08924103 36.4793987,6.7509962 36.6646209,6.44981929 C36.8521877,6.14169215 37.1194704,5.87758317 37.4570906,5.6598091 C37.8064338,5.43508479 38.2331483,5.26132889 38.720822,5.14085812 C39.217874,5.01807061 39.7758853,4.95551849 40.376099,4.95551849 C41.5601145,4.95551849 42.676137,5.14317487 43.6936869,5.51153739 C44.6408992,5.85441572 45.5294969,6.28764711 46.3477571,6.79038087 C46.3477571,6.79038087 46.3501017,6.78806413 46.3501017,6.78574738 C46.427473,6.83439904 46.5189118,6.86219998 46.6173844,6.86219998 C46.8143296,6.86219998 46.9854843,6.74867946 47.0675447,6.58650727 C47.0675447,6.58650727 47.0675447,6.58650727 47.0675447,6.58650727 L48.9549357,3.14382356 C48.9549357,3.14382356 48.9549357,3.14382356 48.9549357,3.14382356 C48.9994828,3.0696877 49.0252732,2.98396812 49.0252732,2.8912983 C49.0252732,2.70827541 48.9244561,2.55073673 48.7767472,2.4627004 C48.1249526,2.06422018 47.4731579,1.70975813 46.8377754,1.41321472 C46.1437782,1.08887035 45.4357135,0.820127884 44.7346826,0.616254286 C44.0359963,0.412380688 43.3091749,0.259475489 42.5753198,0.162172181 C41.8438093,0.0648688722 41.0700962,0.0162172181 40.2776265,0.0162172181 C39.0678206,0.0162172181 37.9002172,0.180706144 36.805296,0.50736725 C35.7056856,0.834028357 34.7233045,1.32517839 33.8862876,1.96691688 C33.042237,2.61328885 32.3599628,3.43341674 31.8605661,4.40413307 C31.3564804,5.38179965 31.1009206,6.51932166 31.1009206,7.78658141 C31.1009206,8.89166898 31.2814536,9.78361598 31.6378306,10.5921601 C31.9942075,11.403021 32.4959487,12.0980447 33.1313312,12.6563803 C33.75968,13.2077657 34.5099472,13.6595311 35.3657208,13.9954592 C36.2074268,14.3267538 37.1405717,14.579279 38.1463986,14.7507182 L39.562528,14.9870262 C40.3292073,15.1190807 41.0114816,15.2627189 41.5882495,15.4109906 C42.1556391,15.5569456 42.6339344,15.7307015 43.0114126,15.9276249 C43.3677895,16.1129645 43.6350722,16.3330553 43.8085715,16.5855806 C43.9750371,16.8265221 44.0570975,17.1902511 44.0570975,17.5308127 C44.0570975,17.9339264 43.9633141,18.274488 43.7710582,18.5733482 C43.5717684,18.883792 43.2927628,19.1525345 42.9363859,19.3749421 C42.5706306,19.6042999 42.1298486,19.7780558 41.6257629,19.8938931 C41.1122987,20.0120471 40.5519429,20.0722825 39.9564183,20.0722825 C39.2553874,20.0722825 38.5660794,20.0027801 37.907251,19.8684089 C37.2437334,19.7317209 36.6083509,19.548698 36.01986,19.3262904 C35.4313692,19.1015661 34.8780471,18.8374571 34.3739613,18.538597 C33.9495914,18.2883885 33.5650795,18.0242795 33.2227701,17.755537 C33.2227701,17.755537 33.2227701,17.7578538 33.2227701,17.7601705 C33.0234803,17.6049486 32.7350964,17.6142155 32.5498742,17.7972384 C32.5240837,17.8227226 32.5029825,17.8482068 32.4842258,17.8760078 C32.4842258,17.8760078 32.4842258,17.8760078 32.4842258,17.8760078 L30.381133,21.3210082 C30.381133,21.3210082 30.381133,21.3210082 30.381133,21.3210082 C30.2639037,21.5132981 30.2873496,21.7681401 30.4561597,21.932629 C30.4842947,21.96043 30.5124297,21.9812807 30.5452539,22.0021314 C31.1079543,22.4562135 31.731614,22.8709109 32.409199,23.225373 C33.1594663,23.6192197 33.9566252,23.9505143 34.7795745,24.2123066 C35.6001793,24.4740988 36.460642,24.6710221 37.3304831,24.8030766 C38.2003241,24.9328144 39.0771989,25 39.935317,25 C41.1545013,25 42.3408613,24.8378278 43.4592284,24.5181169 C44.5869738,24.1960893 45.5974899,23.7026226 46.4649864,23.0516171 C47.3395166,22.3936614 48.0475813,21.5573163 48.5657346,20.5634325 C49.0862325,19.5625985 49.348826,18.3741081 49.348826,17.028079 C49.348826,15.9646928 49.1542254,15.0240942 48.7673689,14.2317672 L48.7814364,14.2294505 Z" id="Path"></path>
            </g>
          </g>
        </svg>
        <span style="font-size:1.6em; color: #1E3773; margin-left: 10px; padding-left: 15px; border-left: 2px solid #2079C6;">Application</span>
      </a>
      <div class="sm:hidden">
        <button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" data-hs-collapse="#navbar-image-and-text-1" aria-controls="navbar-image-and-text-1" aria-label="Toggle navigation">
          <svg class="hs-collapse-open:hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
          </svg>
          <svg class="hs-collapse-open:block hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
          </svg>
        </button>
      </div>
    </div>
    <div id="navbar-image-and-text-1" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
      <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
        <a class="font-medium text-blue-500" href="#" aria-current="page">Landing</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Account</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Work</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Blog</a>
      </div>
    </div>
  </nav>
</header>
Close svg and text navbar code

Image

You can replace the text within the navbar with an <img>.

Open this image navbar example in new window
Copy image navbar code 
<header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white text-sm py-4 dark:bg-gray-800">
  <nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
    <div class="flex items-center justify-between">
      <a class="flex-none" href="#">
        <img src="/assets/images/app-toolkit/hs2-logo.png" alt="Logo" width="70px">
      </a>
      <div class="sm:hidden">
        <button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" data-hs-collapse="#navbar-image-2" aria-controls="navbar-image-2" aria-label="Toggle navigation">
          <svg class="hs-collapse-open:hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
          </svg>
          <svg class="hs-collapse-open:block hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
          </svg>
        </button>
      </div>
    </div>
    <div id="navbar-image-2" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
      <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
        <a class="font-medium text-blue-500" href="#" aria-current="page">Landing</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Account</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Work</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Blog</a>
      </div>
    </div>
  </nav>
</header>
Close image navbar code

Image and text

You can also make use of some additional utilities to add an image and text at the same time.

Open this image and text navbar example in new window
Copy image and text navbar code 
<header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white text-sm py-4 dark:bg-gray-800">
  <nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
    <div class="flex items-center justify-between">
      <a class="inline-flex items-center gap-x-2 text-xl font-semibold dark:text-white" href="#">
        <img src="/assets/images/app-toolkit/hs2-logo.png" alt="Logo" width="70px">
        <span style="font-size:1.6em; color: #1E3773; margin-left: 10px; padding-left: 15px; border-left: 2px solid #2079C6;">Application</span>
      </a>
      <div class="sm:hidden">
        <button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" data-hs-collapse="#navbar-image-and-text-2" aria-controls="navbar-image-and-text-2" aria-label="Toggle navigation">
          <svg class="hs-collapse-open:hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
          </svg>
          <svg class="hs-collapse-open:block hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
          </svg>
        </button>
      </div>
    </div>
    <div id="navbar-image-and-text-2" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
      <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
        <a class="font-medium text-blue-500" href="#" aria-current="page">Landing</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Account</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Work</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Blog</a>
      </div>
    </div>
  </nav>
</header>
Close image and text navbar code

Alignment

Left aligned navbar.

Open this left aligned navbar example in new window
Copy left aligned navbar code 
<header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white text-sm py-4 dark:bg-gray-800">
  <nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
    <div class="flex items-center justify-between">
      <a class="flex-none text-xl font-semibold dark:text-white" href="#">

        <svg width="68px" height="25px" viewBox="0 0 68 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>hs2-logo</title>
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="hs2-logo" fill="#1E3773" fill-rule="nonzero">
              <path d="M21.9359377,0.685756649 L21.9359377,9.89250301 L5.01272282,9.89250301 L5.01272282,0.685756649 C5.01272282,0.423964415 4.79936558,0.21314058 4.53442747,0.21314058 L0.478295349,0.21314058 C0.213357239,0.21314058 0,0.423964415 0,0.685756649 L0,24.2146233 C0,24.4764155 0.213357239,24.6872394 0.478295349,24.6872394 L4.53442747,24.6872394 C4.79936558,24.6872394 5.01272282,24.4764155 5.01272282,24.2146233 L5.01272282,14.8480215 L21.9359377,14.8480215 L21.9359377,24.2146233 C21.9359377,24.4764155 22.1492949,24.6872394 22.414233,24.6872394 L26.4703651,24.6872394 C26.7353032,24.6872394 26.9486605,24.4764155 26.9486605,24.2146233 L26.9486605,0.685756649 C26.9486605,0.423964415 26.7353032,0.21314058 26.4703651,0.21314058 L22.414233,0.21314058 C22.1492949,0.21314058 21.9359377,0.423964415 21.9359377,0.685756649 Z" id="Path"></path>
              <path d="M54.0356515,6.64210917 L52.1201255,3.13455657 C52.0146192,2.9422667 52.0591663,2.70595867 52.2209427,2.55768696 C52.6500017,2.16152349 53.1517429,1.79084422 53.7074096,1.4479659 C54.3849947,1.03095172 55.1751198,0.681123158 56.0519946,0.410063942 C56.9359032,0.136687981 57.9557977,1.02884165e-16 59.0858877,1.02884165e-16 C60.3566528,1.02884165e-16 61.5195669,0.194606617 62.541806,0.576869614 C63.5687343,0.961449356 64.4549874,1.51051802 65.174775,2.20554166 C65.8969072,2.90288203 66.4596076,3.75312761 66.8441196,4.72847743 C67.2286315,5.70151052 67.4232321,6.78111389 67.4232321,7.94180335 C67.4232321,8.69937911 67.3317933,9.40830322 67.1489156,10.0523584 C66.9683826,10.6940969 66.717512,11.3057177 66.4033376,11.8733204 C66.0915078,12.4386062 65.7163742,12.9899917 65.2896597,13.5158929 C64.869979,14.0325271 64.4080957,14.5514781 63.920422,15.0634788 L59.3508258,19.812807 L67.5217047,19.812807 C67.7866428,19.812807 68,20.0236308 68,20.285423 L68,24.2192568 C68,24.481049 67.7866428,24.6918729 67.5217047,24.6918729 L52.2209427,24.6918729 C51.9560046,24.6918729 51.7426473,24.481049 51.7426473,24.2192568 L51.7426473,21.0522658 C51.7426473,20.8275415 51.8317415,20.6097674 51.9888287,20.4475952 L60.2065993,12.040126 C60.8255698,11.421555 61.2968314,10.7914002 61.6086612,10.1635622 C61.9134572,9.54962469 62.0681998,8.88703549 62.0681998,8.19201186 C62.0681998,7.7147623 61.9884839,7.27689741 61.8290522,6.88536744 C61.6696204,6.4961542 61.4445402,6.15327588 61.1585008,5.86831619 C60.8724615,5.5833565 60.5231183,5.35863219 60.1198497,5.2010935 C59.7118919,5.04123807 59.2500086,4.96015198 58.7482674,4.96015198 C58.2160466,4.96015198 57.7307175,5.0273376 57.3063476,5.15707534 C56.874944,5.28912983 56.4740199,5.46983597 56.1152984,5.69224354 C55.7518877,5.91696784 55.4189567,6.19034381 55.1000931,6.48225373 C54.9852084,6.58650727 54.8773575,6.68149384 54.7741958,6.76953016 C54.5420819,6.96877027 54.1833603,6.90621814 54.0379961,6.63979242 L54.0356515,6.64210917 Z" id="Path"></path>
              <path d="M48.7814364,14.2294505 C48.3969245,13.4440738 47.8647037,12.7652674 47.1988415,12.2115652 C46.5400131,11.66713 45.7545771,11.2199981 44.8636348,10.8863868 C43.9844154,10.557409 43.0278247,10.302567 42.0173086,10.1334445 L40.7559218,9.91567047 C40.0970934,9.80446669 39.4828121,9.67936243 38.9271455,9.54035771 C38.3855463,9.40598647 37.9142847,9.2391808 37.5250836,9.04689093 C37.1569838,8.86618478 36.8685998,8.64146048 36.6693101,8.37966824 C36.4817433,8.13640997 36.3903045,7.8421833 36.3903045,7.48308776 C36.3903045,7.08924103 36.4793987,6.7509962 36.6646209,6.44981929 C36.8521877,6.14169215 37.1194704,5.87758317 37.4570906,5.6598091 C37.8064338,5.43508479 38.2331483,5.26132889 38.720822,5.14085812 C39.217874,5.01807061 39.7758853,4.95551849 40.376099,4.95551849 C41.5601145,4.95551849 42.676137,5.14317487 43.6936869,5.51153739 C44.6408992,5.85441572 45.5294969,6.28764711 46.3477571,6.79038087 C46.3477571,6.79038087 46.3501017,6.78806413 46.3501017,6.78574738 C46.427473,6.83439904 46.5189118,6.86219998 46.6173844,6.86219998 C46.8143296,6.86219998 46.9854843,6.74867946 47.0675447,6.58650727 C47.0675447,6.58650727 47.0675447,6.58650727 47.0675447,6.58650727 L48.9549357,3.14382356 C48.9549357,3.14382356 48.9549357,3.14382356 48.9549357,3.14382356 C48.9994828,3.0696877 49.0252732,2.98396812 49.0252732,2.8912983 C49.0252732,2.70827541 48.9244561,2.55073673 48.7767472,2.4627004 C48.1249526,2.06422018 47.4731579,1.70975813 46.8377754,1.41321472 C46.1437782,1.08887035 45.4357135,0.820127884 44.7346826,0.616254286 C44.0359963,0.412380688 43.3091749,0.259475489 42.5753198,0.162172181 C41.8438093,0.0648688722 41.0700962,0.0162172181 40.2776265,0.0162172181 C39.0678206,0.0162172181 37.9002172,0.180706144 36.805296,0.50736725 C35.7056856,0.834028357 34.7233045,1.32517839 33.8862876,1.96691688 C33.042237,2.61328885 32.3599628,3.43341674 31.8605661,4.40413307 C31.3564804,5.38179965 31.1009206,6.51932166 31.1009206,7.78658141 C31.1009206,8.89166898 31.2814536,9.78361598 31.6378306,10.5921601 C31.9942075,11.403021 32.4959487,12.0980447 33.1313312,12.6563803 C33.75968,13.2077657 34.5099472,13.6595311 35.3657208,13.9954592 C36.2074268,14.3267538 37.1405717,14.579279 38.1463986,14.7507182 L39.562528,14.9870262 C40.3292073,15.1190807 41.0114816,15.2627189 41.5882495,15.4109906 C42.1556391,15.5569456 42.6339344,15.7307015 43.0114126,15.9276249 C43.3677895,16.1129645 43.6350722,16.3330553 43.8085715,16.5855806 C43.9750371,16.8265221 44.0570975,17.1902511 44.0570975,17.5308127 C44.0570975,17.9339264 43.9633141,18.274488 43.7710582,18.5733482 C43.5717684,18.883792 43.2927628,19.1525345 42.9363859,19.3749421 C42.5706306,19.6042999 42.1298486,19.7780558 41.6257629,19.8938931 C41.1122987,20.0120471 40.5519429,20.0722825 39.9564183,20.0722825 C39.2553874,20.0722825 38.5660794,20.0027801 37.907251,19.8684089 C37.2437334,19.7317209 36.6083509,19.548698 36.01986,19.3262904 C35.4313692,19.1015661 34.8780471,18.8374571 34.3739613,18.538597 C33.9495914,18.2883885 33.5650795,18.0242795 33.2227701,17.755537 C33.2227701,17.755537 33.2227701,17.7578538 33.2227701,17.7601705 C33.0234803,17.6049486 32.7350964,17.6142155 32.5498742,17.7972384 C32.5240837,17.8227226 32.5029825,17.8482068 32.4842258,17.8760078 C32.4842258,17.8760078 32.4842258,17.8760078 32.4842258,17.8760078 L30.381133,21.3210082 C30.381133,21.3210082 30.381133,21.3210082 30.381133,21.3210082 C30.2639037,21.5132981 30.2873496,21.7681401 30.4561597,21.932629 C30.4842947,21.96043 30.5124297,21.9812807 30.5452539,22.0021314 C31.1079543,22.4562135 31.731614,22.8709109 32.409199,23.225373 C33.1594663,23.6192197 33.9566252,23.9505143 34.7795745,24.2123066 C35.6001793,24.4740988 36.460642,24.6710221 37.3304831,24.8030766 C38.2003241,24.9328144 39.0771989,25 39.935317,25 C41.1545013,25 42.3408613,24.8378278 43.4592284,24.5181169 C44.5869738,24.1960893 45.5974899,23.7026226 46.4649864,23.0516171 C47.3395166,22.3936614 48.0475813,21.5573163 48.5657346,20.5634325 C49.0862325,19.5625985 49.348826,18.3741081 49.348826,17.028079 C49.348826,15.9646928 49.1542254,15.0240942 48.7673689,14.2317672 L48.7814364,14.2294505 Z" id="Path"></path>
            </g>
          </g>
        </svg>

      </a>
      <div class="sm:hidden">
        <button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" data-hs-collapse="#navbar-alignment" aria-controls="navbar-alignment" aria-label="Toggle navigation">
          <svg class="hs-collapse-open:hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
          </svg>
          <svg class="hs-collapse-open:block hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
          </svg>
        </button>
      </div>
    </div>
    <div id="navbar-alignment" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
      <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:mt-0 sm:pl-5">
        <a class="font-medium text-blue-500" href="#" aria-current="page">Landing</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Account</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Work</a>
        <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Blog</a>
      </div>
    </div>
  </nav>
</header>
Close left aligned navbar code

With mega menu

You can also use mega menu in your navbar.

Open this with mega menu navbar example in new window
Copy with mega menu navbar code 
<div class="min-h-[18rem]">
  <header class="relative flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white text-sm py-4 dark:bg-gray-800">
    <nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
      <div class="flex items-center justify-between">
        <a class="flex-none text-xl font-semibold dark:text-white" href="#">

          <svg width="68px" height="25px" viewBox="0 0 68 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>hs2-logo</title>
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="hs2-logo" fill="#1E3773" fill-rule="nonzero">
                <path d="M21.9359377,0.685756649 L21.9359377,9.89250301 L5.01272282,9.89250301 L5.01272282,0.685756649 C5.01272282,0.423964415 4.79936558,0.21314058 4.53442747,0.21314058 L0.478295349,0.21314058 C0.213357239,0.21314058 0,0.423964415 0,0.685756649 L0,24.2146233 C0,24.4764155 0.213357239,24.6872394 0.478295349,24.6872394 L4.53442747,24.6872394 C4.79936558,24.6872394 5.01272282,24.4764155 5.01272282,24.2146233 L5.01272282,14.8480215 L21.9359377,14.8480215 L21.9359377,24.2146233 C21.9359377,24.4764155 22.1492949,24.6872394 22.414233,24.6872394 L26.4703651,24.6872394 C26.7353032,24.6872394 26.9486605,24.4764155 26.9486605,24.2146233 L26.9486605,0.685756649 C26.9486605,0.423964415 26.7353032,0.21314058 26.4703651,0.21314058 L22.414233,0.21314058 C22.1492949,0.21314058 21.9359377,0.423964415 21.9359377,0.685756649 Z" id="Path"></path>
                <path d="M54.0356515,6.64210917 L52.1201255,3.13455657 C52.0146192,2.9422667 52.0591663,2.70595867 52.2209427,2.55768696 C52.6500017,2.16152349 53.1517429,1.79084422 53.7074096,1.4479659 C54.3849947,1.03095172 55.1751198,0.681123158 56.0519946,0.410063942 C56.9359032,0.136687981 57.9557977,1.02884165e-16 59.0858877,1.02884165e-16 C60.3566528,1.02884165e-16 61.5195669,0.194606617 62.541806,0.576869614 C63.5687343,0.961449356 64.4549874,1.51051802 65.174775,2.20554166 C65.8969072,2.90288203 66.4596076,3.75312761 66.8441196,4.72847743 C67.2286315,5.70151052 67.4232321,6.78111389 67.4232321,7.94180335 C67.4232321,8.69937911 67.3317933,9.40830322 67.1489156,10.0523584 C66.9683826,10.6940969 66.717512,11.3057177 66.4033376,11.8733204 C66.0915078,12.4386062 65.7163742,12.9899917 65.2896597,13.5158929 C64.869979,14.0325271 64.4080957,14.5514781 63.920422,15.0634788 L59.3508258,19.812807 L67.5217047,19.812807 C67.7866428,19.812807 68,20.0236308 68,20.285423 L68,24.2192568 C68,24.481049 67.7866428,24.6918729 67.5217047,24.6918729 L52.2209427,24.6918729 C51.9560046,24.6918729 51.7426473,24.481049 51.7426473,24.2192568 L51.7426473,21.0522658 C51.7426473,20.8275415 51.8317415,20.6097674 51.9888287,20.4475952 L60.2065993,12.040126 C60.8255698,11.421555 61.2968314,10.7914002 61.6086612,10.1635622 C61.9134572,9.54962469 62.0681998,8.88703549 62.0681998,8.19201186 C62.0681998,7.7147623 61.9884839,7.27689741 61.8290522,6.88536744 C61.6696204,6.4961542 61.4445402,6.15327588 61.1585008,5.86831619 C60.8724615,5.5833565 60.5231183,5.35863219 60.1198497,5.2010935 C59.7118919,5.04123807 59.2500086,4.96015198 58.7482674,4.96015198 C58.2160466,4.96015198 57.7307175,5.0273376 57.3063476,5.15707534 C56.874944,5.28912983 56.4740199,5.46983597 56.1152984,5.69224354 C55.7518877,5.91696784 55.4189567,6.19034381 55.1000931,6.48225373 C54.9852084,6.58650727 54.8773575,6.68149384 54.7741958,6.76953016 C54.5420819,6.96877027 54.1833603,6.90621814 54.0379961,6.63979242 L54.0356515,6.64210917 Z" id="Path"></path>
                <path d="M48.7814364,14.2294505 C48.3969245,13.4440738 47.8647037,12.7652674 47.1988415,12.2115652 C46.5400131,11.66713 45.7545771,11.2199981 44.8636348,10.8863868 C43.9844154,10.557409 43.0278247,10.302567 42.0173086,10.1334445 L40.7559218,9.91567047 C40.0970934,9.80446669 39.4828121,9.67936243 38.9271455,9.54035771 C38.3855463,9.40598647 37.9142847,9.2391808 37.5250836,9.04689093 C37.1569838,8.86618478 36.8685998,8.64146048 36.6693101,8.37966824 C36.4817433,8.13640997 36.3903045,7.8421833 36.3903045,7.48308776 C36.3903045,7.08924103 36.4793987,6.7509962 36.6646209,6.44981929 C36.8521877,6.14169215 37.1194704,5.87758317 37.4570906,5.6598091 C37.8064338,5.43508479 38.2331483,5.26132889 38.720822,5.14085812 C39.217874,5.01807061 39.7758853,4.95551849 40.376099,4.95551849 C41.5601145,4.95551849 42.676137,5.14317487 43.6936869,5.51153739 C44.6408992,5.85441572 45.5294969,6.28764711 46.3477571,6.79038087 C46.3477571,6.79038087 46.3501017,6.78806413 46.3501017,6.78574738 C46.427473,6.83439904 46.5189118,6.86219998 46.6173844,6.86219998 C46.8143296,6.86219998 46.9854843,6.74867946 47.0675447,6.58650727 C47.0675447,6.58650727 47.0675447,6.58650727 47.0675447,6.58650727 L48.9549357,3.14382356 C48.9549357,3.14382356 48.9549357,3.14382356 48.9549357,3.14382356 C48.9994828,3.0696877 49.0252732,2.98396812 49.0252732,2.8912983 C49.0252732,2.70827541 48.9244561,2.55073673 48.7767472,2.4627004 C48.1249526,2.06422018 47.4731579,1.70975813 46.8377754,1.41321472 C46.1437782,1.08887035 45.4357135,0.820127884 44.7346826,0.616254286 C44.0359963,0.412380688 43.3091749,0.259475489 42.5753198,0.162172181 C41.8438093,0.0648688722 41.0700962,0.0162172181 40.2776265,0.0162172181 C39.0678206,0.0162172181 37.9002172,0.180706144 36.805296,0.50736725 C35.7056856,0.834028357 34.7233045,1.32517839 33.8862876,1.96691688 C33.042237,2.61328885 32.3599628,3.43341674 31.8605661,4.40413307 C31.3564804,5.38179965 31.1009206,6.51932166 31.1009206,7.78658141 C31.1009206,8.89166898 31.2814536,9.78361598 31.6378306,10.5921601 C31.9942075,11.403021 32.4959487,12.0980447 33.1313312,12.6563803 C33.75968,13.2077657 34.5099472,13.6595311 35.3657208,13.9954592 C36.2074268,14.3267538 37.1405717,14.579279 38.1463986,14.7507182 L39.562528,14.9870262 C40.3292073,15.1190807 41.0114816,15.2627189 41.5882495,15.4109906 C42.1556391,15.5569456 42.6339344,15.7307015 43.0114126,15.9276249 C43.3677895,16.1129645 43.6350722,16.3330553 43.8085715,16.5855806 C43.9750371,16.8265221 44.0570975,17.1902511 44.0570975,17.5308127 C44.0570975,17.9339264 43.9633141,18.274488 43.7710582,18.5733482 C43.5717684,18.883792 43.2927628,19.1525345 42.9363859,19.3749421 C42.5706306,19.6042999 42.1298486,19.7780558 41.6257629,19.8938931 C41.1122987,20.0120471 40.5519429,20.0722825 39.9564183,20.0722825 C39.2553874,20.0722825 38.5660794,20.0027801 37.907251,19.8684089 C37.2437334,19.7317209 36.6083509,19.548698 36.01986,19.3262904 C35.4313692,19.1015661 34.8780471,18.8374571 34.3739613,18.538597 C33.9495914,18.2883885 33.5650795,18.0242795 33.2227701,17.755537 C33.2227701,17.755537 33.2227701,17.7578538 33.2227701,17.7601705 C33.0234803,17.6049486 32.7350964,17.6142155 32.5498742,17.7972384 C32.5240837,17.8227226 32.5029825,17.8482068 32.4842258,17.8760078 C32.4842258,17.8760078 32.4842258,17.8760078 32.4842258,17.8760078 L30.381133,21.3210082 C30.381133,21.3210082 30.381133,21.3210082 30.381133,21.3210082 C30.2639037,21.5132981 30.2873496,21.7681401 30.4561597,21.932629 C30.4842947,21.96043 30.5124297,21.9812807 30.5452539,22.0021314 C31.1079543,22.4562135 31.731614,22.8709109 32.409199,23.225373 C33.1594663,23.6192197 33.9566252,23.9505143 34.7795745,24.2123066 C35.6001793,24.4740988 36.460642,24.6710221 37.3304831,24.8030766 C38.2003241,24.9328144 39.0771989,25 39.935317,25 C41.1545013,25 42.3408613,24.8378278 43.4592284,24.5181169 C44.5869738,24.1960893 45.5974899,23.7026226 46.4649864,23.0516171 C47.3395166,22.3936614 48.0475813,21.5573163 48.5657346,20.5634325 C49.0862325,19.5625985 49.348826,18.3741081 49.348826,17.028079 C49.348826,15.9646928 49.1542254,15.0240942 48.7673689,14.2317672 L48.7814364,14.2294505 Z" id="Path"></path>
              </g>
            </g>
          </svg>

        </a>
        <div class="sm:hidden">
          <button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" data-hs-collapse="#navbar-with-mega-menu" aria-controls="navbar-with-mega-menu" aria-label="Toggle navigation">
            <svg class="hs-collapse-open:hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
            </svg>
            <svg class="hs-collapse-open:block hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
            </svg>
          </button>
        </div>
      </div>
      <div id="navbar-with-mega-menu" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
        <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
          <a class="font-medium text-blue-500" href="#" aria-current="page">Landing</a>
          <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Account</a>
          <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Work</a>
          <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Blog</a>
          <div class="hs-dropdown [--strategy:static] sm:[--strategy:fixed] [--adaptive:none]">
            <button id="hs-mega-menu-basic-dr" type="button" class="flex items-center w-full text-gray-600 hover:text-gray-400 font-medium dark:text-gray-400 dark:hover:text-gray-500 ">
              Dropdown
              <svg class="ml-2 w-2.5 h-2.5 text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
              </svg>
            </button>

            <div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 sm:w-48 z-10 bg-white sm:shadow-md rounded-lg p-2 dark:bg-gray-800 sm:dark:border dark:border-gray-700 dark:divide-gray-700 before:absolute top-full sm:border before:-top-5 before:left-0 before:w-full before:h-5 hidden" style="">
              <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                About
              </a>
              <div class="hs-dropdown relative [--strategy:static] sm:[--strategy:absolute] [--adaptive:none]">
                <button type="button" class="w-full flex justify-between w-full items-center text-sm text-gray-800 rounded-md py-2 px-3 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300">
                  Sub Menu
                  <svg class="sm:-rotate-90 ml-2 w-2.5 h-2.5 text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                  </svg>
                </button>

                <div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 sm:w-48 hidden z-10 sm:mt-2 bg-white sm:shadow-md rounded-lg p-2 dark:bg-gray-800 sm:dark:border dark:border-gray-700 dark:divide-gray-700 before:absolute sm:border before:-right-5 before:top-0 before:h-full before:w-5 top-0 right-full !mx-[10px]">
                  <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                    About
                  </a>
                  <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                    Downloads
                  </a>
                  <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                    Team Account
                  </a>
                </div>
              </div>

              <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                Downloads
              </a>
              <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300" href="#">
                Team Account
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </header>
</div>
Close with mega menu navbar code

Colour variants

Theming the navbar with utility classes.

Open this colour variants navbar example in new window
Copy colour variants navbar code 
<div class="flex flex-col gap-3">
  <header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-hs2-primary text-sm py-4">
    <nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
      <div class="flex items-center justify-between">
        <a class="flex-none text-xl font-semibold text-white" href="#">

          <svg width="68px" height="25px" viewBox="0 0 68 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>hs2-logo</title>
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="hs2-logo" fill="#FFFFFF" fill-rule="nonzero">
                <path d="M21.9359377,0.685756649 L21.9359377,9.89250301 L5.01272282,9.89250301 L5.01272282,0.685756649 C5.01272282,0.423964415 4.79936558,0.21314058 4.53442747,0.21314058 L0.478295349,0.21314058 C0.213357239,0.21314058 0,0.423964415 0,0.685756649 L0,24.2146233 C0,24.4764155 0.213357239,24.6872394 0.478295349,24.6872394 L4.53442747,24.6872394 C4.79936558,24.6872394 5.01272282,24.4764155 5.01272282,24.2146233 L5.01272282,14.8480215 L21.9359377,14.8480215 L21.9359377,24.2146233 C21.9359377,24.4764155 22.1492949,24.6872394 22.414233,24.6872394 L26.4703651,24.6872394 C26.7353032,24.6872394 26.9486605,24.4764155 26.9486605,24.2146233 L26.9486605,0.685756649 C26.9486605,0.423964415 26.7353032,0.21314058 26.4703651,0.21314058 L22.414233,0.21314058 C22.1492949,0.21314058 21.9359377,0.423964415 21.9359377,0.685756649 Z" id="Path"></path>
                <path d="M54.0356515,6.64210917 L52.1201255,3.13455657 C52.0146192,2.9422667 52.0591663,2.70595867 52.2209427,2.55768696 C52.6500017,2.16152349 53.1517429,1.79084422 53.7074096,1.4479659 C54.3849947,1.03095172 55.1751198,0.681123158 56.0519946,0.410063942 C56.9359032,0.136687981 57.9557977,1.02884165e-16 59.0858877,1.02884165e-16 C60.3566528,1.02884165e-16 61.5195669,0.194606617 62.541806,0.576869614 C63.5687343,0.961449356 64.4549874,1.51051802 65.174775,2.20554166 C65.8969072,2.90288203 66.4596076,3.75312761 66.8441196,4.72847743 C67.2286315,5.70151052 67.4232321,6.78111389 67.4232321,7.94180335 C67.4232321,8.69937911 67.3317933,9.40830322 67.1489156,10.0523584 C66.9683826,10.6940969 66.717512,11.3057177 66.4033376,11.8733204 C66.0915078,12.4386062 65.7163742,12.9899917 65.2896597,13.5158929 C64.869979,14.0325271 64.4080957,14.5514781 63.920422,15.0634788 L59.3508258,19.812807 L67.5217047,19.812807 C67.7866428,19.812807 68,20.0236308 68,20.285423 L68,24.2192568 C68,24.481049 67.7866428,24.6918729 67.5217047,24.6918729 L52.2209427,24.6918729 C51.9560046,24.6918729 51.7426473,24.481049 51.7426473,24.2192568 L51.7426473,21.0522658 C51.7426473,20.8275415 51.8317415,20.6097674 51.9888287,20.4475952 L60.2065993,12.040126 C60.8255698,11.421555 61.2968314,10.7914002 61.6086612,10.1635622 C61.9134572,9.54962469 62.0681998,8.88703549 62.0681998,8.19201186 C62.0681998,7.7147623 61.9884839,7.27689741 61.8290522,6.88536744 C61.6696204,6.4961542 61.4445402,6.15327588 61.1585008,5.86831619 C60.8724615,5.5833565 60.5231183,5.35863219 60.1198497,5.2010935 C59.7118919,5.04123807 59.2500086,4.96015198 58.7482674,4.96015198 C58.2160466,4.96015198 57.7307175,5.0273376 57.3063476,5.15707534 C56.874944,5.28912983 56.4740199,5.46983597 56.1152984,5.69224354 C55.7518877,5.91696784 55.4189567,6.19034381 55.1000931,6.48225373 C54.9852084,6.58650727 54.8773575,6.68149384 54.7741958,6.76953016 C54.5420819,6.96877027 54.1833603,6.90621814 54.0379961,6.63979242 L54.0356515,6.64210917 Z" id="Path"></path>
                <path d="M48.7814364,14.2294505 C48.3969245,13.4440738 47.8647037,12.7652674 47.1988415,12.2115652 C46.5400131,11.66713 45.7545771,11.2199981 44.8636348,10.8863868 C43.9844154,10.557409 43.0278247,10.302567 42.0173086,10.1334445 L40.7559218,9.91567047 C40.0970934,9.80446669 39.4828121,9.67936243 38.9271455,9.54035771 C38.3855463,9.40598647 37.9142847,9.2391808 37.5250836,9.04689093 C37.1569838,8.86618478 36.8685998,8.64146048 36.6693101,8.37966824 C36.4817433,8.13640997 36.3903045,7.8421833 36.3903045,7.48308776 C36.3903045,7.08924103 36.4793987,6.7509962 36.6646209,6.44981929 C36.8521877,6.14169215 37.1194704,5.87758317 37.4570906,5.6598091 C37.8064338,5.43508479 38.2331483,5.26132889 38.720822,5.14085812 C39.217874,5.01807061 39.7758853,4.95551849 40.376099,4.95551849 C41.5601145,4.95551849 42.676137,5.14317487 43.6936869,5.51153739 C44.6408992,5.85441572 45.5294969,6.28764711 46.3477571,6.79038087 C46.3477571,6.79038087 46.3501017,6.78806413 46.3501017,6.78574738 C46.427473,6.83439904 46.5189118,6.86219998 46.6173844,6.86219998 C46.8143296,6.86219998 46.9854843,6.74867946 47.0675447,6.58650727 C47.0675447,6.58650727 47.0675447,6.58650727 47.0675447,6.58650727 L48.9549357,3.14382356 C48.9549357,3.14382356 48.9549357,3.14382356 48.9549357,3.14382356 C48.9994828,3.0696877 49.0252732,2.98396812 49.0252732,2.8912983 C49.0252732,2.70827541 48.9244561,2.55073673 48.7767472,2.4627004 C48.1249526,2.06422018 47.4731579,1.70975813 46.8377754,1.41321472 C46.1437782,1.08887035 45.4357135,0.820127884 44.7346826,0.616254286 C44.0359963,0.412380688 43.3091749,0.259475489 42.5753198,0.162172181 C41.8438093,0.0648688722 41.0700962,0.0162172181 40.2776265,0.0162172181 C39.0678206,0.0162172181 37.9002172,0.180706144 36.805296,0.50736725 C35.7056856,0.834028357 34.7233045,1.32517839 33.8862876,1.96691688 C33.042237,2.61328885 32.3599628,3.43341674 31.8605661,4.40413307 C31.3564804,5.38179965 31.1009206,6.51932166 31.1009206,7.78658141 C31.1009206,8.89166898 31.2814536,9.78361598 31.6378306,10.5921601 C31.9942075,11.403021 32.4959487,12.0980447 33.1313312,12.6563803 C33.75968,13.2077657 34.5099472,13.6595311 35.3657208,13.9954592 C36.2074268,14.3267538 37.1405717,14.579279 38.1463986,14.7507182 L39.562528,14.9870262 C40.3292073,15.1190807 41.0114816,15.2627189 41.5882495,15.4109906 C42.1556391,15.5569456 42.6339344,15.7307015 43.0114126,15.9276249 C43.3677895,16.1129645 43.6350722,16.3330553 43.8085715,16.5855806 C43.9750371,16.8265221 44.0570975,17.1902511 44.0570975,17.5308127 C44.0570975,17.9339264 43.9633141,18.274488 43.7710582,18.5733482 C43.5717684,18.883792 43.2927628,19.1525345 42.9363859,19.3749421 C42.5706306,19.6042999 42.1298486,19.7780558 41.6257629,19.8938931 C41.1122987,20.0120471 40.5519429,20.0722825 39.9564183,20.0722825 C39.2553874,20.0722825 38.5660794,20.0027801 37.907251,19.8684089 C37.2437334,19.7317209 36.6083509,19.548698 36.01986,19.3262904 C35.4313692,19.1015661 34.8780471,18.8374571 34.3739613,18.538597 C33.9495914,18.2883885 33.5650795,18.0242795 33.2227701,17.755537 C33.2227701,17.755537 33.2227701,17.7578538 33.2227701,17.7601705 C33.0234803,17.6049486 32.7350964,17.6142155 32.5498742,17.7972384 C32.5240837,17.8227226 32.5029825,17.8482068 32.4842258,17.8760078 C32.4842258,17.8760078 32.4842258,17.8760078 32.4842258,17.8760078 L30.381133,21.3210082 C30.381133,21.3210082 30.381133,21.3210082 30.381133,21.3210082 C30.2639037,21.5132981 30.2873496,21.7681401 30.4561597,21.932629 C30.4842947,21.96043 30.5124297,21.9812807 30.5452539,22.0021314 C31.1079543,22.4562135 31.731614,22.8709109 32.409199,23.225373 C33.1594663,23.6192197 33.9566252,23.9505143 34.7795745,24.2123066 C35.6001793,24.4740988 36.460642,24.6710221 37.3304831,24.8030766 C38.2003241,24.9328144 39.0771989,25 39.935317,25 C41.1545013,25 42.3408613,24.8378278 43.4592284,24.5181169 C44.5869738,24.1960893 45.5974899,23.7026226 46.4649864,23.0516171 C47.3395166,22.3936614 48.0475813,21.5573163 48.5657346,20.5634325 C49.0862325,19.5625985 49.348826,18.3741081 49.348826,17.028079 C49.348826,15.9646928 49.1542254,15.0240942 48.7673689,14.2317672 L48.7814364,14.2294505 Z" id="Path"></path>
              </g>
            </g>
          </svg>

        </a>
        <div class="sm:hidden">
          <button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border border-white/[.25] font-medium bg-hs2-primary text-white shadow-sm align-middle hover:bg-white/[.15] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-hs2-primary-600 focus:ring-white transition-all text-sm" data-hs-collapse="#navbar-primary" aria-controls="navbar-primary" aria-label="Toggle navigation">
            <svg class="hs-collapse-open:hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
            </svg>
            <svg class="hs-collapse-open:block hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
            </svg>
          </button>
        </div>
      </div>
      <div id="navbar-primary" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
        <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
          <a class="font-medium text-white" href="#" aria-current="page">Landing</a>
          <a class="font-medium text-gray-300 hover:text-white" href="#">Account</a>
          <a class="font-medium text-gray-300 hover:text-white" href="#">Work</a>
          <a class="font-medium text-gray-300 hover:text-white" href="#">Blog</a>
        </div>
      </div>
    </nav>
  </header>

  <header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white text-sm py-4 dark:bg-gray-800">
    <nav class="max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between" aria-label="Global">
      <div class="flex items-center justify-between">
        <a class="flex-none text-xl font-semibold dark:text-white" href="#">

          <svg width="68px" height="25px" viewBox="0 0 68 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>hs2-logo</title>
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="hs2-logo" fill="#1E3773" fill-rule="nonzero">
                <path d="M21.9359377,0.685756649 L21.9359377,9.89250301 L5.01272282,9.89250301 L5.01272282,0.685756649 C5.01272282,0.423964415 4.79936558,0.21314058 4.53442747,0.21314058 L0.478295349,0.21314058 C0.213357239,0.21314058 0,0.423964415 0,0.685756649 L0,24.2146233 C0,24.4764155 0.213357239,24.6872394 0.478295349,24.6872394 L4.53442747,24.6872394 C4.79936558,24.6872394 5.01272282,24.4764155 5.01272282,24.2146233 L5.01272282,14.8480215 L21.9359377,14.8480215 L21.9359377,24.2146233 C21.9359377,24.4764155 22.1492949,24.6872394 22.414233,24.6872394 L26.4703651,24.6872394 C26.7353032,24.6872394 26.9486605,24.4764155 26.9486605,24.2146233 L26.9486605,0.685756649 C26.9486605,0.423964415 26.7353032,0.21314058 26.4703651,0.21314058 L22.414233,0.21314058 C22.1492949,0.21314058 21.9359377,0.423964415 21.9359377,0.685756649 Z" id="Path"></path>
                <path d="M54.0356515,6.64210917 L52.1201255,3.13455657 C52.0146192,2.9422667 52.0591663,2.70595867 52.2209427,2.55768696 C52.6500017,2.16152349 53.1517429,1.79084422 53.7074096,1.4479659 C54.3849947,1.03095172 55.1751198,0.681123158 56.0519946,0.410063942 C56.9359032,0.136687981 57.9557977,1.02884165e-16 59.0858877,1.02884165e-16 C60.3566528,1.02884165e-16 61.5195669,0.194606617 62.541806,0.576869614 C63.5687343,0.961449356 64.4549874,1.51051802 65.174775,2.20554166 C65.8969072,2.90288203 66.4596076,3.75312761 66.8441196,4.72847743 C67.2286315,5.70151052 67.4232321,6.78111389 67.4232321,7.94180335 C67.4232321,8.69937911 67.3317933,9.40830322 67.1489156,10.0523584 C66.9683826,10.6940969 66.717512,11.3057177 66.4033376,11.8733204 C66.0915078,12.4386062 65.7163742,12.9899917 65.2896597,13.5158929 C64.869979,14.0325271 64.4080957,14.5514781 63.920422,15.0634788 L59.3508258,19.812807 L67.5217047,19.812807 C67.7866428,19.812807 68,20.0236308 68,20.285423 L68,24.2192568 C68,24.481049 67.7866428,24.6918729 67.5217047,24.6918729 L52.2209427,24.6918729 C51.9560046,24.6918729 51.7426473,24.481049 51.7426473,24.2192568 L51.7426473,21.0522658 C51.7426473,20.8275415 51.8317415,20.6097674 51.9888287,20.4475952 L60.2065993,12.040126 C60.8255698,11.421555 61.2968314,10.7914002 61.6086612,10.1635622 C61.9134572,9.54962469 62.0681998,8.88703549 62.0681998,8.19201186 C62.0681998,7.7147623 61.9884839,7.27689741 61.8290522,6.88536744 C61.6696204,6.4961542 61.4445402,6.15327588 61.1585008,5.86831619 C60.8724615,5.5833565 60.5231183,5.35863219 60.1198497,5.2010935 C59.7118919,5.04123807 59.2500086,4.96015198 58.7482674,4.96015198 C58.2160466,4.96015198 57.7307175,5.0273376 57.3063476,5.15707534 C56.874944,5.28912983 56.4740199,5.46983597 56.1152984,5.69224354 C55.7518877,5.91696784 55.4189567,6.19034381 55.1000931,6.48225373 C54.9852084,6.58650727 54.8773575,6.68149384 54.7741958,6.76953016 C54.5420819,6.96877027 54.1833603,6.90621814 54.0379961,6.63979242 L54.0356515,6.64210917 Z" id="Path"></path>
                <path d="M48.7814364,14.2294505 C48.3969245,13.4440738 47.8647037,12.7652674 47.1988415,12.2115652 C46.5400131,11.66713 45.7545771,11.2199981 44.8636348,10.8863868 C43.9844154,10.557409 43.0278247,10.302567 42.0173086,10.1334445 L40.7559218,9.91567047 C40.0970934,9.80446669 39.4828121,9.67936243 38.9271455,9.54035771 C38.3855463,9.40598647 37.9142847,9.2391808 37.5250836,9.04689093 C37.1569838,8.86618478 36.8685998,8.64146048 36.6693101,8.37966824 C36.4817433,8.13640997 36.3903045,7.8421833 36.3903045,7.48308776 C36.3903045,7.08924103 36.4793987,6.7509962 36.6646209,6.44981929 C36.8521877,6.14169215 37.1194704,5.87758317 37.4570906,5.6598091 C37.8064338,5.43508479 38.2331483,5.26132889 38.720822,5.14085812 C39.217874,5.01807061 39.7758853,4.95551849 40.376099,4.95551849 C41.5601145,4.95551849 42.676137,5.14317487 43.6936869,5.51153739 C44.6408992,5.85441572 45.5294969,6.28764711 46.3477571,6.79038087 C46.3477571,6.79038087 46.3501017,6.78806413 46.3501017,6.78574738 C46.427473,6.83439904 46.5189118,6.86219998 46.6173844,6.86219998 C46.8143296,6.86219998 46.9854843,6.74867946 47.0675447,6.58650727 C47.0675447,6.58650727 47.0675447,6.58650727 47.0675447,6.58650727 L48.9549357,3.14382356 C48.9549357,3.14382356 48.9549357,3.14382356 48.9549357,3.14382356 C48.9994828,3.0696877 49.0252732,2.98396812 49.0252732,2.8912983 C49.0252732,2.70827541 48.9244561,2.55073673 48.7767472,2.4627004 C48.1249526,2.06422018 47.4731579,1.70975813 46.8377754,1.41321472 C46.1437782,1.08887035 45.4357135,0.820127884 44.7346826,0.616254286 C44.0359963,0.412380688 43.3091749,0.259475489 42.5753198,0.162172181 C41.8438093,0.0648688722 41.0700962,0.0162172181 40.2776265,0.0162172181 C39.0678206,0.0162172181 37.9002172,0.180706144 36.805296,0.50736725 C35.7056856,0.834028357 34.7233045,1.32517839 33.8862876,1.96691688 C33.042237,2.61328885 32.3599628,3.43341674 31.8605661,4.40413307 C31.3564804,5.38179965 31.1009206,6.51932166 31.1009206,7.78658141 C31.1009206,8.89166898 31.2814536,9.78361598 31.6378306,10.5921601 C31.9942075,11.403021 32.4959487,12.0980447 33.1313312,12.6563803 C33.75968,13.2077657 34.5099472,13.6595311 35.3657208,13.9954592 C36.2074268,14.3267538 37.1405717,14.579279 38.1463986,14.7507182 L39.562528,14.9870262 C40.3292073,15.1190807 41.0114816,15.2627189 41.5882495,15.4109906 C42.1556391,15.5569456 42.6339344,15.7307015 43.0114126,15.9276249 C43.3677895,16.1129645 43.6350722,16.3330553 43.8085715,16.5855806 C43.9750371,16.8265221 44.0570975,17.1902511 44.0570975,17.5308127 C44.0570975,17.9339264 43.9633141,18.274488 43.7710582,18.5733482 C43.5717684,18.883792 43.2927628,19.1525345 42.9363859,19.3749421 C42.5706306,19.6042999 42.1298486,19.7780558 41.6257629,19.8938931 C41.1122987,20.0120471 40.5519429,20.0722825 39.9564183,20.0722825 C39.2553874,20.0722825 38.5660794,20.0027801 37.907251,19.8684089 C37.2437334,19.7317209 36.6083509,19.548698 36.01986,19.3262904 C35.4313692,19.1015661 34.8780471,18.8374571 34.3739613,18.538597 C33.9495914,18.2883885 33.5650795,18.0242795 33.2227701,17.755537 C33.2227701,17.755537 33.2227701,17.7578538 33.2227701,17.7601705 C33.0234803,17.6049486 32.7350964,17.6142155 32.5498742,17.7972384 C32.5240837,17.8227226 32.5029825,17.8482068 32.4842258,17.8760078 C32.4842258,17.8760078 32.4842258,17.8760078 32.4842258,17.8760078 L30.381133,21.3210082 C30.381133,21.3210082 30.381133,21.3210082 30.381133,21.3210082 C30.2639037,21.5132981 30.2873496,21.7681401 30.4561597,21.932629 C30.4842947,21.96043 30.5124297,21.9812807 30.5452539,22.0021314 C31.1079543,22.4562135 31.731614,22.8709109 32.409199,23.225373 C33.1594663,23.6192197 33.9566252,23.9505143 34.7795745,24.2123066 C35.6001793,24.4740988 36.460642,24.6710221 37.3304831,24.8030766 C38.2003241,24.9328144 39.0771989,25 39.935317,25 C41.1545013,25 42.3408613,24.8378278 43.4592284,24.5181169 C44.5869738,24.1960893 45.5974899,23.7026226 46.4649864,23.0516171 C47.3395166,22.3936614 48.0475813,21.5573163 48.5657346,20.5634325 C49.0862325,19.5625985 49.348826,18.3741081 49.348826,17.028079 C49.348826,15.9646928 49.1542254,15.0240942 48.7673689,14.2317672 L48.7814364,14.2294505 Z" id="Path"></path>
              </g>
            </g>
          </svg>

        </a>
        <div class="sm:hidden">
          <button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" data-hs-collapse="#navbar-with-collapse" aria-controls="navbar-with-collapse" aria-label="Toggle navigation">
            <svg class="hs-collapse-open:hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
            </svg>
            <svg class="hs-collapse-open:block hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
            </svg>
          </button>
        </div>
      </div>
      <div id="navbar-with-collapse" class="hidden basis-full grow sm:block">
        <div class="flex flex-col gap-5 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:pl-5">
          <a class="font-medium text-blue-500" href="#" aria-current="page">Landing</a>
          <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Account</a>
          <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Work</a>
          <a class="font-medium text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-500" href="#">Blog</a>
        </div>
      </div>
    </nav>
  </header>
</div>
Close colour variants navbar code