traefik/docs/theme/partials/company-header.html

<div class="site-header-and-placeholder-wrapper">
  <div class="header-placeholder">
    {/* Do not remove this. It serves an important purpose. */}
  </div>

  <header class="site-header">
    <div class="wrapper-1200">
      <div class="left">
        <div class="site-header__main">
          <label class="md-icon md-icon--menu md-header-nav__button" for="__drawer"></label>
          <a href="https://doc.traefik.io/">
            <img
              class="site-header__logo"
              alt="Load Balancer + Kubernetes Ingress + Service Mesh with Traefik and Traefik Mesh"
              src="{{ 'assets/images/traefik-labs.svg' | url }}"
            />
          </a>
        </div>

        <nav class="site-header__nav">
          <div class="menu-item-wrapper menu-item-wrapper--dropdown">
            <a class="menu-item menu-item--with-icon">
              <span class="title">Products</span>
              <span class="icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </span>
            </a>

            <div class="nav-dropdown-menu nav-dropdown-menu--products">
              <div class="nav-dropdown-menu-wrapper">
                <div class="dm-header">Products</div>
                <div class="dm-items">

                  <div class="dm-item">
                    <div class="dmi-image proxy">
                      <img src="{{ 'assets/images/traefik-proxy-logo.svg' | url }}" alt="Traefik Proxy" />
                    </div>
                    <a class="dmi-details" href="https://traefik.io/traefik/">
                      <div class="dmi-title">Traefik Proxy</div>
                      <div class="dmi-description">
                        Expose, Secure and Monitor your modern applications
                      </div>
                    </a>
                  </div>

                  <div class="dm-item">
                    <div class="dmi-image mesh">
                      <img src="{{ 'assets/images/traefik-mesh-logo.svg' | url }}" alt="Traefik Mesh" />
                    </div>
                    <a class="dmi-details" href="https://traefik.io/traefik-mesh/">
                      <div class="dmi-title">Traefik Mesh</div>
                      <div class="dmi-description">
                        Route and Monitor communications inside your
                        Kubernetes cluster
                      </div>
                    </a>
                  </div>

                  <div class="dm-item dm-item--traefikee">
                    <div class="dmi-image enterprise">
                      <img src="{{ 'assets/images/traefik-enterprise-logo.svg' | url }}" alt="traefik enterprise" />
                    </div>
                    <a class="dmi-details" href="https://traefik.io/traefik-enterprise/">
                      <div class="dmi-title">
                        Traefik Enterprise
                      </div>
                      <div class="dmi-description">
                        Ensure high availability, scalability, and security
                        of your microservices
                      </div>
                    </a>
                  </div>

                  <div class="dm-item">
                    <div class="dmi-image pilot">
                      <img src="{{ 'assets/images/traefik-pilot-logo.svg' | url }}" alt="Traefik Pilot" />
                    </div>
                    <a class="dmi-details" href="https://traefik.io/traefik-pilot/">
                      <div class="dmi-title">Traefik Pilot</div>
                      <div class="dmi-description">
                        Monitor and Manage your Traefik Instances
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="menu-item-wrapper menu-item-wrapper--dropdown">
            <a class="menu-item menu-item--with-icon">
              <span class="title">Solutions</span>
              <span class="icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </span>
            </a>

            <div class="nav-dropdown-menu nav-dropdown-menu--solutions">
              <div class="nav-dropdown-menu-wrapper">
                <div class="dm-header">Solutions</div>
                <div class="dm-items">
                  <div class="dm-item">
                    <div class="dmi-image">
                      <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgPHBhdGggZmlsbD0iIzYxOEZGRSIgZD0iTTE0LjIzNSAzMy4xNDZjLjM0MS0uNDEzLjg4LS42MSAxLjQwNy0uNTE0LjgzMy4xMzYgMS42NzYuMTk4IDIuNTIuMTg3aC4wMTFBMS40ODQgMS40ODQgMCAxIDEgMTggMzUuNzgyYy0uOTQ4IDAtMS44OTQtLjA3NC0yLjgzLS4yMjVhMS40ODIgMS40ODIgMCAwIDEtLjkzNS0yLjQxem0xMS4zMTItMi40MDJhMS40ODIgMS40ODIgMCAwIDEgMS41MTIgMi41NWMtLjg3LjUxNi0xLjc4My45NTYtMi43MjggMS4zMTYtLjc2NS4yOC0xLjYxMy0uMS0xLjkxNC0uODU2YTEuNDgyIDEuNDgyIDAgMCAxIC44NTgtMS45MTMgMTQuOTIgMTQuOTIgMCAwIDAgMi4yNzItMS4wOTd6bS0xOC40MDQtMS41NmExLjQ4MiAxLjQ4MiAwIDAgMSAxLjUwMi4zMDUgMTUuMDggMTUuMDggMCAwIDAgMi4wODUgMS40MjFjLjQ2MS4yNTQuNzUuNzQuNzU1IDEuMjdhMS40ODIgMS40ODIgMCAwIDEtMi4yMDkgMS4zMDcgMTcuOTA0IDE3LjkwNCAwIDAgMS0yLjUwMS0xLjcwNiAxLjQ4MiAxLjQ4MiAwIDAgMSAuMzY4LTIuNTk3em0yMy43Ny0zLjkxOGExLjQ4MiAxLjQ4MiAwIDAgMSAyLjU4MyAxLjQ1NSAxNy44MTYgMTcuODE2IDAgMCAxLTEuNzA2IDIuNTAxIDEuNDgyIDEuNDgyIDAgMSAxLTIuMjk4LTEuODcxIDE0Ljc3OSAxNC43NzkgMCAwIDAgMS40MjEtMi4wODV6TTIuMjQgMjIuNDE0YTEuNDgyIDEuNDgyIDAgMCAxIDEuOTEyLjg1N2MuMzAyLjc4OC42NzIgMS41NSAxLjEwNCAyLjI3NWExLjQ4NSAxLjQ4NSAwIDEgMS0yLjU1OCAxLjUwOCAxNy43ODIgMTcuNzgyIDAgMCAxLTEuMzE2LTIuNzI4IDEuNDgyIDEuNDgyIDAgMCAxIC44NTgtMS45MTJ6bTMyLjA0NC02LjA3NWExLjQ5NyAxLjQ5NyAwIDAgMSAxLjQ5OCAxLjQ2NSAxNy45MyAxNy45MyAwIDAgMS0uMjI1IDMuMDIgMS40ODIgMS40ODIgMCAwIDEtMi45MjctLjQ3Yy4xMzQtLjgzMi4xOTctMS42NzUuMTg5LTIuNTE4YTEuNDgyIDEuNDgyIDAgMCAxIDEuNDY1LTEuNDk3ek0uNDQzIDE1LjE2OWExLjQ4MiAxLjQ4MiAwIDEgMSAyLjkyNy40NjkgMTQuOTI4IDE0LjkyOCAwIDAgMC0uMTg5IDIuNTIgMS40ODIgMS40ODIgMCAwIDEtMS40NjUgMS40OTdIMS43QTEuNDgyIDEuNDgyIDAgMCAxIC4yMTggMTguMTlhMTcuOTMgMTcuOTMgMCAwIDEgLjIyNS0zLjAyMnpNMzEuMzA3IDguNDdhMS40ODIgMS40ODIgMCAwIDEgMS45OTUuNDY3Yy41MTUuODcuOTU1IDEuNzgzIDEuMzE2IDIuNzI5LjI5Ljc2NC0uMDk0IDEuNjItLjg1OCAxLjkxMWExLjUgMS41IDAgMCAxLTEuOTEyLS44NTZjLS4zLS43OS0uNjY2LTEuNTUzLTEuMDk3LTIuMjhhMS40ODIgMS40ODIgMCAwIDEgLjU1Ni0xLjk3MXpNNC4yMSA2Ljc3YTEuNDgyIDEuNDgyIDAgMSAxIDIuMjk4IDEuODcxIDE0Ljc5MyAxNC43OTMgMCAwIDAtMS40MjEgMi4wODcgMS40ODIgMS40ODIgMCAwIDEtMi41ODMtMS40NTZBMTcuNzMgMTcuNzMgMCAwIDEgNC4yMSA2Ljc3MnptMjEuMDMyLTQuMjU0YTEuNDgyIDEuNDgyIDAgMCAxIDEuNDgyLS4wMTZjLjg4LjQ5NyAxLjcxNyAxLjA2NyAyLjUwMSAxLjcwNGExLjQ4MiAxLjQ4MiAwIDEgMS0xLjg3IDIuMyAxNC45NTIgMTQuOTUyIDAgMCAwLTIuMDg1LTEuNDIgMS40ODIgMS40ODIgMCAwIDEtLjAyOC0yLjU2OHpNMTEuNjY5IDEuMzhhMS40ODIgMS40ODIgMCAxIDEgMS4wNTYgMi43N2MtLjc4Ny4zLTEuNTQ3LjY2Ni0yLjI3MiAxLjA5NUExLjQ4MiAxLjQ4MiAwIDEgMSA4Ljk0IDIuNjk1Yy44Ny0uNTE1IDEuNzgzLS45NTUgMi43MjgtMS4zMTZ6TTE3LjgwNy4yMThhMTcuOTc0IDE3Ljk3NCAwIDAgMSAzLjAyLjIyMiAxLjQ4MyAxLjQ4MyAwIDEgMS0uNDcgMi45MjggMTQuNTYgMTQuNTYgMCAwIDAtMi41MTktLjE4N2gtLjAxNmExLjQ4MiAxLjQ4MiAwIDAgMS0uMDE1LTIuOTYzeiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMxRTU0RDUiIGQ9Ik0yOC42MjkgMTkuNTA2Yy0uMDM0IDAtLjA2OCAwLS4wNjgtLjAzMnMtLjA2OC0uMDMyLS4xMzUtLjAzMmMtLjEzNi0uMDMzLS4yNzEtLjAzMy0uNDA2LS4wMzMtLjA2OCAwLS4xMzYgMC0uMjAzLS4wMzJoLS4wMzRhNy4xNDIgNy4xNDIgMCAwIDEtMS4xNS0uMTkzLjQuNCAwIDAgMS0uMjM3LS4yMjZjLjAzNCAwIDAgMCAwIDBsLS4yNy0uMDY1Yy4xMzQtLjkzNS4wNjctMS45MDItLjEzNi0yLjgzN2E4LjUyNSA4LjUyNSAwIDAgMC0xLjE4NC0yLjY0NWwuMjAzLS4xOTN2LS4wMzJjMC0uMDk3LjAzMy0uMjI2LjEwMS0uMjkuMzA1LS4yNTguNjEtLjQ1Mi45NDctLjY0NWwuMjAzLS4wOTdjLjEzNi0uMDY1LjIzNy0uMTMuMzczLS4xOTQuMDMzLS4wMzIuMDY3LS4wMzIuMTAxLS4wNjRzMC0uMDMyIDAtLjA2NWMuMzA0LS4yMjUuMzcyLS42MTIuMTM1LS45MDNhLjY1OC42NTggMCAwIDAtLjQ3My0uMjI1LjgzMy44MzMgMCAwIDAtLjQ3NC4xNjFsLS4wMzQuMDMyYy0uMDM0LjAzMi0uMDY3LjA2NS0uMTAxLjA2NS0uMTAyLjA5Ni0uMjAzLjE5My0uMjcuMjktLjAzNS4wNjQtLjEwMi4wOTctLjEzNi4xMjlhNC4zOSA0LjM5IDAgMCAxLS44NDYuNzFjLS4wNjguMDMyLS4xMzUuMDY0LS4yMDMuMDY0LS4wMzQgMC0uMTAxIDAtLjEzNS0uMDMyaC0uMDM0bC0uMjcuMTZjLS4yNzEtLjI1Ny0uNTc2LS41MTUtLjg0Ny0uNzczLTEuMjUxLS45MzUtMi44MDctMS41MTYtNC4zOTctMS42NzdsLS4wMzQtLjI1OHYuMDMyYy0uMTAyLS4wNjQtLjEzNi0uMTYtLjE3LS4yNTggMC0uMzU0IDAtLjcwOS4wNjgtMS4wOTZWOC4yMmMwLS4wNjUuMDM0LS4xMy4wMzQtLjE5NC4wMzQtLjEyOS4wMzQtLjI1OC4wNjgtLjM4N3YtLjE5M2MuMDM0LS4zMjMtLjIzNy0uNjQ1LS41NzUtLjY3Ny0uMjAzLS4wMzMtLjQwNi4wNjQtLjU3Ni4yMjVhLjYyMi42MjIgMCAwIDAtLjIwMy40NTJ2LjE2MWMwIC4xMy4wMzQuMjU4LjA2OC4zODcuM
                    </div>
                    <a
                      href="https://traefik.io/solutions/kubernetes-ingress/"
                      class="dmi-details"
                    >
                      <div class="dmi-title">Kubernetes Ingress</div>
                      <div class="dmi-description">
                        A centralized routing solution for your Kubernetes
                        deployment
                      </div>
                    </a>
                  </div>
                  <div class="dm-item">
                    <div class="dmi-image">
                      <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgPHBhdGggZmlsbD0iIzYxOEZGRSIgZD0iTTI2LjI1IDI0LjcydjYuMDNhLjc1Ljc1IDAgMCAxLS43NS43NWgtMi45MTdhMS41IDEuNSAwIDEgMCAuMDAxIDNIMjUuNWEzLjc1IDMuNzUgMCAwIDAgMy43NS0zLjc1di02LjAzYTEuNSAxLjUgMCAwIDAtMyAweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiMxRTU0RDUiIGQ9Ik0xOCA2YTIuMjUgMi4yNSAwIDAgMCAyLjI1LTIuMjV2LTEuNUEyLjI1IDIuMjUgMCAwIDAgMTggMEgyLjI1QTIuMjUgMi4yNSAwIDAgMCAwIDIuMjV2MS41QTIuMjUgMi4yNSAwIDAgMCAyLjI1IDZIMTh6TTMzLjc1IDIyLjVBMi4yNSAyLjI1IDAgMCAwIDM2IDIwLjI1di0xLjVhMi4yNSAyLjI1IDAgMCAwLTIuMjUtMi4yNUgxOGEyLjI1IDIuMjUgMCAwIDAtMi4yNSAyLjI1djEuNUEyLjI1IDIuMjUgMCAwIDAgMTggMjIuNWgxNS43NXoiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjNjE4RkZFIiBkPSJNMjIuNSAxNC4yNDdWMTMuNWEzLjc1IDMuNzUgMCAwIDAtMy43NS0zLjc1aC02QS43NS43NSAwIDAgMSAxMiA5di0uNzYxYTEuNSAxLjUgMCAwIDAtMyAwVjlhMy43NSAzLjc1IDAgMCAwIDMuNzUgMy43NWg2YS43NS43NSAwIDAgMSAuNzUuNzV2Ljc0N2ExLjUgMS41IDAgMCAwIDMgMHoiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjMUU1NEQ1IiBkPSJNMTggMzZhMi4yNSAyLjI1IDAgMCAwIDIuMjUtMi4yNXYtMS41QTIuMjUgMi4yNSAwIDAgMCAxOCAzMEgyLjI1QTIuMjUgMi4yNSAwIDAgMCAwIDMyLjI1djEuNUEyLjI1IDIuMjUgMCAwIDAgMi4yNSAzNkgxOHoiLz4KICAgIDwvZz4KPC9zdmc+Cg==" alt="Service Mesh" />
                    </div>
                    <a href="https://traefik.io/traefik-mesh/" class="dmi-details">
                      <div class="dmi-title">Service Mesh</div>
                      <div class="dmi-description">
                        Monitor and route your internal communications
                        easily
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="menu-item-wrapper menu-item-wrapper--dropdown">
            <a class="menu-item menu-item--with-icon">
              <span class="title">Learn</span>
              <span class="icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </span>
            </a>

            <div class="nav-dropdown-menu nav-dropdown-menu--learn">
              <div class="nav-dropdown-menu-wrapper">
                <div class="dm-left">
                  <div class="dm-header">Learn</div>
                  <div class="dm-items">
                    <a href="https://traefik.io/blog/" class="dm-item">
                      Blog
                    </a>
                    <a href="https://traefik.io/resources/" class="dm-item">
                      Resource Library
                    </a>
                    <a href="https://traefik.io/success-stories/" class="dm-item">
                      Success Stories
                    </a>
                    <a href="https://doc.traefik.io/" class="dm-item">
                      Docs
                    </a>
                    <a href="https://traefik.io/community/" class="dm-item">
                      Community
                    </a>
                    <a href="https://traefik.io/events/" class="dm-item">
                      Events
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="menu-item-wrapper">
            <a href="https://traefik.io/pricing/" class="menu-item">
              Pricing
            </a>
          </div>

          <div class="menu-item-wrapper menu-item-wrapper--dropdown">
            <a class="menu-item menu-item--with-icon">
              <span class="title">Company</span>
              <span class="icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </span>
            </a>

            <div class="nav-dropdown-menu nav-dropdown-menu--company">
              <div class="nav-dropdown-menu-wrapper">
                <div class="dm-left">
                  <div class="dm-header">Company</div>
                  <div class="dm-items">
                    <a href="https://traefik.io/about-us/" class="dm-item">
                      About
                    </a>
                    <a href="https://traefik.io/partners/" class="dm-item">
                      Partners
                    </a>
                    <a href="https://traefik.io/careers/" class="dm-item">
                      Careers
                    </a>
                    <a href="https://traefik.io/press/" class="dm-item">
                      Press
                    </a>
                  </div>
                </div>
                <div class="dm-right">
                  <p>Interested in joining Traefik Labs?</p>
                  <a
                    class="btn-type-1"
                    href="https://traefik.io/careers/#open-positions"
                  >
                    View Open Positions
                  </a>
                </div>
              </div>
            </div>
          </div>
        </nav>
      </div>

      <div class="right">
        <label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
        <div class="site-header__demo-button">
          <a
            class="button--secondary"
            href="https://info.traefik.io/request-demo-traefikee"
          >
            Get a demo
          </a>
        </div>
      </div>

      <!-- <div class="drawer">
        <div
          class={"drawer-handle " + (isDrawerOpen ? "open" : "")}
          onClick={() => toggleDrawer(!isDrawerOpen)}
        >
          <span class="first"></span>
          <span class="second"></span>
        </div>
      </div> -->
    </div>
  </header>
  <!-- <DrawerNav isDrawerOpen={isDrawerOpen} /> -->
</div>