Canvas Docs

Mega Menu

Mega Menu

The Canvas mega menu turns a top-level menu item into a full multi-column dropdown. It reuses Bootstrap 5's grid (.row / .col) inside a .mega-menu-content panel, so you can lay out columns, headings, icons, and even widgets.

Enabling a Mega Menu

Add the mega-menu class to any .menu-item, then place a .mega-menu-content panel inside it:

<li class="menu-item mega-menu">
	<a class="menu-link" href="#">
		<div>Mega Menu</div>
	</a>
	<div class="mega-menu-content">
		<div class="container">
			<div class="row">

				<ul class="sub-menu-container mega-menu-column col">
					<li class="menu-item mega-menu-title">
						<a class="menu-link bg-color" href="#">
							<div class="mb-0 fw-bold text-white">Headers</div>
						</a>
						<ul class="sub-menu-container">
							<li class="menu-item">
								<a class="menu-link" href="header-light.html">
									<div><i class="bi-three-dots"></i>Default</div>
								</a>
							</li>
						</ul>
					</li>
				</ul>

			</div>
		</div>
	</div>
</li>

Mega Menu Classes

Class Purpose
mega-menu Marks a .menu-item as a mega menu container.
mega-menu-content The dropdown panel that holds the Bootstrap grid.
mega-menu-column A column of links. Combine with Bootstrap .col, .col-lg-3, etc.
mega-menu-title A column heading item (styled as a section title).
mega-menu-small Constrains the mega menu to a smaller width.
mega-menu-full Stretches the mega menu across the full header width.
mega-menu-style-2 Alternate visual style for the content panel.
mega-menu-dropdown Renders the mega menu as a compact dropdown.

Column Layout with Bootstrap Grid

Because the content panel is a normal Bootstrap .container > .row, you control the columns with standard grid classes:

<div class="mega-menu-content mega-menu-style-2">
	<div class="container">
		<div class="row">
			<ul class="sub-menu-container mega-menu-column col-lg-3"> ... </ul>
			<ul class="sub-menu-container mega-menu-column col-lg-3"> ... </ul>
			<ul class="sub-menu-container mega-menu-column col-lg-3"> ... </ul>
			<ul class="sub-menu-container mega-menu-column col-lg-3"> ... </ul>
		</div>
	</div>
</div>

Styled Column Headings

The demos use mega-menu-title with a coloured background link to create section headers:

<li class="menu-item mega-menu-title">
	<a class="menu-link bg-color" href="#">
		<div class="mb-0 fw-bold text-white">Menu Styles</div>
	</a>
	<ul class="sub-menu-container">
		<li class="menu-item">
			<a class="menu-link" href="menu-2.html">
				<div><i class="bi-list"></i>Alternate Layout</div>
			</a>
		</li>
	</ul>
</li>

Style Variant

<div class="mega-menu-content mega-menu-style-2 border-top-0 rounded">

Notes and Tips

  • Icons inside links use Bootstrap Icons (bi-*) or Unicons (uil-*) placed before the label text inside the <div>.
  • mega-menu-full is handy for edge-to-edge promos; mega-menu-small keeps a tighter dropdown.
  • The mega menu content is a real Bootstrap grid, so you can drop in images, buttons, or any shortcode, not just link lists.
  • Keep the outer .menu-link href="#" for the trigger; it is only a hover target, not a real link.

Usage

<nav class="primary-menu">

	<ul class="menu-container">
		<li class="menu-item mega-menu">
			<a class="menu-link" href="#"><div>Shortcodes</div></a>
			<div class="mega-menu-content">
				<div class="container">
					<div class="row">
						<!-- Column 1 -->
						<ul class="sub-menu-container mega-menu-column col-lg-3">
							<li class="menu-item">
								<a class="menu-link" href="animations.html"><div><i class="icon-magic"></i>Animations</div></a>
							</li>
							<li class="menu-item">
								<a class="menu-link" href="buttons.html"><div><i class="icon-link"></i>Buttons</div></a>
							</li>
							<li class="menu-item">
								<a class="menu-link" href="carousel.html"><div><i class="icon-heart3"></i>Carousel</div></a>
							</li>
						</ul>

						<!-- Column 2 -->
						<ul class="sub-menu-container mega-menu-column col-lg-3">

							...

						</ul>
					</div>
				</div>
			</div>
		</li>
	</ul>

</nav>

Code Snippets

Full Mega Menus

A full-width mega menu spans the entire header row. Add mega-menu mega-menu-full to the parent .menu-item, then put your columns inside .mega-menu-content.

<li class="menu-item mega-menu mega-menu-full">
    <a class="menu-link" href="#"><div>Mega Menu</div></a>
    <div class="mega-menu-content">
        <div class="row">
            <div class="col-lg-3 mega-menu-column">
                <ul>
                    <li class="menu-item"><a class="menu-link" href="#"><div>Link 1</div></a></li>
                    <li class="menu-item"><a class="menu-link" href="#"><div>Link 2</div></a></li>
                </ul>
            </div>
            <div class="col-lg-3 mega-menu-column">
                <!-- more columns -->
            </div>
        </div>
    </div>
</li>

Notes:

  • mega-menu-full stretches the dropdown to the full header width; without it, a standard mega-menu is only as wide as the header row content.
  • Use mega-menu-column on each column wrapper.
  • Add mega-menu-style-2 on the item for the alternate styling.

Widgets in Mega Menu

Widgets in Mega Menu

A mega menu column can hold arbitrary content, not just link lists. Drop any Canvas widget or block markup inside a .mega-menu-column to build promo panels, contact blocks, or featured cards.

<li class="menu-item mega-menu">
    <a class="menu-link" href="#"><div>Company</div></a>
    <div class="mega-menu-content">
        <div class="container">
            <div class="row">

                <!-- Link column -->
                <ul class="sub-menu-container mega-menu-column col-8">
                    <li class="menu-item mega-menu-title">
                        <a class="menu-link" href="#"><div>Explore</div></a>
                        <ul class="sub-menu-container">
                            <li class="menu-item"><a class="menu-link" href="#"><div>About Us</div></a></li>
                            <li class="menu-item"><a class="menu-link" href="#"><div>Careers</div></a></li>
                        </ul>
                    </li>
                </ul>

                <!-- Widget column -->
                <div class="mega-menu-column col-4">
                    <div class="widget">
                        <img src="images/promo.jpg" alt="Promo" class="rounded mb-3">
                        <h4>New this season</h4>
                        <a href="#" class="button button-rounded m-0">Shop Now</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</li>

Notes:

  • Any .mega-menu-column may be a <div> holding widgets instead of a <ul> of links; use Bootstrap grid widths (col-4, col-8) to split the row.
  • Link columns use .sub-menu-container with a .mega-menu-title heading item; content columns just use .widget blocks.
  • Combine with mega-menu-small on the parent for a compact panel.

Smaller Mega Menu

Smaller Mega Menu

A full-width mega menu spans the whole header. To make it only as wide as its content (a compact dropdown-style mega panel), add mega-menu-small to the mega menu item.

<li class="menu-item mega-menu mega-menu-small">
    <a class="menu-link" href="#"><div>Features</div></a>
    <div class="mega-menu-content">
        <div class="container">
            <div class="row">
                <ul class="sub-menu-container mega-menu-column col">
                    <li class="menu-item mega-menu-title">
                        <a class="menu-link" href="#"><div>Column Title</div></a>
                        <ul class="sub-menu-container">
                            <li class="menu-item"><a class="menu-link" href="#"><div>Item One</div></a></li>
                            <li class="menu-item"><a class="menu-link" href="#"><div>Item Two</div></a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</li>

Notes:

  • mega-menu-small narrows the panel to fit its columns instead of stretching edge to edge.
  • The structure is the same as a full mega menu: .mega-menu-content > .container > .row with .mega-menu-column (col) lists, each headed by a .mega-menu-title item.
  • Use fewer columns (or a single column) for the tightest compact panel.
  • Mega menu items do not get an auto sub-menu-trigger arrow because menus.js skips .mega-menu-title when adding triggers.
Was this page helpful?