Bootstrap 4 Megamenu dropdown

dropdown-megamenu.scss

// Mega menu canvas
.dropdown--canvas {

    // Reset margin and padding
    .dropdown-menu {
        left    : auto;
        padding : 0;
        margin  : 0;
    }

    // Default canvas width
    .dropdown-menu {
        width : 600px;
    }
}

// Align the menu to the left
.dropdown--canvas--left .dropdown-menu {
    right : 0;
}

// Set a smaller canvas size
.dropdown--canvas--sm .dropdown-menu {
    width : 300px;
}

Use it like this

<li class="nav-item dropdown dropdown--canvas dropdown--canvas--left dropdown--canvas--sm">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
        Menu item
    </a>
    <div class="dropdown-menu">
        Hello!
    </div>
</li>

Classes dropdown--canvas--left and dropdown--canvas--sm are optional.

Nice work. I have been playing with the .scss to archive a full-width dropdown menu but have not yet succeeded. So how can archive that

Hi,
.dropdown--canvas--left is not working. Because, Bootstrap dropdown.js is fixing the item to the left.

If you can use this,

.dropdown--canvas--left .dropdown-menu {
  right : 0;
  left: inherit !important;
}

You can use the following code to solve this problem.