React Documentation

XMenu - Ultimate Responsive React Mega Menu

XMenu

XMenu - Ultimate Responsive React Mega Menu

This documentation is last updated on 09 December 2024

Thank you for purchasing this ReactJs template.

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

installation -

1.- Initialize NPM

It will create 'node_module' folder in this all dependency files will be install with this command. npm install

npm install
2.- Run Project

With is command file will be compiled and it will be loaded on local server `http://localhost:5173`. npm run dev

npm run dev
3.- Production Build

Packages JavaScript, CSS, and other assets into bundles for efficient delivery to the client. npm run build

npm run build
4.- Note:

To get more help on the TypeScript checkout Click here

5.- Further help

To get more help on the Vite checkout Click here

Sass Compile -

1.- Install Sass

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 add -D sass 

npm i @saas-ui/react
2.- Write 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": "sass --watch src/assets/scss/main.scss src/assets/css/style.css"
},
3.- 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

Folder Directories -

  • assets

    This folder contains all the assets of XMenu template.

  • components

    This folder component files for various template features.

  • elements

    This folder contains all the elements files of XMenu template.

  • pages

    This folder has all pages for various template features.

  • images

    This folder has all plugins used in the template.

  • css

    CSS File

React File-

  • ReactJs
    • src
      • assets
      • components
      • Constent
      • elements
      • Pages
      • App.tsx
      • main.tsx
    • index.html
    • package.json
    • package-lock.json

Credits -

Xmenu -

Default Nav

By default navs are left-aligned

1 
<ul className="nav navbar-nav">
	{[1, 2, 3, 4, 5, 6].map((el, index) => (
	<li key={index}>
		<Link to={"#"}>
		<span>Nav {el}</span> <span className={`badge-blank m-l5 ${index==2 ? "bg-info" : index==0 ? "bg-primary" :
			index==4 && "bg-danger" } `}></span>
		</Link>
	</li>
	))}
</ul>
Nav Center

Centered with .justify-content-center

1 
<ul className="header-nav xmenu navbar-collapse collapse justify-content-center">
	{[1, 2, 3, 4, 5, 6].map((el, index) => (
	<li key={index}>
		<Link to={"#"}>
		<span>Nav {el}</span> <span className={`badge-blank m-l5 ${index==2 ? "bg-info" : index==0 ? "bg-primary" :
			index==4 && "bg-danger" } `}></span>
		</Link>
	</li>
	))}
</ul>
Nav Right

Right-aligned with .justify-content-end

1 
<div class="header-nav xmenu navbar-collapse collapse justify-content-end" id="xMenuNav">
 <ul className="header-nav">
	{[1, 2, 3, 4, 5, 6].map((el, index) => (
	<li key={index}>
		<Link to={"#"}>
		<span>Nav {el}</span> <span className={`badge-blank m-l5 ${index==2 ? "bg-info" : index==0 ? "bg-primary" :
			index==4 && "bg-danger" } `}></span>
		</Link>
	</li>
	))}
</ul>
</div>
Menu Auto Width
1 
<ul className="nav navbar-nav">
	{megaMenu6.map(({ label, submenu }, index) => (
	<li className={`sub-menu-down ${dropdown==index ? "open" : "" }`} key={index}>
		<Link to={"#"} onClick={()=> dropdownHandler(index)}>
		<span>{label}</span>
		<i className="fas fa-chevron-down tabindex"></i>
		</Link>
		<ul className="sub-menu list-hover2">
			{submenu.map(({ label, child }, inde) => {
			if (!child) {
			return (
			<li key={inde}>
				<Link to={"#"}>
				<span>{label}</span>
				</Link>
			</li>
			);
			} else {
			return (
			<li key={inde} className={`sub-menu-down ${subMenuDropdown==inde ? "open" : "" }`}>
				<Link to={"#"} onClick={()=> subMenuDropdownHandler(inde)}>
				<span>{label}</span>
				</Link>
				<ul className="sub-menu list-hover2">
					{child.map(({ label, children }, ind) => {
					if (!children) {
					return (
					<li key={ind}>
						<Link to={"#"}>
						<span>{label}</span>{" "}
						</Link>
					</li>
					);
					} else {
					return (
					<li className={`sub-menu-down ${childrenuDropdown==ind ? "open" : "" }`} key={ind}>
						<Link to={"#"} onClick={()=> chidrenDropdownHandler(ind)}>
						<span>{label}</span>{" "}
						</Link>
						<ul className="sub-menu list-hover2">
							{children.map(({ label }, i) => (
							<li key={i}>
								<Link to={"#"}>
								<span>{label}</span>{" "}
								</Link>
							</li>
							))}
						</ul>
					</li>
					);
					}
					})}
				</ul>
			</li>
			);
			}
			})}
		</ul>
	</li>
	))}
</ul>
Menu Wide Width
1 
<ul className="nav navbar-nav">
	{megaMenu6.map(({ label, submenu }, index) => (
	<li className={`sub-menu-down ${dropdown==index ? "open" : "" }`} key={index}>
		<Link to={"#"} onClick={()=> dropdownHandler(index)}>
		<span>{label}</span>
		<i className="fas fa-chevron-down tabindex"></i>
		</Link>
		<ul className="sub-menu list-hover2">
			{submenu.map(({ label, child }, inde) => {
			if (!child) {
			return (
			<li key={inde}>
				<Link to={"#"}>
				<span>{label}</span>
				</Link>
			</li>
			);
			} else {
			return (
			<li key={inde} className={`sub-menu-down ${subMenuDropdown==inde ? "open" : "" }`}>
				<Link to={"#"} onClick={()=> subMenuDropdownHandler(inde)}>
				<span>{label}</span>
				</Link>
				<ul className="sub-menu list-hover2">
					{child.map(({ label, children }, ind) => {
					if (!children) {
					return (
					<li key={ind}>
						<Link to={"#"}>
						<span>{label}</span>{" "}
						</Link>
					</li>
					);
					} else {
					return (
					<li className={`sub-menu-down ${childrenuDropdown==ind ? "open" : "" }`} key={ind}>
						<Link to={"#"} onClick={()=> chidrenDropdownHandler(ind)}>
						<span>{label}</span>{" "}
						</Link>
						<ul className="sub-menu list-hover2">
							{children.map(({ label }, i) => (
							<li key={i}>
								<Link to={"#"}>
								<span>{label}</span>{" "}
								</Link>
							</li>
							))}
						</ul>
					</li>
					);
					}
					})}
				</ul>
			</li>
			);
			}
			})}
		</ul>
	</li>
	))}
</ul>
Menu Full Width
1 
<li className={`${className} ${ind==dropdown ? "open" : "" }`} key={ind}l>
	<Link to={"#"} onClick={()=l> dropdownHandler(ind)}l>
	<spanl>{label}</spanl>
	<i className="fas fa-chevron-down tabindex"l></il>
	</Linkl>
	<div className="mega-menu line-effect"l>
		<ull>
			{submenu?.map(({ child, children, className, blog }, indx) =l> (
			<li key={indx}l>
				<span className="menu-title"l>{child}</spanl>
				<ul className="list-hover1"l>
					{blog?.map(({ child, children }) =l> (
					<l>
						<lil>
							<span className="menu-title"l>{child}</spanl>
							<ul className="list-hover1"l>
								{children?.map(({ label }: never, ind: number) =l> (
								<li key={ind}l>
									<Link to={"#"}l>{label}</Linkl>
								</lil>
								))}
							</ull>
						</lil>
					</l>
					))}
					{children?.map(({ label, img }: never, index: number) =l> {
					if (className?.includes("blog")) {
					return (
					<l>
						<li key={index}l>
							<Link to={"#"}l>{label}</Linkl>
						</lil>
					</l>
					);
					} else if (className?.includes("post-menu")) {
					return (
					<l>
						<li className="post-menu"l>
							<div className="widget widget_post p-t2"l>
								<ull>
									<lil>
										<div className="dz-media"l>
											<img src={img} alt="" /l>
										</divl>
										<div className="dz-content"l>
											<h6 className="name"l>
												<Link to={"#"}l>Cozy Knit Cardigan Sweater</Linkl>
											</h6l>
											<span className="time"l>July 23, 2024</spanl>
										</divl>
									</lil>
								</ull>
							</divl>
						</lil>
					</l>
					);
					}
					})}
				</ull>
			</lil>
			))}
		</ull>
	</divl>
</lil>
Dropdown
1 
<ul className="nav navbar-nav">
	{megaMenu6.map(({ label, submenu }, index) => (
	<li className={`sub-menu-down ${dropdown==index ? "open" : "" }`} key={index}>
		<Link to={"#"} onClick={()=> dropdownHandler(index)}>
		<span>{label}</span>
		<i className="fas fa-chevron-down tabindex"></i>
		</Link>
		<ul className="sub-menu list-hover2">
			{submenu.map(({ label, child }, inde) => {
			if (!child) {
			return (
			<li key={inde}>
				<Link to={"#"}>
				<span>{label}</span>
				</Link>
			</li>
			);
			} else {
			return (
			<li key={inde} className={`sub-menu-down ${subMenuDropdown==inde ? "open" : "" }`}>
				<Link to={"#"} onClick={()=> subMenuDropdownHandler(inde)}>
				<span>{label}</span>
				</Link>
				<ul className="sub-menu list-hover2">
					{child.map(({ label, children }, ind) => {
					if (!children) {
					return (
					<li key={ind}>
						<Link to={"#"}>
						<span>{label}</span>{" "}
						</Link>
					</li>
					);
					} else {
					return (
					<li className={`sub-menu-down ${childrenuDropdown==ind ? "open" : "" }`} key={ind}>
						<Link to={"#"} onClick={()=> chidrenDropdownHandler(ind)}>
						<span>{label}</span>{" "}
						</Link>
						<ul className="sub-menu list-hover2">
							{children.map(({ label }, i) => (
							<li key={i}>
								<Link to={"#"}>
								<span>{label}</span>{" "}
								</Link>
							</li>
							))}
						</ul>
					</li>
					);
					}
					})}
				</ul>
			</li>
			);
			}
			})}
		</ul>
	</li>
	))}
</ul>
Menu with Images
1 
<Accordion defaultActiveKey="0">
	{submenu.map(({ label }, ind) => (
		<Accordion.Item eventKey={`${ind}`} key={ind}>
				<Accordion.Header>{label}</Accordion.Header>
				<Accordion.Body>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
					dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
					exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
					in voluptate velit esse cillum dolore eu fugiat nulla
					pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
					est laborum.
				</Accordion.Body>
		</Accordion.Item>
	))}
</Accordion>
Menu with Slider
1 
<Swiper className="swiper menu-swiper" id="xMenuSwiper" slidesPerView={4} spaceBetween={30} speed={1500} loop={true}
	modules={[Navigation, Autoplay, Pagination]} navigation={{ nextEl: ".swiper-button-next" ,
	prevEl: ".swiper-button-prev" }} autoplay={{ delay: 1500, }} pagination={{ el: ".swiper-pagination" ,
	dynamicBullets: true, }}>
	{submenu.map(({ img }, inde) => (
	<SwiperSlide key={inde} className="swiper-slide">
		<img className="rounded w-100" src={img} alt="" />
	</SwiperSlide>
	))}
	<div className="swiper-pagination m-t30"></div>
	<div className="swiper-button-prev button-black">
		<i className="fa-solid fa-arrow-left"></i>
	</div>
	<div className="swiper-button-next button-black">
		<i className="fa-solid fa-arrow-right"></i>
	</div>
</Swiper>
Menu with Accordion
1 
<Accordion defaultActiveKey="0">
	{submenu.map(({ label }, ind) => (
		<Accordion.Item eventKey={`${ind}`} key={ind}>
				<Accordion.Header>{label}</Accordion.Header>
				<Accordion.Body>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
					dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
					exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
					in voluptate velit esse cillum dolore eu fugiat nulla
					pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
					est laborum.
				</Accordion.Body>
		</Accordion.Item>
	))}
</Accordion>
Menu with Offcanvas
1 
<ul className="sub-menu list-hover4"<
	{submenu.map(({ label }, ind) =< (
	<li key={ind}<
		<Link to={"#"} onClick={()=< setDrower(ind)}<
		<span<{label}</span<
		</Link<
	</li<
	))}
</ul<
Top Header Background
1 
<div class="top-bar bg-primary text-white">
	<ul className="nav navbar-nav">
		{[1, 2, 3, 4, 5, 6].map((el, index) => (
		<li key={index}>
			<Link to={"#"}>
			<span>Nav {el}</span> <span className={`badge-blank m-l5 ${index==2 ? "bg-info" : index==0 ? "bg-primary" :
				index==4 && "bg-danger" } `}></span>
			</Link>
		</li>
		))}
	</ul>
</div">
Top Header white
1 
<div class="top-bar bg-primary text-white">
<ul className="sub-menu list-hover4">
	{submenu.map(({ label }, ind) => (
	<li key={ind}>
		<Link to={"#"} onClick={()=> setDrower(ind)}>
		<span>{label}</span>
		</Link>
	</li>
	))}
</ul>
Demo Menu
1 
<li class="has-mega-menu sub-menu-down auto-width menu-left">
		<div className="widget widget_post p-t2"l>
			<ull>
				<lil>
					<div className="dz-media"l>
						<img src={img} alt="" /l>
					</divl>
					<div className="dz-content"l>
						<h6 className="name"l>
							<Link to={"#"}l>Cozy Knit Cardigan Sweater</Linkl>
						</h6l>
						<span className="time"l>July 23, 2024</spanl>
					</divl>
				</lil>
			</ull>
		</divl>
</li>
Fixed Menu
1 
 <ul className="nav navbar-nav">
                {megaMenu3.map(({ label, submenu, className }, index) => (
                  <li className={`${className} ${dropdown == index ? "open" : ""}`} key={index}>
                    <Link to={"#"} onClick={() => dropdownHandler(index)}>
                      <span>{label}</span>
                      <i className="fas fa-chevron-down tabindex" />
                    </Link>
                    {className.includes("menu-left") ? (
                      <div className="mega-menu">
                        <ul className="demo-menu">
                          {submenu?.map(({ img, label }, inde) => (
                            <li>
                              <Link to={"#"} key={inde}>
                                <img src={img} alt="/" className="rounded" />
                                <span className="menu-title">{label}</span>
                              </Link>
                            </li>
                          ))}
                        </ul>
                      </div>
                    ) : (
                      <>
                        {className.includes("fixed_menu") ? (
                          <div className="mega-menu menu-media-right">
                            <ul>
                              <li className="side-left">
                                <ul>
                                  {submenu?.map(({ label, child }, ind) => (
                                    <li key={ind}>
                                      <span className="menu-title">{label}</span>
                                      <ul className="list-hover5">
                                        {child?.map(({ label }) => (
                                          <li>
                                            <Link to={"#"}>
                                              <span>{label}</span>
                                            </Link>
                                          </li>
                                        ))}
                                      </ul>
                                    </li>
                                  ))}
                                  <li className="month-deal">
                                    <div className="clearfix p-r5">
                                      <h4 className="m-b5">Deal of the month</h4>
                                      <p className="m-b0">
                                        Yes! Send me exclusive offers, personalised, and unique gift ideas, tips for shopping on Pixio <Link to={"#"}>View All Products</Link>
                                      </p>
                                    </div>
                                    <div className="sale-countdown">
                                      <div className="countdown">
                                        <div className="date">
                                          <span className="time days">{timer.days}</span>
                                          <span className="work-time">Days</span>
                                        </div>
                                        <div className="date">
                                          <span className="time hours">{timer.hours}</span>
                                          <span className="work-time">Hours</span>
                                        </div>
                                        <div className="date">
                                          <span className="time mins">{timer.minutes}</span>
                                          <span className="work-time">Minutess</span>
                                        </div>
                                        <div className="date">
                                          <span className="time secs">{timer.seconds}</span>
                                          <span className="work-time">Second</span>
                                        </div>
                                      </div>
                                    </div>
                                  </li>
                                </ul>
                              </li>
                              <li className="side-right">
                                <div className="adv-media">
                                  <img src={IMAGES.large_pic2} alt="" />
                                </div>
                              </li>
                            </ul>
                          </div>
                        ) : (
                          <div className="mega-menu menu-media-left">
                            <ul>
                              <li className="side-left">
                                <ul className="portfolio-nav-link">
                                  {submenu.map(({ label, img }, ind) => (
                                    <li key={ind}>
                                      <Link to={"#"}>
                                        <img src={img} alt="/" className="rounded" />
                                        <span>{label}</span>
                                      </Link>
                                    </li>
                                  ))}
                                </ul>
                              </li>
                              <li className="side-right line-left">
                                <span className="menu-title">Portfolio Details</span>
                                <ul>
                                  {[1, 2, 3, 4].map((el) => (
                                    <li>
                                      <Link to={"#"}>Nav Link {el}</Link>
                                    </li>
                                  ))}
                                </ul>
                              </li>
                            </ul>
                          </div>
                        )}
                      </>
                    )}
                  </li>
                ))}
              </ul>
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 
{megaMenu5.map(({ className, label, icon, submenu }, index) => (
<li className={`${className} ${dropdown==index ? "open" : "" }`} key={index}>
	<Link to={"#"} onClick={()=> dropdownHandler(index)}>
	<span>{label}</span>
	<i className={icon}></i>
	<i className="fas fa-chevron-down tabindex"></i>
	</Link>
	<div className="mega-menu">
		<ul>
			{submenu.map(({ label, child, blog }, inde) => (
			<li key={inde}>
				<span className="menu-title">{label}</span>
				<ul className="list-hover3">
					{!blog &&
					child?.map(({ label }, ind: number) => (
					<li key={ind}>
						<Link to={"#"}>
						<span>{label}</span>
						</Link>
					</li>
					))}
					{blog &&
					blog?.map(({ child, children }, ind: number) => (
					<>
						<li key={ind}>
							<span className="menu-title">{child}</span>
							<ul className="list-hover1">
								{children?.map(({ label }) => (
								<li>
									<Link to={"#"}>{label}</Link>
								</li>
								))}
							</ul>
						</li>
					</>
					))}
				</ul>
			</li>
			))}
		</ul>
	</div>
</li>
))}
Menu Center
1 
{megaMenu5.map(({ className, label, icon, submenu }, index) => (
<li className={`${className} ${dropdown==index ? "open" : "" }`} key={index}>
	<Link to={"#"} onClick={()=> dropdownHandler(index)}>
	<span>{label}</span>
	<i className={icon}></i>
	<i className="fas fa-chevron-down tabindex"></i>
	</Link>
	<div className="mega-menu">
		<ul>
			{submenu.map(({ label, child, blog }, inde) => (
			<li key={inde}>
				<span className="menu-title">{label}</span>
				<ul className="list-hover3">
					{!blog &&
					child?.map(({ label }, ind: number) => (
					<li key={ind}>
						<Link to={"#"}>
						<span>{label}</span>
						</Link>
					</li>
					))}
					{blog &&
					blog?.map(({ child, children }, ind: number) => (
					<>
						<li key={ind}>
							<span className="menu-title">{child}</span>
							<ul className="list-hover1">
								{children?.map(({ label }) => (
								<li>
									<Link to={"#"}>{label}</Link>
								</li>
								))}
							</ul>
						</li>
					</>
					))}
				</ul>
			</li>
			))}
		</ul>
	</div>
</li>
))}
Menu Right
1 
{megaMenu5.map(({ className, label, icon, submenu }, index) => (
<li className={`${className} ${dropdown==index ? "open" : "" }`} key={index}>
	<Link to={"#"} onClick={()=> dropdownHandler(index)}>
	<span>{label}</span>
	<i className={icon}></i>
	<i className="fas fa-chevron-down tabindex"></i>
	</Link>
	<div className="mega-menu">
		<ul>
			{submenu.map(({ label, child, blog }, inde) => (
			<li key={inde}>
				<span className="menu-title">{label}</span>
				<ul className="list-hover3">
					{!blog &&
					child?.map(({ label }, ind: number) => (
					<li key={ind}>
						<Link to={"#"}>
						<span>{label}</span>
						</Link>
					</li>
					))}
					{blog &&
					blog?.map(({ child, children }, ind: number) => (
					<>
						<li key={ind}>
							<span className="menu-title">{child}</span>
							<ul className="list-hover1">
								{children?.map(({ label }) => (
								<li>
									<Link to={"#"}>{label}</Link>
								</li>
								))}
							</ul>
						</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

© 2025 IndianCoder, All Rights Reserved