01
logo
Menu Width

You can easily change mega-menu width with .auto-width, .wide-width and .full-width

<ul class="nav navbar-nav">
	<li class="active">
		<a href="javascript:void(0);">
			<span>Active</span>
			<span class="badge badge-drop drop-start bg-primary">NEW</span>
		</a>
	</li>
	<li class="has-mega-menu sub-menu-down auto-width">
		<a href="javascript:void(0);">
			<span>Auto Width</span>
			<span class="badge badge-drop drop-center bg-info">NEW</span>
			<i class="fas fa-chevron-down tabindex"></i>
		</a>
		<div class="mega-menu line-effect">
			<ul>
				<li>
					<span class="menu-title">Blog Dark Style</span>
					<ul class="list-hover1">
						<li><a href="javascript:void(0);">Blog 2 Column <span class="badge bg-info">NEW</span></a></li>
						<li><a href="javascript:void(0);">Blog 2 Column Sidebar</a></li>
						<li><a href="javascript:void(0);">Blog 3 Column <span class="badge bg-danger">NEW</span></a></li>
						<li><a href="javascript:void(0);">Blog Half Image</a></li>
					</ul>
					<span class="menu-title">Blog Light Style</span>
					<ul class="list-hover1">
						<li><a href="javascript:void(0);">Blog 2 Column</a></li>
						<li><a href="javascript:void(0);">Blog 2 Column Sidebar <span class="badge bg-warning">NEW</span></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 class="list-hover1">
						<li><a href="javascript:void(0);">Blog left Sidebar</a></li>
						<li><a href="javascript:void(0);">Blog Right Sidebar <span class="badge bg-success">UPDATE</span></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 class="list-hover1">
						<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 <span class="badge bg-dark">New</span></a></li>
						<li><a href="javascript:void(0);">Blog Tag</a></li>
					</ul>
				</li>
				<li>
					<span class="menu-title">Blog Details</span>
					<ul class="list-hover1">
						<li><a href="javascript:void(0);">Post Standard</a></li>
						<li><a href="javascript:void(0);">Post Left Sidebar <span class="badge bg-warning">New</span></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 <span class="badge bg-danger">NEW</span></a></li>
						<li><a href="javascript:void(0);">Post Gallery</a></li>
						<li><a href="javascript:void(0);">Post Gallery Alternative <span class="badge bg-primary">New</span></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 <span class="badge bg-info">New</span></a></li>
					</ul>
				</li>
				<li class="post-menu">
					<span class="menu-title">Recent Posts</span>
					<div class="widget widget_post p-t2">
						<ul>
							<li>
								<div class="dz-media">
									<img src="images/posts/music/pic1.jpg" 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/music/pic2.jpg" 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/music/pic3.jpg" 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/music/pic4.jpg" 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>
	<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 class="list-hover1">
						<li><a href="javascript:void(0);">About Us <span class="badge bg-warning">NEW</span></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 <span class="badge bg-info">NEW</span></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 class="list-hover1">
						<li><a href="javascript:void(0);">Contact Us 1</a></li>
						<li><a href="javascript:void(0);">Contact Us 2 <span class="badge bg-danger">NEW</span></a></li>
						<li><a href="javascript:void(0);">Contact Us 3</a></li>
					</ul>
					<span class="menu-title">Web Pages</span>
					<ul class="list-hover1">
						<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 <span class="badge bg-success">NEW</span></a></li>
						<li><a href="javascript:void(0);">Under Construction</a></li>
					</ul>
				</li>
				<li>
					<span class="menu-title">Banner Style</span>
					<ul class="list-hover1">			
						<li><a href="javascript:void(0);">Banner with BG Color</a></li>
						<li><a href="javascript:void(0);">Banner with Image <span class="badge bg-primary">NEW</span></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 <span class="badge bg-warning">NEW</span></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 class="list-hover1">
						<li><a href="javascript:void(0);">Header Style 1</a></li>
						<li><a href="javascript:void(0);">Header Style 2 <span class="badge bg-success">NEW</span></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 <span class="badge bg-warning">NEW</span></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 class="list-hover1">
						<li><a href="javascript:void(0);">Footer Style 1</a></li>
						<li><a href="javascript:void(0);">Footer Style 2 <span class="badge bg-info">NEW</span></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 <span class="badge bg-warning">NEW</span></a></li>
						<li><a href="javascript:void(0);">Footer Style 7</a></li>
					</ul>
				</li>
				<li>
					<span class="menu-title">Dashboard</span>
					<ul class="list-hover1">
						<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 <span class="badge bg-dark">NEW</span></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 <span class="badge bg-secondary">NEW</span></a></li>
						<li><a href="javascript:void(0);">Return Request Confirmed</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</li>
	<li class="has-mega-menu sub-menu-down full-width">
		<a href="javascript:void(0);">
			<span>Full Width</span>
			<span class="badge badge-drop drop-end bg-success">NEW</span>
			<i class="fas fa-chevron-down tabindex"></i>
		</a>
		<div class="mega-menu">
			<ul>
				<li>
					<span class="menu-title">Pages</span>
					<ul class="list-hover1">
						<li><a href="javascript:void(0);">About Us <span class="badge bg-primary">NEW</span></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 <span class="badge bg-info">UPDATE</span></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 <span class="badge bg-danger">HOT</span></a></li>
					</ul>
				</li>
				<li>
					<span class="menu-title">Contact Us</span>
					<ul class="list-hover1">
						<li><a href="javascript:void(0);">Contact Us 1</a></li>
						<li><a href="javascript:void(0);">Contact Us 2 <span class="badge bg-primary">NEW</span></a></li>
						<li><a href="javascript:void(0);">Contact Us 3</a></li>
					</ul>
					<span class="menu-title">Web Pages</span>
					<ul class="list-hover1">
						<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 <span class="badge bg-info">UPDATE</span></a></li>
						<li><a href="javascript:void(0);">Under Construction</a></li>
					</ul>
				</li>
				<li>
					<span class="menu-title">Banner Style</span>
					<ul class="list-hover1">
						<li><a href="javascript:void(0);">Banner with BG Color</a></li>
						<li><a href="javascript:void(0);">Banner with Image <span class="badge bg-danger">HOT</span></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 <span class="badge bg-primary">NEW</span></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 class="list-hover1">
						<li><a href="javascript:void(0);">Header Style 1</a></li>
						<li><a href="javascript:void(0);">Header Style 2 <span class="badge bg-primary">NEW</span></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 <span class="badge bg-info">UPDATE</span></a></li>
						<li><a href="javascript:void(0);">Header Style 7</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</li>
</ul>
02
logo
Menu With Bootstrap Elements
<ul class="nav navbar-nav">
	<li class="has-mega-menu sub-menu-down auto-width menu-left">
		<a href="javascript:void(0);"><span>Color Card</span><i class="fas fa-chevron-down tabindex"></i></a>
		<div class="sub-menu sub-menu-md p-lg-3 py-3">
			<div class="row">
				<div class="col-lg-12">
					<a href="javascript:void(0);" class="card p-0 text-bg-primary border-0 text-white m-b10">
						<div class="card-body d-flex">
							<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-codepen me-3">
								<polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"></polygon><line x1="12" y1="22" x2="12" y2="15.5"></line><polyline points="22 8.5 12 15.5 2 8.5"></polyline><polyline points="2 15.5 12 8.5 22 15.5"></polyline><line x1="12" y1="2" x2="12" y2="8.5"></line>
							</svg>
							<div class="clearfix">
								<h6 class="card-title m-b0">Proper Documentation</h6>
								<span class="small">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
				</div>
				<div class="col-lg-12">
					<a href="javascript:void(0);" class="card p-0 text-bg-info border-0 text-white m-b10">
						<div class="card-body d-flex">
							<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell me-3">
								<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
								<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
							</svg>
							<div class="clearfix">
								<h6 class="card-title m-b0">Notification</h6>
								<span class="small">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
				</div>
				<div class="col-lg-12">
					<a href="javascript:void(0);" class="card p-0 text-bg-warning border-0 text-white">
						<div class="card-body d-flex">
							<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star me-3">
								<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
							</svg>
							<div class="clearfix">
								<h6 class="card-title m-b0">Happy Clients</h6>
								<span class="small">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
				</div>
			</div>
		</div>
	</li>
	<li class="has-mega-menu sub-menu-down auto-width menu-left">
		<a href="javascript:void(0);"><span>Light Card</span><i class="fas fa-chevron-down tabindex"></i></a>
		<div class="sub-menu sub-menu-md p-lg-3 py-3">
			<div class="row">
				<div class="col-lg-12">
					<a href="javascript:void(0);" class="card p-0 card-hover border-0">
						<div class="card-body d-flex">
							<i class="fa-brands fa-facebook me-3 m-t1 fs-2"></i>
							<div class="clearfix">
								<h6 class="card-title m-b0">Facebook</h6>
								<span class="small">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
				</div>
				<div class="col-lg-12">
					<a href="javascript:void(0);" class="card p-0 card-hover border-0">
						<div class="card-body d-flex">
							<i class="fa-brands fa-twitter me-3 m-t1 fs-2"></i>
							<div class="clearfix">
								<h6 class="card-title m-b0">Twitter</h6>
								<span class="small">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
				</div>
				<div class="col-lg-12">
					<a href="javascript:void(0);" class="card p-0 card-hover border-0">
						<div class="card-body d-flex">
							<i class="fa-brands fa-yahoo me-3 m-t1 fs-2"></i>
							<div class="clearfix">
								<h6 class="card-title m-b0">Yahoo</h6>
								<span class="small">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
				</div>
			</div>
		</div>
	</li>
	<li class="has-mega-menu sub-menu-down auto-width menu-left">
		<a href="javascript:void(0);"><span>Image Card</span><i class="fas fa-chevron-down tabindex"></i></a>
		<div class="sub-menu sub-menu-md p-lg-3 py-3">
			<div class="row">
				<div class="col-lg-12">
					<a href="javascript:void(0);" class="card px-3 py-4 text-white border-0 m-b10 text-center card-overlay bg-opacity-25" style="background-image: url('images/posts/card/pic1.jpg'); background-position: center;">
						<div class="overlay-content">
							<h6 class="card-title m-b0">Fashion</h6>
						</div>
					</a>
				</div>
				<div class="col-lg-12">
					<a href="javascript:void(0);" class="card px-3 py-4 text-white border-0 m-b10 text-center card-overlay bg-opacity-25" style="background-image: url('images/posts/card/pic2.jpg'); background-position: center;">
						<div class="overlay-content">
							<h6 class="card-title m-b0">Shopping</h6>
						</div>
					</a>
				</div>
				<div class="col-lg-12">
					<a href="javascript:void(0);" class="card px-3 py-4 text-white border-0 text-center card-overlay bg-opacity-25" style="background-image: url('images/posts/card/pic3.jpg'); background-position: center;">
						<div class="overlay-content">
							<h6 class="card-title m-b0">Winter</h6>
						</div>
					</a>
				</div>
			</div>
		</div>
	</li>
	<li class="has-mega-menu sub-menu-down full-width">
		<a href="javascript:void(0);"><span>Left Banner</span><i class="fas fa-chevron-down tabindex"></i></a>
		<div class="mega-menu ps-lg-0 py-lg-0">
			<div class="row">
				<div class="col-lg-4 pe-lg-4">
					<div class="card p-5 rounded-0 border-0 m-b3 card-overlay bg-opacity-50 h-100 text-white" style="background-image: url('images/posts/middle/pic1.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;">
						<div class="overlay-content">
							<span class="card-title h4 m-b2 d-block text-white">Game Zone</span>
							<p class="small">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
						</div>
					</div>
				</div>
				<div class="col-lg-2 py-3">
					<span class="menu-title">Nav Links</span>
					<ul class="list-hover3">
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 2</span>
								<span class="badge rounded bg-danger light"><i class="fa-solid fa-circle"></i> HOT</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 3</span>
							</a>
						</li>
					</ul>
					<span class="menu-title">Nav Links</span>
					<ul class="list-hover3">
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 2</span>
								<span class="badge rounded bg-primary light"><i class="fa-solid fa-circle"></i> NEW</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-3 py-3">
					<a href="javascript:void(0);" class="card p-0 card-hover border-0 m-b2">
						<div class="card-body d-flex">
							<i class="fa-brands fa-facebook me-3 m-t1 fs-2"></i>
							<div class="clearfix">
								<h6 class="card-title m-b0">Facebook</h6>
								<span class="small">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
					<a href="javascript:void(0);" class="card p-0 card-hover border-0 m-b2">
						<div class="card-body d-flex">
							<i class="fa-brands fa-twitter me-3 m-t1 fs-2"></i>
							<div class="clearfix">
								<h6 class="card-title m-b0">Twitter</h6>
								<span class="small">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
					<a href="javascript:void(0);" class="card p-0 card-hover border-0 m-b2">
						<div class="card-body d-flex">
							<i class="fa-brands fa-linkedin me-3 m-t1 fs-2"></i>
							<div class="clearfix">
								<h6 class="card-title m-b0">Linkedin</h6>
								<span class="small">XMEGA Menu Elements</span>
							</div>
						</div>
					</a>
				</div>
				<div class="col-lg-3 py-3">
					<a href="javascript:void(0);" class="card px-3 py-4 text-white border-0 m-b10 text-center card-overlay bg-opacity-25" style="background-image: url('images/posts/card/pic4.jpg'); background-position: center;">
						<div class="overlay-content">
							<h6 class="card-title m-b0">Galaxy</h6>
						</div>
					</a>
					<a href="javascript:void(0);" class="card px-3 py-4 text-white border-0 m-b10 text-center card-overlay bg-opacity-25" style="background-image: url('images/posts/card/pic5.jpg'); background-position: center;">
						<div class="overlay-content">
							<h6 class="card-title m-b0">PC Gaming</h6>
						</div>
					</a>
					<a href="javascript:void(0);" class="card px-3 py-4 text-white border-0 text-center card-overlay bg-opacity-25" style="background-image: url('images/posts/card/pic6.jpg'); background-position: center;">
						<div class="overlay-content">
							<h6 class="card-title m-b0">War Zone Landscape</h6>
						</div>
					</a>
				</div>
			</div>
		</div>
	</li>
	<li class="has-mega-menu sub-menu-down full-width">
		<a href="javascript:void(0);"><span>Right Banner</span><i class="fas fa-chevron-down tabindex"></i></a>
		<div class="mega-menu pb-lg-0 pe-lg-3">
			<div class="row">
				<div class="col-lg-2">
					<span class="menu-title">Social Icons</span>
					<ul class="list-hover3">
						<li>
							<a href="javascript:void(0);">
								<i class="fa-solid fa-basketball me-1"></i>
								<span>Dribbble</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<i class="fa-brands fa-facebook me-1"></i>
								<span>Facebook</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<i class="fa-brands fa-instagram me-1"></i>
								<span>Instagram</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<i class="fa-brands fa-linkedin me-1"></i>
								<span>Linkedin</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<i class="fa-brands fa-pinterest me-1"></i>
								<span>Pinterest</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<i class="fa-brands fa-behance me-1"></i>
								<span>Behance</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<i class="fa-brands fa-twitter me-1"></i>
								<span>Twitter</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<i class="fa-brands fa-tiktok me-1"></i>
								<span>Tiktok</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-2">
					<span class="menu-title">Nav Links</span>
					<ul class="list-hover3">
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 2</span>
								<span class="badge rounded bg-primary light"><i class="fa-solid fa-circle"></i> NEW</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 3</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 4</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 5</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 6</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 7</span>
								<span class="badge rounded bg-danger light"><i class="fa-solid fa-circle"></i> HOT</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 8</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 9</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 10</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-2">
					<span class="menu-title">Nav Links</span>
					<ul class="list-hover3">
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 2</span>
								<span class="badge rounded bg-primary light"><i class="fa-solid fa-circle"></i> NEW</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 3</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 4</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 5</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 6</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 7</span>
								<span class="badge rounded bg-danger light"><i class="fa-solid fa-circle"></i> HOT</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 8</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 9</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Nav Link 10</span>
							</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-6">
					<div class="row h-100">
						<div class="col-lg-4 m-b3">
							<span class="menu-title">Nav Links</span>
							<ul class="list-hover3">
								<li>
									<a href="javascript:void(0);">
										<span>Nav Link 1</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);">
										<span>Nav Link 2</span>
										<span class="badge rounded bg-primary light"><i class="fa-solid fa-circle"></i> NEW</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);">
										<span>Nav Link 3</span>
									</a>
								</li>
							</ul>
						</div>
						<div class="col-lg-4 m-b3">
							<span class="menu-title">Nav Links</span>
							<ul class="list-hover3">
								<li>
									<a href="javascript:void(0);">
										<span>Nav Link 1</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);">
										<span>Nav Link 2</span>
										<span class="badge rounded bg-primary light"><i class="fa-solid fa-circle"></i> NEW</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);">
										<span>Nav Link 3</span>
									</a>
								</li>
							</ul>
						</div>
						<div class="col-lg-4">
							<span class="menu-title">Nav Links</span>
							<ul class="list-hover3">
								<li>
									<a href="javascript:void(0);">
										<span>Nav Link 1</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);">
										<span>Nav Link 2</span>
										<span class="badge rounded bg-primary light"><i class="fa-solid fa-circle"></i> NEW</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0);">
										<span>Nav Link 3</span>
									</a>
								</li>
							</ul>
						</div>
						<div class="col-lg-12 pe-lg-0 d-flex align-items-end pb-lg-1">
							<img src="images/bnr1.jpg" alt="">						
						</div>
					</div>
				</div>
			</div>
		</div>
	</li>
</ul>
03
logo
Fixed Menu

This is a Fixed width menu

<ul class="nav navbar-nav">
	<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">
				<li>
					<a href="javascript:void(0);">
						<img src="images/posts/interior/pic1.jpg" alt="/" class="rounded">
						<span class="menu-title">Interior Room</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<img src="images/posts/interior/pic2.jpg" alt="/" class="rounded">
						<span class="menu-title">Living Room</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<img src="images/posts/interior/pic3.jpg" alt="/" class="rounded">
						<span class="menu-title">Modern Entryway</span>
					</a>
				</li>
			</ul>
		</div>
	</li>
	<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 class="list-hover5">
								<li><a href="javascript:void(0);"><span>Shop Standard</span></a></li>
								<li><a href="javascript:void(0);"><span>Shop List</span></a></li>
								<li><a href="javascript:void(0);"><span>Shop With Category</span></a></li>
								<li><a href="javascript:void(0);"><span>Shop Filters Top Bar</span></a></li>
								<li><a href="javascript:void(0);"><span>Shop Sidebar</span></a></li>
								<li><a href="javascript:void(0);"><span>Shop Style 1</span></a></li>
								<li><a href="javascript:void(0);"><span>Shop Style 2</span></a></li>
							</ul>
						</li>
						<li>
							<span class="menu-title">Product Structure</span>
							<ul class="list-hover5">
								<li><a href="javascript:void(0);"><span>Default</span></a></li>
								<li><a href="javascript:void(0);"><span>Thumbnail</span></a></li>
								<li><a href="javascript:void(0);"><span>Grid Media</span></a></li>
								<li><a href="javascript:void(0);"><span>Carousel</span></a></li>
								<li><a href="javascript:void(0);"><span>Full Width</span></a></li>
							</ul>
						</li>
						<li>
							<span class="menu-title">Shop Pages</span>
							<ul class="list-hover5">				
								<li><a href="javascript:void(0);"><span>Wishlist</span></a></li>
								<li><a href="javascript:void(0);"><span>Cart</span></a></li>
								<li><a href="javascript:void(0);"><span>Checkout</span></a></li>
								<li><a href="javascript:void(0);"><span>Compare</span></a></li>
								<li><a href="javascript:void(0);"><span>Order Tracking</span></a></li>
								<li><a href="javascript:void(0);"><span>My Account</span></a></li>
								<li><a href="javascript:void(0);"><span>Registration</span></a></li>
							</ul>
						</li>
						<li class="month-deal">
							<div class="clearfix p-r5">
								<h4 class="m-b5">Deal of the month</h4>
								<p class="m-b0">Yes! Send me exclusive offers, personalised, and unique gift ideas, tips for shopping on Pixio <a href="javascript:void(0);">View All Products</a></p>
							</div>
							<div class="sale-countdown">
								<div class="countdown">
									<div class="date">
										<span class="time days"></span>
										<span class="work-time">Days</span>
									</div>
									<div class="date">
										<span class="time hours"></span>
										<span class="work-time">Hours</span>
									</div>
									<div class="date">
										<span class="time mins"></span>
										<span class="work-time">Minutess</span>
									</div>
									<div class="date">
										<span class="time secs"></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>
	<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>
</ul>
04
  • Share:
logo
  • Images
  • Slider
  • Accordion

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

    This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
  • Offcanvas
Menu With Bootstrap Elements
<ul class="nav navbar-nav">
	<li class="has-mega-menu sub-menu-down full-width">
		<a href="javascript:void(0);">
			<span>Images</span>
			<span class="m-l5 badge-blank badge-wave wave-primary bg-primary"></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/industry/pic1.jpg" alt=""></div>
				<div class="col-md-3 col-6"><img class="rounded w-100" src="images/posts/industry/pic2.jpg" alt=""></div>
				<div class="col-md-3 col-6"><img class="rounded w-100" src="images/posts/industry/pic3.jpg" alt=""></div>
				<div class="col-md-3 col-6"><img class="rounded w-100" src="images/posts/industry/pic4.jpg" alt=""></div>
			</div>
		</div>
	</li>
	<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 menu-swiper" id="xMenuSwiper">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img class="rounded w-100" src="images/posts/plants/pic1.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img class="rounded w-100" src="images/posts/plants/pic2.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img class="rounded w-100" src="images/posts/plants/pic3.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img class="rounded w-100" src="images/posts/plants/pic4.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img class="rounded w-100" src="images/posts/plants/pic1.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img class="rounded w-100" src="images/posts/plants/pic2.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img class="rounded w-100" src="images/posts/plants/pic3.jpg" alt="">
					</div>
					<div class="swiper-slide">
						<img class="rounded w-100" src="images/posts/plants/pic4.jpg" alt="">
					</div>
				</div>
				<div class="swiper-pagination m-t30"></div>
				<div class="swiper-button-prev button-black"><i class="fa-solid fa-arrow-left"></i></div>
				<div class="swiper-button-next button-black"><i class="fa-solid fa-arrow-right"></i></div>
			</div>
		</div>
	</li>
	<li class="has-mega-menu sub-menu-down full-width">
		<a href="javascript:void(0);">
			<span>Accordion</span>
			<i class="m-l5 fa-solid fa-circle-question text-info badge-icon"></i>
			<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. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</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">
							<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
						</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">
							<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
						</div>
					</div>
				</div>
			</div>
		</div>
	</li>
	<li class="sub-menu-down sub-menu-down">
		<a href="javascript:void(0);">
			<span>Offcanvas</span>
			<i class="m-l5 fa-solid fa-circle-exclamation text-danger badge-icon"></i>
			<i class="fas fa-chevron-down tabindex"></i>
		</a>
		<ul class="sub-menu list-hover4">
			<li>
				<a href="#offcanvasExample" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample" data-hover="Offcanvas Left"><span>Offcanvas Left</span></a>
			</li>
			<li>
				<a href="#offcanvasTop" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop" data-hover="Offcanvas Top"><span>Offcanvas Top</span></a>
			</li>
			<li>
				<a href="#offcanvasRight" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight" data-hover="Offcanvas Right"><span>Offcanvas Right</span></a>
			</li>
			<li>
				<a href="#offcanvasBottom" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom" data-hover="Offcanvas Bottom"><span>Offcanvas Bottom</span></a>
			</li>
		</ul>
	</li>
</ul>
05
logo
Menu Position

You can easily change Menu Position with .menu-left, .menu-right and .menu-right

<ul class="nav navbar-nav">
	<li class="has-mega-menu sub-menu-down auto-width menu-left">
		<a href="javascript:void(0);">
			<span>Menu Left</span>
			<i class="ms-2 fa-solid fa-circle-exclamation text-danger badge-icon badge-zoom d-inline-block"></i>
			<i class="fas fa-chevron-down tabindex"></i>
		</a>
		<div class="mega-menu">
			<ul>
				<li>
					<span class="menu-title">Pages</span>
					<ul class="list-hover3">
						<li>
							<a href="javascript:void(0);">
								<span>About Us</span>
								<span class="badge rounded bg-primary light"><i class="fa-solid fa-circle"></i> NEW</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>About Me</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Pricing Table</span>
								<span class="badge rounded bg-secondary light"><i class="fa-solid fa-circle"></i> NEW</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Our Gift Vouchers</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>What We Do</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Faqs 1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Faqs 2</span>
								<span class="badge rounded bg-success light"><i class="fa-solid fa-circle"></i> NEW</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Our Team</span>
							</a>
						</li>
					</ul>
				</li>
				<li>
					<span class="menu-title">Contact Us</span>
					<ul class="list-hover3">
						<li>
							<a href="javascript:void(0);">
								<span>Contact Us 1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Contact Us 2</span>
								<span class="badge rounded bg-danger light"><i class="fa-solid fa-circle"></i> HOT</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Contact Us 3</span>
							</a>
						</li>
					</ul>
					<span class="menu-title">Web Pages</span>
					<ul class="list-hover3">
						<li>
							<a href="javascript:void(0);">
								<span>Error 404 1</span>
								<span class="badge rounded bg-warning light"><i class="fa-solid fa-circle"></i> Warning</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Error 404 2</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Coming Soon</span>
								<span class="badge rounded bg-info light"><i class="fa-solid fa-circle"></i> Info</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Under Construction</span>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</li>
	<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 class="list-hover3">
						<li>
							<a href="javascript:void(0);">
								<span>About Us</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>About Me</span>
								<span class="badge rounded bg-primary light"><i class="fa-solid fa-circle"></i> NEW</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Pricing Table</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Our Gift Vouchers</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>What We Do</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Faqs 1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Faqs 2</span>
								<span class="badge rounded bg-danger light"><i class="fa-solid fa-circle"></i> HOT</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Our Team</span>
							</a>
						</li>
					</ul>
				</li>
				<li>
					<span class="menu-title">Contact Us</span>
					<ul class="list-hover3">
						<li>
							<a href="javascript:void(0);">
								<span>Contact Us 1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Contact Us 2</span>
								<span class="badge rounded bg-success light"><i class="fa-solid fa-circle"></i> UPDATE</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Contact Us 3</span>
							</a>
						</li>
					</ul>
					<span class="menu-title">Web Pages</span>
					<ul class="list-hover3">
						<li>
							<a href="javascript:void(0);">
								<span>Error 404 1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Error 404 2</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Coming Soon</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Under Construction</span>
							</a>
						</li>
					</ul>
				</li>
				<li>
					<span class="menu-title">Banner Style</span>
					<ul class="list-hover3">				
						<li>
							<a href="javascript:void(0);">
								<span>Banner with BG Color</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Banner with Image</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Banner with Video</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Banner with Kanbern</span>
								<span class="badge rounded bg-info light"><i class="fa-solid fa-circle"></i> Info</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Banner Small</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Banner Medium</span>
							</a>
							</li>
						<li>
							<a href="javascript:void(0);">
								<span>Banner Large</span>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</li>
	<li class="has-mega-menu sub-menu-down auto-width menu-right">
		<a href="javascript:void(0);">
			<span>Menu Right</span>
			<i class="ms-2 fa-solid fa-fire-flame-curved text-danger badge-icon badge-zoom d-inline-block"></i>
			<i class="fas fa-chevron-down tabindex"></i>
		</a>
		<div class="mega-menu">
			<ul>
				<li>
					<span class="menu-title">Pages</span>
					<ul class="list-hover3">
						<li>
							<a href="javascript:void(0);">
								<span>About Us</span> 
								<span class="badge rounded bg-primary light"><i class="fa-solid fa-circle"></i> NEW</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>About Me</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Pricing Table</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Our Gift Vouchers</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>What We Do</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Faqs 1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Faqs 2</span>
								<span class="badge rounded bg-success light"><i class="fa-solid fa-circle"></i> NEW</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Our Team</span>
							</a>
						</li>
					</ul>
				</li>
				<li>
					<span class="menu-title">Contact Us</span>
					<ul class="list-hover3">
						<li>
							<a href="javascript:void(0);">
								<span>Contact Us 1</span>
								<span class="badge rounded bg-warning light"><i class="fa-solid fa-circle"></i> Warning</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Contact Us 2</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Contact Us 3</span>
							</a>
						</li>
					</ul>
					<span class="menu-title">Web Pages</span>
					<ul class="list-hover3">
						<li>
							<a href="javascript:void(0);">
								<span>Error 404 1</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Error 404 2</span>
								<span class="badge rounded bg-success light"><i class="fa-solid fa-circle"></i> NEW</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Coming Soon</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Under Construction</span>
							</a>
						</li>
					</ul>
				</li>
				<li>
					<span class="menu-title">Banner Style</span>
					<ul class="list-hover3">				
						<li>
							<a href="javascript:void(0);">
								<span>Banner with BG Color</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Banner with Image</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Banner with Video</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Banner with Kanbern</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Banner Small</span>
								<span class="badge rounded bg-secondary light"><i class="fa-solid fa-circle"></i> NEW</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Banner Medium</span>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);">
								<span>Banner Large</span>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</li>
</ul>
06
logo
Dropdown

You can easily change Dropdown Level and Position with .menu-right and .right

<ul class="nav navbar-nav">
	<li class="sub-menu-down">
		<a href="javascript:void(0);">
			<span>Dropdown</span>
			<span class="badge bg-info rounded">NEW</span>
			<i class="fas fa-chevron-down tabindex"></i>
		</a>
		<ul class="sub-menu list-hover2">
			<li><a href="javascript:void(0);"><span>Nav link 1</span>  <span class="badge rounded bg-danger light">HOT</span></a></li>
			<li><a href="javascript:void(0);"><span>Nav link 2</span> </a></li>
			<li><a href="javascript:void(0);"><span>Nav link 3</span> </a></li>
			<li><a href="javascript:void(0);"><span>Nav link 4</span>  <span class="badge rounded bg-info light">UPDATE</span></a></li>
			<li><a href="javascript:void(0);"><span>Nav link 5</span> </a></li>
		</ul>
	</li>
	<li class="sub-menu-down">
		<a href="javascript:void(0);">
			<span>Level 2</span>
			<span class="badge bg-danger rounded">HOT</span>
			<i class="fas fa-chevron-down tabindex"></i>
		</a>
		<ul class="sub-menu list-hover2">
			<li>
				<a href="javascript:void(0);">
					<span>Nav link 1 </span>
					<span class="badge rounded bg-warning light">INFO</span>
				</a>
			</li>
			<li><a href="javascript:void(0);"><span>Nav link 2 </span> </a></li>
			<li class="sub-menu-down"><a href="javascript:void(0);"><span>Nav link 3</span></a>
				<ul class="sub-menu list-hover2">						
					<li><a href="javascript:void(0);"><span>Nav link 1</span> </a></li>
					<li><a href="javascript:void(0);"><span>Nav link 2</span> <span class="badge rounded bg-danger light">NEW</span></a></li>
					<li><a href="javascript:void(0);"><span>Nav link 3</span> </a></li>
					<li><a href="javascript:void(0);"><span>Nav link 4</span> </a></li>
				</ul>
			</li>
			<li><a href="javascript:void(0);"><span>Nav link 4</span></a></li>
		</ul>
	</li>
	<li class="sub-menu-down">
		<a href="javascript:void(0);">	
			<span>Level 3</span>
			<i class="fas fa-chevron-down tabindex"></i>
		</a>
		<ul class="sub-menu list-hover2">
			<li><a href="javascript:void(0);"><span>Nav link 1</span></a></li>
			<li><a href="javascript:void(0);"><span>Nav link 2</span></a></li>
			
			<li class="sub-menu-down"><a href="javascript:void(0);"><span>Nav link 3</span></a>
				<ul class="sub-menu list-hover2">
					<li><a href="javascript:void(0);"><span>Nav link 1 </span><span class="badge rounded bg-success light">NEW</span></a></li>
					<li><a href="javascript:void(0);"><span>Nav link 2 </span></a></li>
					<li class="sub-menu-down"><a href="javascript:void(0);"><span>Nav link 3</span></a>
						<ul class="sub-menu list-hover2">						
							<li><a href="javascript:void(0);"><span>Nav link 1 </span> </a></li>
							<li><a href="javascript:void(0);"><span>Nav link 2 </span> <span class="badge rounded bg-secondary light">NEW</span></a></li>
							<li><a href="javascript:void(0);"><span>Nav link 3 </span> </a></li>
							<li><a href="javascript:void(0);"><span>Nav link 4 </span> <span class="badge rounded bg-primary light">NEW</span></a></li>
						</ul>
					</li>
					<li><a href="javascript:void(0);"><span>Nav link 4</span></a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="sub-menu-down">
		<a href="javascript:void(0);">
			<span>Dropdown Position</span>
			<span class="badge bg-info rounded">UPDATE</span>
			<i class="fas fa-chevron-down tabindex"></i>
		</a>
		<ul class="sub-menu list-hover2">
			<li><a href="javascript:void(0);"><span>Nav link 1</span> <span class="badge rounded bg-warning light">INFO</span></a></li>
			<li><a href="javascript:void(0);"><span>Nav link 2</span> </a></li>
			<li><a href="javascript:void(0);"><span>Nav link 3</span> <span class="badge rounded bg-success light">NEW</span></a></li>
			
			<li class="sub-menu-down left"><a href="javascript:void(0);"><span>Position Left</span></a>
				<ul class="sub-menu list-hover2">						
					<li><a href="javascript:void(0);"><span>Nav link 1</span> <span class="badge rounded bg-danger light">HOT</span></a></li>
					<li><a href="javascript:void(0);"><span>Nav link 2</span> </a></li>
					<li><a href="javascript:void(0);"><span>Nav link 3</span> </a></li>
					
					<li class="sub-menu-down right"><a href="javascript:void(0);"><span>Position Right</span></a>
						<ul class="sub-menu list-hover2">						
							<li><a href="javascript:void(0);"><span>Nav link 1</span></a></li>
							<li><a href="javascript:void(0);"><span>Nav link 2</span></a></li>
							<li><a href="javascript:void(0);"><span>Nav link 3</span></a></li>
							<li><a href="javascript:void(0);"><span>Nav link 4</span></a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
07
logo
Simple Menu
<ul class="nav navbar-nav">
	<li><a href="javascript:void(0);"><span>Nav 1</span> <span class="badge-blank m-l5 bg-primary"></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> <span class="badge-blank m-l5 bg-info"></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> <span class="badge-blank m-l5 bg-danger"></span></a></li>
	<li><a href="javascript:void(0);"><span>Nav 6</span></a></li>
</ul>
Badge Arrow
PRIMARY SECONDARY SUCCESS DANGER WARNING INFO DARK
Badge
PRIMARY SECONDARY SUCCESS DANGER WARNING INFO DARK
Badge Rounded
PRIMARY SECONDARY SUCCESS DANGER WARNING INFO DARK
Badge Light
PRIMARY SECONDARY SUCCESS DANGER WARNING INFO DARK
Badge With Circle
PRIMARY SECONDARY SUCCESS DANGER WARNING INFO DARK
Badge With Circle
Badge With Wave Effect
Badge Icon
Badge Icon
Search
Offcanvas right

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Offcanvas bottom

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.