Header Component - Menubar

Website section with navigational menu
Menubar Component

Menubar - Primary

Menubar Section Sample
Menubar - View in a seperate window tab
Output Sample

Implementation Code and the output

<section class="menu-primary-container">
  <div class="menu-primary-row">

     <div class="menu-primary-row-main">
      <div class="menu-primary-logo">
        <a href=" ">
          <i class="ph-fill ph-leaf"></i>
           NeonUI
        </a>
      </div>
       <span class="menu-highlight-pill">
        <a href="">Home</a>
      </span>
      <span class="menu-highlight-pill">
        <div>
          Products
          <span class="drop-arrow">
            <i class="fa-solid fa-angle-down"></i>
          </span>
        </div>
        <div class="menu-primary-dropdown">
          <div class="menu-primary-dropdown-container">
            <div class="menu-primary-dropdown-summary">
              <div class="menu-primary-dropdown-title">
                The List of Products available at NeonUI
              </div>
              <div class="menu-primary-dropdown-desc">Summary: Lorem ipsum, dolor sit amet
                consectetur adipisicing elit.
                Earum aliquam
              </div>
              <a class="button-grey-translucent" href="">
                <span>See Overview</span>
                <i class="ph-bold ph-download-simple"></i>
              </a>
            </div>
            <div class="menu-primary-dropdown-list-container">
              <div>
                <a class="menu-primary-dropdown-list-items" href="">
                  <span class="item-icon">
                    <i class="fa-regular fa-sun"></i>
                  </span>
                  <span>Product1</span>
                  <i class="fa-solid fa-chevron-right right-arrow"></i>
                </a>

                <a class="menu-primary-dropdown-list-items" href="">
                  <span class="item-icon">
                    <i class="ph-light ph-circle-half"></i>
                  </span>
                  <span>Features request</span>
                  <i class="fa-solid fa-chevron-right right-arrow"></i>
                </a>

                <a class="menu-primary-dropdown-list-items" href="">
                  <span class="item-icon">
                    <i class="ph ph-align-right"></i>
                  </span>
                  <span>Service request</span>
                  <i class="fa-solid fa-chevron-right right-arrow"></i>
                </a>

                <a class="menu-primary-dropdown-list-items" href="">
                  <span class="item-icon">
                    <i class="ph ph-mouse-right-click "></i>
                  </span>
                  <span>Container product1</span>
                  <i class="fa-solid fa-chevron-right right-arrow"></i>
                </a>

                <a class="menu-primary-dropdown-list-items" href="">
                  <span class="item-icon">
                    <i class="ph-light ph-circle-half"></i>
                  </span>
                  <span>Review Product</span>
                  <i class="fa-solid fa-chevron-right right-arrow"></i>
                </a>
              </div>
              <div>
                <a class="menu-primary-dropdown-list-items" href="">
                  <span class="item-icon">
                    <i class="fa-regular fa-sun"></i>
                  </span>
                  <span>Product1</span>
                  <i class="fa-solid fa-chevron-right right-arrow"></i>
                </a>

                <a class="menu-primary-dropdown-list-items" href="">
                  <span class="item-icon">
                    <i class="ph-light ph-circle-half"></i>
                  </span>
                  <span>Features request</span>
                  <i class="fa-solid fa-chevron-right right-arrow"></i>
                </a>

                <a class="menu-primary-dropdown-list-items" href="">
                  <span class="item-icon">
                    <i class="ph ph-align-right"></i>
                  </span>
                  <span>Service request</span>
                  <i class="fa-solid fa-chevron-right right-arrow"></i>
                </a>

                <a class="menu-primary-dropdown-list-items" href="">
                  <span class="item-icon">
                    <i class="ph ph-mouse-right-click "></i>
                  </span>
                  <span>Container product1</span>
                  <i class="fa-solid fa-chevron-right right-arrow"></i>
                </a>

                <a class="menu-primary-dropdown-list-items" href="">
                  <span class="item-icon">
                    <i class="ph-light ph-circle-half"></i>
                  </span>
                  <span>Review Product</span>
                  <i class="fa-solid fa-chevron-right right-arrow"></i>
                </a>
              </div>
 
            </div>
            <div class="menu-primary-dropdown-right-info">
              <section class="image-frame">
                 <img class="image-frame-img" src="image1.jpg"
                  alt="green mushroom image">
                <div class="image-title">
                  A cluster of mushrooms
                </div>
               </section>
             </div>
          </div>
        </div>
      </span>
      <span class="menu-highlight-pill">
        <div>
          Services
          <span class="drop-arrow">
            <i class="fa-solid fa-angle-down"></i>
          </span>
          <div class="menu-primary-dropdown">
            <div class="menu-primary-dropdown-container">
              <div class="menu-primary-dropdown-summary">
                <div class="menu-primary-dropdown-title">
                  The List of services available at NeonUI
                </div>
                <div class="menu-primary-dropdown-desc">Summary: Lorem ipsum, dolor sit amet
                  consectetur adipisicing elit.
                  Earum aliquam
                </div>
                <a class="button-grey-translucent" href="">
                  <span>See Overview</span>
                  <i class="ph-bold ph-download-simple"></i>
                </a>
              </div>
              <div class="menu-primary-dropdown-list-container">
                <div>
                  <a class="menu-primary-dropdown-list-items" href="">
                    <span class="item-icon">
                      <i class="fa-regular fa-sun"></i>
                    </span>
                    <span>Product1</span>
                    <i class="fa-solid fa-chevron-right right-arrow"></i>
                  </a>

                  <a class="menu-primary-dropdown-list-items" href="">
                    <span class="item-icon">
                      <i class="ph-light ph-circle-half"></i>
                    </span>
                    <span>Features request</span>
                    <i class="fa-solid fa-chevron-right right-arrow"></i>
                  </a>

                  <a class="menu-primary-dropdown-list-items" href="">
                    <span class="item-icon">
                      <i class="ph ph-align-right"></i>
                    </span>
                    <span>Service request</span>
                    <i class="fa-solid fa-chevron-right right-arrow"></i>
                  </a>

                  <a class="menu-primary-dropdown-list-items" href="">
                    <span class="item-icon">
                      <i class="ph ph-mouse-right-click "></i>
                    </span>
                    <span>Container product1</span>
                    <i class="fa-solid fa-chevron-right right-arrow"></i>
                  </a>

                  <a class="menu-primary-dropdown-list-items" href="">
                    <span class="item-icon">
                      <i class="ph-light ph-circle-half"></i>
                    </span>
                    <span>Review Product</span>
                    <i class="fa-solid fa-chevron-right right-arrow"></i>
                  </a>
                </div>
                <div class="button-grey-translucent">
                  See Overview
                </div>
              </div>
              <div class="menu-primary-dropdown-right-info">
                <section class="image-frame">
                   <img class="image-frame-img" src="image2.jpg"
                    alt="green mushroom image">
                  <div class="image-title">
                    A cluster of mushrooms
                  </div>
                 </section>
                </div>
            </div>
          </div>
        </div>
      </span>
      <span class="menu-highlight-pill">
        <a href="">About</a>
      </span>
      <div class="menu-dropdown-overlay">
      </div>
     </div>
 
     <div class="menu-primary-row-right">
      <div class="menu-primary-right-items">
        <a class="button-black" href="">
          <span>Download</span>
          <i class="ph-bold ph-download-simple"></i>
        </a>
        <a class="button-grey-translucent" href="">
          <span>Login</span>
        </a>
      </div>
      <span class="menu-mobile">
        <span class="menu-mobile-container">
          <span class="menu-lines"></span>
          <span class="menu-lines"></span>
          <span class="menu-lines"></span>
        </span>
      </span>
    </div>
   </div>
 </section>

<aside class="menu-mobile-overlay">
</aside>


<section class="menu-mobile-slidemenu">
  <aside class="modal-close-button">
     <svg class=" " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
      fill="none">
      <path fill-rule="evenodd" clip-rule="evenodd"
        d="M10.4951 11.5557L5.02539 17.0254L6.08605 18.086L11.5557 12.6164L17.0254 18.0861L18.086 17.0254L12.6164 
        11.5557L18.086 6.08605L17.0254 5.02539L11.5557 10.4951L6.08605 5.0254L5.02539 6.08606L10.4951 11.5557Z"
        fill="#fff"></path>
    </svg>
  </aside>

  <section class="slidemenu-main-section">
    <span class="slidemenu-main-text">
      <span>Products</span>
      <i class="fa-solid fa-chevron-right right-arrow"></i>
    </span>
    <span class="slidemenu-main-text">
      <span>Feature Request</span>
      <i class="fa-solid fa-chevron-right right-arrow"></i>
    </span>
    <span class="slidemenu-main-text">
      <span>Service request</span>
      <i class="fa-solid fa-chevron-right right-arrow"></i>
    </span>
    <span class="slidemenu-main-text">
      <span>Continer Product</span>
      <i class="fa-solid fa-chevron-right right-arrow"></i>
    </span>
    <span class="slidemenu-main-text">
      <span>Review Product</span>
      <i class="fa-solid fa-chevron-right right-arrow"></i>
    </span>
    <span class="slidemenu-main-text">
      <span>Test menu</span>
      <i class="fa-solid fa-chevron-right right-arrow"></i>
    </span>
    <span class="slidemenu-main-text">
      <span>Service request</span>
      <i class="fa-solid fa-chevron-right right-arrow"></i>
    </span>
    <span class="slidemenu-main-text">
      <span>Continer Product</span>
      <i class="fa-solid fa-chevron-right right-arrow"></i>
    </span>
    <span class="slidemenu-main-text">
      <span>Review Product</span>
      <i class="fa-solid fa-chevron-right right-arrow"></i>
    </span>
    <span class="slidemenu-main-text">
      <span>Test menu</span>
      <i class="fa-solid fa-chevron-right right-arrow"></i>
    </span>
  </section>
  <section class="slidemenu-sub-section">
    <span class="slidemenu-sub-text">
      <span>NeonUI Services</span>
      <i class="fa-solid fa-chevron-right right-arrow"></i>
    </span>
    <span class="slidemenu-sub-text">
      <span>World of NeonUI</span>
      <i class="fa-solid fa-chevron-right right-arrow"></i>
    </span>
    <span class="slidemenu-sub-text">
      <span>Store Locator</span>
      <i class="fa-solid fa-chevron-right right-arrow"></i>
    </span>
  </section>
  <section class="slidemenu-last-section">
    <span class="slidemenu-last-text"><a href="">Sign In</a></span>
    <span class="slidemenu-last-text"><a href="">My Orders</a></span>
    <span class="slidemenu-last-text"><a href="">Contact Us</a></span>
    <span class="slidemenu-last-text"><a href="">+1-555-555-5555</a></span>
  </section>
</section>
Copy
Image Components - Image Carousel
Components - Footer