Documentation

XMenu - Ultimate Responsive Mega Menu

XMenu

XMenu - Ultimate Responsive Mega Menu

This documentation is last updated on 20 October 2024

Thank you for purchasing this HTML template.

If you like this template, Please support us by rating this template with 5 stars

Sass Compile -

1.- Install Node.js

To compile Sass via the command line first, we need to install node.js. The easiest way is downloading it from the official website nodejs.org open the package and follow the wizard.

2.- Initialize NPM

NPM is the Node Package Manager for JavaScript. NPM makes it easy to install and uninstall third party packages. To initialize a Sass project with NPM, open your terminal and CD (change directory) to your project folder.

npm init

Once in the correct folder, run the command npm init. You will be prompted to answer several questions about the project, after which NPM will generate a package.json file in your folder.

3.- Install Node-Sass

Node-sass is an NPM package that compiles Sass to CSS (which it does very quickly too). To install node-sass run the following command in your terminal: npm install node-sass

npm install node-sass
4.- Write Node-sass Command

Everything is ready to write a small script in order to compile Sass. Open the package.json file in a code editor. You will see something like this: In the scripts section add an scss command

"scripts": {
  "sass": "node-sass --watch scss/main.scss css/style.css"
},
5.- Run the Script

To execute our one-line script, we need to run the following command in the terminal: npm run sass

npm run sass
6.- Other Option

--source-map

"sass": "node-sass --watch scss/main.scss css/style.css --source-map css/style.css.map"

Folder Directories -

  • Images

    This folder contains all the images of XMenu template.

  • Fonts

    This folder font files for various template features.

  • CSS

    This folder contains all the CSS files of XMenu template.

  • JS

    This folder has all javascript files for various template features.

  • Vendor

    This folder has all plugins used in the template.

  • SCSS

    An SCSS file usually has a .scss extension and can be used to write more maintainable and organized styles for your web projects.

Folder Structure -

  • xhtml
    • css
    • fonts
    • icons
    • images
    • js
    • scss
    • vendor
    • index.html
    • ..........

Credits -

Xmenu -

Default Nav

By default navs are left-aligned

1 
<div class="header-nav xmenu navbar-collapse collapse" id="xMenuNav">
  <ul class="nav navbar-nav">
    <li><a href="javascript:void(0);"><span>Nav 1</span></a></li>
    <li><a href="javascript:void(0);"><span>Nav 2</span></a></li>
    <li><a href="javascript:void(0);"><span>Nav 3</span></a></li>
    <li><a href="javascript:void(0);"><span>Nav 4</span></a></li>
    <li><a href="javascript:void(0);"><span>Nav 5</span></a></li>
  </div>
</div>
Nav Center

Centered with .justify-content-center

1 
<div class="header-nav xmenu navbar-collapse collapse justify-content-center" id="xMenuNav">
  <ul class="nav navbar-nav">
    <li><a href="javascript:void(0);"><span>Nav 1</span></a></li>
    <li><a href="javascript:void(0);"><span>Nav 2</span></a></li>
    <li><a href="javascript:void(0);"><span>Nav 3</span></a></li>
    <li><a href="javascript:void(0);"><span>Nav 4</span></a></li>
    <li><a href="javascript:void(0);"><span>Nav 5</span></a></li>
  </div>
</div>
Nav Right

Right-aligned with .justify-content-end

1 
<div class="header-nav xmenu navbar-collapse collapse justify-content-end" id="xMenuNav">
  <ul class="nav navbar-nav">
    <li><a href="javascript:void(0);"><span>Nav 1</span></a></li>
    <li><a href="javascript:void(0);"><span>Nav 2</span></a></li>
    <li><a href="javascript:void(0);"><span>Nav 3</span></a></li>
    <li><a href="javascript:void(0);"><span>Nav 4</span></a></li>
    <li><a href="javascript:void(0);"><span>Nav 5</span></a></li>
  </div>
</div>
Menu Auto Width
1 
<li class="has-mega-menu sub-menu-down auto-width">
  <a href="javascript:void(0);"><span>Auto Width</span><i class="fas fa-chevron-down tabindex"></i></a>
  <div class="mega-menu">
	<ul>
	  <li>
	  	<span class="menu-title">Blog Dark Style</span>
	  	<ul>
		  <li><a href="javascript:void(0);">Blog 2 Column</a></li>
		  <li><a href="javascript:void(0);">Blog 2 Column Sidebar</a></li>
		  <li><a href="javascript:void(0);">Blog 3 Column</a></li>
		  <li><a href="javascript:void(0);">Blog Half Image</a></li>
	  	</ul>
	  	<span class="menu-title">Blog Light Style</span>
	  	<ul>
		  <li><a href="javascript:void(0);">Blog 2 Column</a></li>
		  <li><a href="javascript:void(0);">Blog 2 Column Sidebar</a></li>
		  <li><a href="javascript:void(0);">Blog Half Image</a></li>
		  <li><a href="javascript:void(0);">Blog Exclusive</a></li>
	  	</ul>
	  </li>
	  <li>
	  	<span class="menu-title">Blog Sidebar</span>
	  	<ul>
		  <li><a href="javascript:void(0);">Blog left Sidebar</a></li>
		  <li><a href="javascript:void(0);">Blog Right Sidebar</a></li>
		  <li><a href="javascript:void(0);">Blog Both Sidebar</a></li>
		  <li><a href="javascript:void(0);">Blog Wide Sidebar</a></li>
	  	</ul>
	  	<span class="menu-title">Blog Page</span>
	  	<ul>
		  <li><a href="javascript:void(0);">Blog Archive</a></li>
		  <li><a href="javascript:void(0);">Author</a></li>
		  <li><a href="javascript:void(0);">Blog Category</a></li>
		  <li><a href="javascript:void(0);">Blog Tag</a></li>
	  	</ul>
	  </li>
	  <li>
	  	<span class="menu-title">Blog Details</span>
	  	<ul>	
		  <li><a href="javascript:void(0);">Post Standard</a></li>
		  <li><a href="javascript:void(0);">Post Left Sidebar</a></li>
		  <li><a href="javascript:void(0);">Post Header Image</a></li>
		  <li><a href="javascript:void(0);">Post Slide Show</a></li>
		  <li><a href="javascript:void(0);">Post Side Image</a></li>
		  <li><a href="javascript:void(0);">Post Gallery</a></li>
		  <li><a href="javascript:void(0);">Post Gallery Alternative</a></li>
		  <li><a href="javascript:void(0);">Post Open Gutenberg</a></li>
		  <li><a href="javascript:void(0);">Post Link</a></li>
		  <li><a href="javascript:void(0);">Post Audio</a></li>
	  	</ul>
	  </li>
	  <li>
	  	<span class="menu-title">Recent Posts</span>
	  	<div class="widget widget_post pt-2">
		  <ul>
		  	<li>
			  <div class="dz-media">
			  	<img src="images/posts/small/pic1.png" alt="">
			  </div>
			  <div class="dz-content">
			  	<h6 class="name"><a href="javascript:void(0);">Cozy Knit Cardigan Sweater</a></h6>
			  	<span class="time">July 23, 2024</span>
			  </div>
		  	</li>
		  	<li>
			  <div class="dz-media">
			  	<img src="images/posts/small/pic2.png" alt="">
			  </div>
			  <div class="dz-content">
			  	<h6 class="name"><a href="javascript:void(0);">Sophisticated Swagger Suit</a></h6>
			  	<span class="time">July 23, 2024</span>
			  </div>
		  	</li>
		  	<li>
			  <div class="dz-media">
			  	<img src="images/posts/small/pic3.png" alt="">
			  </div>
			  <div class="dz-content">
			  	<h6 class="name"><a href="javascript:void(0);">Athletic Mesh Sports Leggings</a></h6>
			  	<span class="time">July 23, 2024</span>
			  </div>
		  	</li>
		  	<li>
			  <div class="dz-media">
			  	<img src="images/posts/small/pic4.png" alt="">
			  </div>
			  <div class="dz-content">
			  	<h6 class="name"><a href="javascript:void(0);">Satin Wrap Party Blouse</a></h6>
			  	<span class="time">July 23, 2024</span>
			  </div>
		  	</li>
		  </ul>
	  	</div>
	  </li>
	</ul>
  </div>
</li>
Menu Wide Width
1 
<li class="has-mega-menu sub-menu-down wide-width">
  <a href="javascript:void(0);"><span>Wide Width</span><i class="fas fa-chevron-down tabindex"></i></a>
  <div class="mega-menu">
    <ul>
      <li>
        <span class="menu-title">Pages</span>
        <ul>
          <li><a href="javascript:void(0);">About Us</a></li>
          <li><a href="javascript:void(0);">About Me</a></li>
          <li><a href="javascript:void(0);">Pricing Table</a></li>
          <li><a href="javascript:void(0);">Our Gift Vouchers</a></li>
          <li><a href="javascript:void(0);">What We Do</a></li>
          <li><a href="javascript:void(0);">Faqs 1</a></li>
          <li><a href="javascript:void(0);">Faqs 2</a></li>
          <li><a href="javascript:void(0);">Our Team</a></li>
        </ul>
      </li>
      <li>
        <span class="menu-title">Contact Us</span>
        <ul>
          <li><a href="javascript:void(0);">Contact Us 1</a></li>
          <li><a href="javascript:void(0);">Contact Us 2</a></li>
          <li><a href="javascript:void(0);">Contact Us 3</a></li>
        </ul>
        <span class="menu-title">Web Pages</span>
        <ul>
          <li><a href="javascript:void(0);">Error 404 1</a></li>
          <li><a href="javascript:void(0);">Error 404 2</a></li>
          <li><a href="javascript:void(0);">Coming Soon</a></li>
          <li><a href="javascript:void(0);">Under Construction</a></li>
        </ul>
      </li>
      <li>
        <span class="menu-title">Banner Style</span>
        <ul>						
          <li><a href="javascript:void(0);">Banner with BG Color</a></li>
          <li><a href="javascript:void(0);">Banner with Image</a></li>
          <li><a href="javascript:void(0);">Banner with Video</a></li>
          <li><a href="javascript:void(0);">Banner with Kanbern</a></li>
          <li><a href="javascript:void(0);">Banner Small</a></li>
          <li><a href="javascript:void(0);">Banner Medium</a></li>
          <li><a href="javascript:void(0);">Banner Large</a></li>
        </ul>
      </li>
      <li>
      <span class="menu-title">Header Style</span>
        <ul>
          <li><a href="javascript:void(0);">Header Style 1</a></li>
          <li><a href="javascript:void(0);">Header Style 2</a></li>
          <li><a href="javascript:void(0);">Header Style 3</a></li>
          <li><a href="javascript:void(0);">Header Style 4</a></li>
          <li><a href="javascript:void(0);">Header Style 5</a></li>
          <li><a href="javascript:void(0);">Header Style 6</a></li>
          <li><a href="javascript:void(0);">Header Style 7</a></li>
        </ul>
      </li>
      <li>
        <span class="menu-title">Footer Style</span>
        <ul>
          <li><a href="javascript:void(0);">Footer Style 1</a></li>
          <li><a href="javascript:void(0);">Footer Style 2</a></li>
          <li><a href="javascript:void(0);">Footer Style 3</a></li>
          <li><a href="javascript:void(0);">Footer Style 4</a></li>
          <li><a href="javascript:void(0);">Footer Style 5</a></li>
          <li><a href="javascript:void(0);">Footer Style 6</a></li>
          <li><a href="javascript:void(0);">Footer Style 7</a></li>
        </ul>
      </li>
      <li>
        <span class="menu-title">Dashboard</span>
        <ul>
          <li><a href="javascript:void(0);">Dashboard</a></li>
          <li><a href="javascript:void(0);">Orders</a></li>
          <li><a href="javascript:void(0);">Orders Details</a></li>
          <li><a href="javascript:void(0);">Orders Confirmation</a></li>
          <li><a href="javascript:void(0);">Downloads</a></li>
          <li><a href="javascript:void(0);">Return Request</a></li>
          <li><a href="javascript:void(0);">Return Request Detail</a></li>
          <li><a href="javascript:void(0);">Return Request Confirmed</a></li>
        </ul>
      </li>
    </ul>
  </div>
</li>
Menu Full Width
1 
<li class="has-mega-menu sub-menu-down full-width">
  <a href="javascript:void(0);"><span>Full Width</span><i class="fas fa-chevron-down tabindex"></i></a>
  <div class="mega-menu">
    <ul>
      <li>
        <span class="menu-title">Pages</span>
        <ul>
          <li><a href="javascript:void(0);">About Us</a></li>
          <li><a href="javascript:void(0);">About Me</a></li>
          <li><a href="javascript:void(0);">Pricing Table</a></li>
          <li><a href="javascript:void(0);">Our Gift Vouchers</a></li>
          <li><a href="javascript:void(0);">What We Do</a></li>
          <li><a href="javascript:void(0);">Faqs 1</a></li>
          <li><a href="javascript:void(0);">Faqs 2</a></li>
          <li><a href="javascript:void(0);">Our Team</a></li>
        </ul>
      </li>
      <li>
        <span class="menu-title">Contact Us</span>
        <ul>
          <li><a href="javascript:void(0);">Contact Us 1</a></li>
          <li><a href="javascript:void(0);">Contact Us 2</a></li>
          <li><a href="javascript:void(0);">Contact Us 3</a></li>
        </ul>
        <span class="menu-title">Web Pages</span>
        <ul>
          <li><a href="javascript:void(0);">Error 404 1</a></li>
          <li><a href="javascript:void(0);">Error 404 2</a></li>
          <li><a href="javascript:void(0);">Coming Soon</a></li>
          <li><a href="javascript:void(0);">Under Construction</a></li>
        </ul>
      </li>
      <li>
        <span class="menu-title">Banner Style</span>
        <ul>
          <li><a href="javascript:void(0);">Banner with BG Color</a></li>
          <li><a href="javascript:void(0);">Banner with Image</a></li>
          <li><a href="javascript:void(0);">Banner with Video</a></li>
          <li><a href="javascript:void(0);">Banner with Kanbern</a></li>
          <li><a href="javascript:void(0);">Banner Small</a></li>
          <li><a href="javascript:void(0);">Banner Medium</a></li>
          <li><a href="javascript:void(0);">Banner Large</a></li>
        </ul>
      </li>
      <li>
        <span class="menu-title">Header Style</span>
        <ul>
          <li><a href="javascript:void(0);">Header Style 1</a></li>
          <li><a href="javascript:void(0);">Header Style 2</a></li>
          <li><a href="javascript:void(0);">Header Style 3</a></li>
          <li><a href="javascript:void(0);">Header Style 4</a></li>
          <li><a href="javascript:void(0);">Header Style 5</a></li>
          <li><a href="javascript:void(0);">Header Style 6</a></li>
          <li><a href="javascript:void(0);">Header Style 7</a></li>
        </ul>
      </li>
      <li>
        <span class="menu-title">Footer Style</span>
        <ul>
          <li><a href="javascript:void(0);">Footer Style 1</a></li>
          <li><a href="javascript:void(0);">Footer Style 2</a></li>
          <li><a href="javascript:void(0);">Footer Style 3</a></li>
          <li><a href="javascript:void(0);">Footer Style 4</a></li>
          <li><a href="javascript:void(0);">Footer Style 5</a></li>
          <li><a href="javascript:void(0);">Footer Style 6</a></li>
          <li><a href="javascript:void(0);">Footer Style 7</a></li>
        </ul>
      </li>
      <li>
        <span class="menu-title">Dashboard</span>
        <ul>
          <li><a href="javascript:void(0);">Dashboard</a></li>
          <li><a href="javascript:void(0);">Orders</a></li>
          <li><a href="javascript:void(0);">Orders Details</a></li>
          <li><a href="javascript:void(0);">Orders Confirmation</a></li>
          <li><a href="javascript:void(0);">Downloads</a></li>
          <li><a href="javascript:void(0);">Return Request</a></li>
          <li><a href="javascript:void(0);">Return Request Detail</a></li>
          <li><a href="javascript:void(0);">Return Request Confirmed</a></li>
        </ul>
      </li>
    </ul>
  </div>
</li>
Dropdown
1 
<li class="sub-menu-down menu-right">
  <a href="javascript:void(0);"><span>Dropdown</span><i class="fas fa-chevron-down tabindex"></i></a>
  <ul class="sub-menu">
    <li><a href="javascript:void(0);">Nav link 1</a></li>
    <li><a href="javascript:void(0);">Nav link 3</a></li>
    <li><a href="javascript:void(0);">Nav link 4</a></li>
    <li><a href="javascript:void(0);">Nav link 5</a></li>
    <li class="sub-menu-down"><a href="javascript:void(0);">Nav link 2</a>
  	  <ul class="sub-menu">						
  	    <li><a href="javascript:void(0);">Nav link 1</a></li>
  	    <li><a href="javascript:void(0);">Nav link 3</a></li>
  	    <li><a href="javascript:void(0);">Nav link 4</a></li>
  	    <li><a href="javascript:void(0);">Nav link 5</a></li>
  	    
  	    <li class="sub-menu-down right"><a href="javascript:void(0);">Nav link 2</a>
  	  	  <ul class="sub-menu">						
  	  	    <li><a href="javascript:void(0);">Nav link 1</a></li>
  	  	    <li><a href="javascript:void(0);">Nav link 2</a></li>
  	  	    <li><a href="javascript:void(0);">Nav link 3</a></li>
  	  	    <li><a href="javascript:void(0);">Nav link 4</a></li>
  	  	    <li><a href="javascript:void(0);">Nav link 5</a></li>
  	  	  </ul>
  	    </li>
  	  </ul>
    </li>
  </ul>
</li>
Menu with Images
1 
<li class="has-mega-menu sub-menu-down full-width">
  <a href="javascript:void(0);"><span>Images</span><i class="fas fa-chevron-down tabindex"></i></a>
  <div class="mega-menu">
    <div class="row g-3">
      <div class="col-md-3 col-6"><img class="rounded w-100" src="images/posts/large/pic1.png" alt=""></div>
      <div class="col-md-3 col-6"><img class="rounded w-100" src="images/posts/large/pic2.png" alt=""></div>
      <div class="col-md-3 col-6"><img class="rounded w-100" src="images/posts/large/pic3.png" alt=""></div>
      <div class="col-md-3 col-6"><img class="rounded w-100" src="images/posts/large/pic4.png" alt=""></div>
    </div>
  </div>
</li>
Menu with Slider
1 
<li class="has-mega-menu sub-menu-down full-width">
  <a href="javascript:void(0);"><span>Slider</span><i class="fas fa-chevron-down tabindex"></i></a>
  <div class="mega-menu">
    <div class="swiper" id="w3MenuSwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class="rounded w-100" src="images/posts/large/pic5.png" alt="">
        </div>
        <div class="swiper-slide">
          <img class="rounded w-100" src="images/posts/large/pic6.png" alt="">
        </div>
        <div class="swiper-slide">
          <img class="rounded w-100" src="images/posts/large/pic7.png" alt="">
        </div>
        <div class="swiper-slide">
          <img class="rounded w-100" src="images/posts/large/pic8.png" alt="">
        </div>
        <div class="swiper-slide">
          <img class="rounded w-100" src="images/posts/large/pic5.png" alt="">
        </div>
        <div class="swiper-slide">
          <img class="rounded w-100" src="images/posts/large/pic6.png" alt="">
        </div>
        <div class="swiper-slide">
          <img class="rounded w-100" src="images/posts/large/pic7.png" alt="">
        </div>
        <div class="swiper-slide">
		  <img class="rounded w-100" src="images/posts/large/pic8.png" alt="">
        </div>
      </div>
      <div class="swiper-pagination position-relative mt-4"></div>
    </div>
  </div>
</li>	

<link rel="stylesheet" type="text/css" href="vendor/swiper/swiper-bundle.min.css">

<script src="vendor/swiper/swiper-bundle.min.js"></script>

<script>
if(jQuery('#xMenuSwiper').length > 0){
  var W3MenuSwiper = new Swiper('#xMenuSwiper', {
    loop: true,
    spaceBetween: 16,
    slidesPerView: "4",
    speed: 500,
    autoplay: {
      delay: 1500,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      dynamicBullets: true,
    },
    breakpoints: {
      0: {
        slidesPerView: 2,
      },
      591: {
        slidesPerView: 4,
      },
    }
  });
}
</script>
Menu with Accordion
1 
<li class="has-mega-menu sub-menu-down full-width">
  <a href="javascript:void(0);"><span>Accordion</span><i class="fas fa-chevron-down tabindex"></i></a>
  <div class="mega-menu">
    <div class="accordion" id="accordionExample">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Accordion Item #1
          </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Accordion Item #2
          </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Accordion Item #3
          </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
          <div class="accordion-body">
		    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>
Menu with Offcanvas
1 
<li class="sub-menu-down sub-menu-down">
  <a href="javascript:void(0);"><span>Offcanvas</span><i class="fas fa-chevron-down tabindex"></i></a>
  <ul class="sub-menu">
	<li><a href="#offcanvasExample" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">Offcanvas Left</a></li>
  </ul>
</li>	

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown button</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>
Top Header Background
1 
<div class="top-bar bg-primary text-white">
  <div class="container">
    <div class="w3-topbar-inner d-flex justify-content-between align-items-center">
      <div class="w3-topbar-left">
        <ul>
          <li><a href="javascript:void(0);">About Us</a></li>
          <li><a href="javascript:void(0);">Contact Us</a></li>
          <li><a href="javascript:void(0);">Help Desk</a></li>
        </ul>
      </div>
      <div class="w3-topbar-right">
        <ul>
          <li><span>Share:</span></li>
          <li><a href="javascript:void(0);" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
          <li><a href="javascript:void(0);" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a></li>
          <li><a href="javascript:void(0);" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
          <li><a href="javascript:void(0);" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
        </ul>					
      </div>
    </div>
  </div>
</div>
Top Header white
1 
<div class="top-bar">
  <div class="container">
    <div class="w3-topbar-inner d-flex justify-content-between align-items-center">
      <div class="w3-topbar-left">
        <ul>
          <li><a href="javascript:void(0);">About Us</a></li>
          <li><a href="javascript:void(0);">Contact Us</a></li>
          <li><a href="javascript:void(0);">Help Desk</a></li>
        </ul>
      </div>
      <div class="w3-topbar-right">
        <ul>
          <li><span>Share:</span></li>
          <li><a href="javascript:void(0);" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
          <li><a href="javascript:void(0);" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a></li>
          <li><a href="javascript:void(0);" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
          <li><a href="javascript:void(0);" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
        </ul>					
      </div>
    </div>
  </div>
</div>
Demo Menu
1 
<li class="has-mega-menu sub-menu-down auto-width menu-left">
  <a href="javascript:void(0);"><span>Demo</span><i class="fas fa-chevron-down tabindex" ></i></a>
  <div class="mega-menu ">
    <ul class="demo-menu mb-0">
      <li>
        <a href="javascript:void(0);">
          <img src="images/posts/large/pic1.png" alt="/" class="rounded">
          <span class="menu-title">Nav Demo 1</span>
        </a>
      </li>
      <li>
        <a href="javascript:void(0);">
          <img src="images/posts/large/pic2.png" alt="/" class="rounded">
          <span class="menu-title">Nav Demo 2</span>
        </a>
      </li>
      <li>
        <a href="javascript:void(0);">
          <img src="images/posts/large/pic3.png" alt="/" class="rounded">
          <span class="menu-title">Nav Demo 3</span>
        </a>
      </li>
    </ul>
  </div>
</li>
Fixed Menu
1 
<li class="has-mega-menu sub-menu-down">
  <a href="javascript:void(0);"><span>Fixed Menu</span><i class="fas fa-chevron-down tabindex" ></i></a>
  <div class="mega-menu menu-media-right">
    <ul>
      <li class="side-left">
        <ul>
          <li>
            <span class="menu-title">Shop Structure</span>
            <ul>
              <li><a href="javascript:void(0);">Shop Standard</a></li>
              <li><a href="javascript:void(0);">Shop List</a></li>
              <li><a href="javascript:void(0);">Shop With Category</a></li>
              <li><a href="javascript:void(0);">Shop Filters Top Bar</a></li>
              <li><a href="javascript:void(0);">Shop Sidebar</a></li>
              <li><a href="javascript:void(0);">Shop Style 1</a></li>
              <li><a href="javascript:void(0);">Shop Style 2</a></li>
            </ul>
          </li>
          <li>
            <span class="menu-title">Product Structure</span>
            <ul>
              <li><a href="javascript:void(0);">Default</a></li>
              <li><a href="javascript:void(0);">Thumbnail</a></li>
              <li><a href="javascript:void(0);">Grid Media</a></li>
              <li><a href="javascript:void(0);">Carousel</a></li>
              <li><a href="javascript:void(0);">Full Width</a></li>
            </ul>
          </li>
          <li>
            <span class="menu-title">Shop Pages</span>
            <ul>						
              <li><a href="javascript:void(0);">Wishlist</a></li>
              <li><a href="javascript:void(0);">Cart</a></li>
              <li><a href="javascript:void(0);">Checkout</a></li>
              <li><a href="javascript:void(0);">Compare</a></li>
              <li><a href="javascript:void(0);">Order Tracking</a></li>
              <li><a href="javascript:void(0);">My Account</a></li>
              <li><a href="javascript:void(0);">Registration</a></li>
            </ul>
          </li>
          <li class="month-deal">
            <div class="clearfix me-3">
              <h3>Deal of the month</h3>
              <p class="mb-0">Yes! Send me exclusive offers, personalised, and unique gift ideas, tips for shopping on Pixio <a href="shop-standard.html" class="dz-link-2">View All Products</a></p>
            </div>
            <div class="sale-countdown">
              <div class="countdown text-center">
                <div class="date">
                  <span class="time days text-primary"></span>
                  <span class="work-time">Days</span>
                </div>
                <div class="date">
                  <span class="time hours text-primary"></span>
                  <span class="work-time">Hours</span>
                </div>
                <div class="date">
                  <span class="time mins text-primary"></span>
                  <span class="work-time">Minutess</span>
                </div>
                <div class="date">
                  <span class="time secs text-primary"></span>
                  <span class="work-time">Second</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </li>
      <li class="side-right">
        <div class="adv-media">
          <img src="images/posts/large/pic2.png" alt="">
        </div>
      </li>
    </ul>
  </div>
</li>
Media Menu
1 
<li class="has-mega-menu sub-menu-down">
  <a href="javascript:void(0);"><span>Media Menu</span><i class="fas fa-chevron-down tabindex"></i></a>
  <div class="mega-menu menu-media-left">
    <ul>
      <li class="side-left">
        <ul class="portfolio-nav-link">
          <li>
            <a href="javascript:void(0);">
              <img src="images/posts/small/pic1.png" alt="/" class="rounded">
              <span>Media Menu 1</span>
            </a>
          </li>
          <li>
            <a href="javascript:void(0);">
              <img src="images/posts/small/pic2.png" alt="/" class="rounded">
              <span>Media Menu 2</span>
            </a>
          </li>
          <li>
            <a href="javascript:void(0);">
              <img src="images/posts/small/pic3.png" alt="/" class="rounded">
              <span>Media Menu 3</span>
            </a>
          </li>
          <li>
            <a href="javascript:void(0);">
              <img src="images/posts/small/pic4.png" alt="/" class="rounded">
              <span>Media Menu 4</span>
            </a>
          </li>
          <li>
            <a href="javascript:void(0);">
              <img src="images/posts/small/pic5.png" alt="/" class="rounded">
              <span>Media Menu 5</span>
            </a>
          </li>
          <li>
            <a href="javascript:void(0);">
              <img src="images/posts/small/pic6.png" alt="/" class="rounded">
              <span>Media Menu 6</span>
            </a>
          </li>
          <li>
            <a href="javascript:void(0);">
              <img src="images/posts/small/pic7.png" alt="/" class="rounded">
              <span>Media Menu 7</span>
            </a>
          </li>
          <li>
            <a href="javascript:void(0);">
              <img src="images/posts/small/pic8.png" alt="/" class="rounded">
              <span>Media Menu 8</span>
            </a>
          </li>
          <li>
            <a href="javascript:void(0);">
              <img src="images/posts/small/pic9.png" alt="/" class="rounded">
              <span>Media Menu 9</span>
            </a>
          </li>
          <li>
            <a href="javascript:void(0);">
              <img src="images/posts/small/pic10.png" alt="/" class="rounded">
              <span>Media Menu 10</span>
            </a>
          </li>
        </ul>
      </li>
      <li class="side-right line-left">
        <span class="menu-title">Portfolio Details</span>
        <ul>
          <li><a href="javascript:void(0);">Nav Link 1</a></li>
          <li><a href="javascript:void(0);">Nav Link 2</a></li>
          <li><a href="javascript:void(0);">Nav Link 3</a></li>
          <li><a href="javascript:void(0);">Nav Link 4</a></li>
          <li><a href="javascript:void(0);">Nav Link 5</a></li>
        </ul>
      </li>
    </ul>
  </div>
</li>
Menu Left
1 
<li class="has-mega-menu sub-menu-down auto-width menu-left">
  <a href="javascript:void(0);"><span>Menu Left</span><i class="fas fa-chevron-down tabindex"></i></a>
  <div class="mega-menu">
    <ul>
      <li>
        <span class="menu-title">Pages</span>
        <ul>
          <li><a href="javascript:void(0);">About Us</a></li>
          <li><a href="javascript:void(0);">About Me</a></li>
          <li><a href="javascript:void(0);">Pricing Table</a></li>
          <li><a href="javascript:void(0);">Our Gift Vouchers</a></li>
          <li><a href="javascript:void(0);">What We Do</a></li>
          <li><a href="javascript:void(0);">Faqs 1</a></li>
          <li><a href="javascript:void(0);">Faqs 2</a></li>
          <li><a href="javascript:void(0);">Our Team</a></li>
        </ul>
      </li>
      <li>
        <span class="menu-title">Contact Us</span>
        <ul>
          <li><a href="javascript:void(0);">Contact Us 1</a></li>
          <li><a href="javascript:void(0);">Contact Us 2</a></li>
          <li><a href="javascript:void(0);">Contact Us 3</a></li>
        </ul>
        <span class="menu-title">Web Pages</span>
        <ul>
          <li><a href="javascript:void(0);">Error 404 1</a></li>
          <li><a href="javascript:void(0);">Error 404 2</a></li>
          <li><a href="javascript:void(0);">Coming Soon</a></li>
          <li><a href="javascript:void(0);">Under Construction</a></li>
        </ul>
      </li>
    </ul>
  </div>
</li>
Menu Center
1 
<li class="has-mega-menu sub-menu-down auto-width menu-center">
  <a href="javascript:void(0);"><span>Menu Center</span><i class="fas fa-chevron-down tabindex"></i></a>
  <div class="mega-menu">
    <ul>
      <li>
        <span class="menu-title">Pages</span>
        <ul>
          <li><a href="javascript:void(0);">About Us</a></li>
          <li><a href="javascript:void(0);">About Me</a></li>
          <li><a href="javascript:void(0);">Pricing Table</a></li>
          <li><a href="javascript:void(0);">Our Gift Vouchers</a></li>
          <li><a href="javascript:void(0);">What We Do</a></li>
          <li><a href="javascript:void(0);">Faqs 1</a></li>
          <li><a href="javascript:void(0);">Faqs 2</a></li>
          <li><a href="javascript:void(0);">Our Team</a></li>
        </ul>
      </li>
      <li>
        <span class="menu-title">Contact Us</span>
        <ul>
          <li><a href="javascript:void(0);">Contact Us 1</a></li>
          <li><a href="javascript:void(0);">Contact Us 2</a></li>
          <li><a href="javascript:void(0);">Contact Us 3</a></li>
        </ul>
        <span class="menu-title">Web Pages</span>
        <ul>
          <li><a href="javascript:void(0);">Error 404 1</a></li>
          <li><a href="javascript:void(0);">Error 404 2</a></li>
          <li><a href="javascript:void(0);">Coming Soon</a></li>
          <li><a href="javascript:void(0);">Under Construction</a></li>
        </ul>
      </li>
      <li>
        <span class="menu-title">Banner Style</span>
        <ul>						
          <li><a href="javascript:void(0);">Banner with BG Color</a></li>
          <li><a href="javascript:void(0);">Banner with Image</a></li>
          <li><a href="javascript:void(0);">Banner with Video</a></li>
          <li><a href="javascript:void(0);">Banner with Kanbern</a></li>
          <li><a href="javascript:void(0);">Banner Small</a></li>
          <li><a href="javascript:void(0);">Banner Medium</a></li>
          <li><a href="javascript:void(0);">Banner Large</a></li>
        </ul>
      </li>
    </ul>
  </div>
</li>
Menu Right
1 
<li class="has-mega-menu sub-menu-down auto-width menu-right active">
  <a href="javascript:void(0);"><span>Menu Right</span><i class="fas fa-chevron-down tabindex"></i></a>
  <div class="mega-menu">
    <ul>
      <li>
        <span class="menu-title">Pages</span>
        <ul>
          <li><a href="javascript:void(0);">About Us</a></li>
          <li><a href="javascript:void(0);">About Me</a></li>
          <li><a href="javascript:void(0);">Pricing Table</a></li>
          <li><a href="javascript:void(0);">Our Gift Vouchers</a></li>
          <li><a href="javascript:void(0);">What We Do</a></li>
          <li><a href="javascript:void(0);">Faqs 1</a></li>
          <li><a href="javascript:void(0);">Faqs 2</a></li>
          <li><a href="javascript:void(0);">Our Team</a></li>
        </ul>
      </li>
      <li>
        <span class="menu-title">Contact Us</span>
        <ul>
          <li><a href="javascript:void(0);">Contact Us 1</a></li>
          <li><a href="javascript:void(0);">Contact Us 2</a></li>
          <li><a href="javascript:void(0);">Contact Us 3</a></li>
        </ul>
        <span class="menu-title">Web Pages</span>
        <ul>
          <li><a href="javascript:void(0);">Error 404 1</a></li>
          <li><a href="javascript:void(0);">Error 404 2</a></li>
          <li><a href="javascript:void(0);">Coming Soon</a></li>
          <li><a href="javascript:void(0);">Under Construction</a></li>
        </ul>
      </li>
      <li>
        <span class="menu-title">Banner Style</span>
        <ul>						
          <li><a href="javascript:void(0);">Banner with BG Color</a></li>
          <li><a href="javascript:void(0);">Banner with Image</a></li>
          <li><a href="javascript:void(0);">Banner with Video</a></li>
          <li><a href="javascript:void(0);">Banner with Kanbern</a></li>
          <li><a href="javascript:void(0);">Banner Small</a></li>
          <li><a href="javascript:void(0);">Banner Medium</a></li>
          <li><a href="javascript:void(0);">Banner Large</a></li>
        </ul>
      </li>
    </ul>
  </div>
</li>

Do You Need Help To Customization

After Purchase A Template...

You Will Start Customizing According Your Requirement
BUT What If You Don't Know

SOLUTION IS HIRE IndianCoder

Hire Same Team For Quality Customization

  • In Order To Ensure Your Website Is Live, We Will Customize
    The Template According To Your Requirements And Upload It to the Server.
indiankoder@gmail.com

Version History - #back to top

v1.0 - 20 October 2024
  • * New - Created & Upload XMenu

© 2024 IndianCoder, All Rights Reserved