src/arquivos/sass/partials/_header.scss

@@ -1,7 +1,7 @@
 .page-header {
 	background-color: $color-black;
 	padding: 28px 0;
-
+	position: relative;
 	@include mq(lg, max) {
 		padding: 18px 0 0;
 	}

src/arquivos/sass/partials/_menu.scss

@@ -1,4 +1,5 @@
 .menu {
+	align-self: stretch;
 	&__button {
 		padding: 0;
 		border: 0;
@@ -11,6 +12,119 @@
 	}
 
 	.main-menu {
-		display: none;
+		height: 100%;
+		&__departments {
+			display: flex;
+			height: 100%;
+			margin: 0;
+		}
+
+		&__department {
+			display: flex;
+			align-items: center;
+			margin-right: 40px;
+
+			@include mq(lg, min) {
+				&:hover {
+					.main-menu__department-link {
+						text-decoration: underline;
+						font-weight: 700;
+						color: $color-blue;
+					}
+
+					.submenu {
+						top: 100%;
+						opacity: 1;
+						pointer-events: all;
+					}
+				}
+			}
+		}
+
+		&__department-link {
+			font-size: 15px;
+			line-height: 12px;
+			color: $color-white;
+
+			@include mq(lg, min) {
+				&::after {
+					content: attr(title);
+					display: block;
+					height: 0;
+					overflow: hidden;
+					font-weight: bold;
+					visibility: hidden;
+				}
+			}
+		}
+	}
+
+	.submenu {
+		position: absolute;
+		top: calc(100% + 32px);
+		left: 0;
+		width: 100%;
+		padding: 30px 0 43px;
+		z-index: map-get($z-index, menu);
+		background: rgba($color-white, 0.95);
+		box-shadow: 0px 4px 4px rgba($color-black, 0.02);
+		opacity: 0;
+		pointer-events: none;
+		transition: all 0.2s ease-in-out;
+
+		&::before {
+			content: "";
+			position: absolute;
+			left: 0;
+			bottom: 100%;
+			width: 100%;
+			height: 28px;
+			background: transparent;
+		}
+
+		&__title {
+			margin: 0 0 16px;
+			font-size: 20px;
+			line-height: 24px;
+		}
+
+		&__categories-wrapper {
+			display: flex;
+			margin-bottom: 8px;
+		}
+
+		&__categories {
+			margin-right: 30px;
+		}
+
+		&__category {
+			padding: 8px 0;
+		}
+
+		&__category-link {
+			font-size: 12px;
+			line-height: 15px;
+			color: $color-black;
+			transition: color 0.2s linear;
+
+			@include mq(lg, min) {
+				&:hover {
+					color: $color-blue;
+				}
+			}
+		}
+
+		&__see-all {
+			display: flex;
+			align-items: center;
+			font-size: 12px;
+			line-height: 15px;
+			font-weight: bold;
+			color: $color-black;
+
+			i {
+				margin-left: 9px;
+			}
+		}
 	}
 }

src/arquivos/sass/utils/_normalize.scss

@@ -23,7 +23,7 @@ html {
    */
 
 body {
-	color: #142032;
+	color: $color-black;
 	margin: 0;
 }
 

src/controles-customizados/menuPrincipal.html

@@ -0,0 +1,76 @@
+<nav class="main-menu">
+	<ul class="main-menu__departments">
+		<li class="main-menu__department">
+			<a class="main-menu__department-link" href="#" title="LOREM IPSUM"
+				>LOREM IPSUM</a
+			>
+
+			<div class="submenu">
+				<div class="container">
+					<h2 class="submenu__title">LOREM IPSUM</h2>
+					<div class="submenu__categories-wrapper">
+						<ul class="submenu__categories">
+							<li class="submenu__category">
+								<a class="submenu__category-link" href=""
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a class="submenu__category-link" href=""
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a class="submenu__category-link" href=""
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a class="submenu__category-link" href=""
+									>Lorem Ipsum</a
+								>
+							</li>
+						</ul>
+
+						<ul class="submenu__categories">
+							<li class="submenu__category">
+								<a class="submenu__category-link" href=""
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a class="submenu__category-link" href=""
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a class="submenu__category-link" href=""
+									>Lorem Ipsum</a
+								>
+							</li>
+							<li class="submenu__category">
+								<a class="submenu__category-link" href=""
+									>Lorem Ipsum</a
+								>
+							</li>
+						</ul>
+					</div>
+					<a class="submenu__see-all" href="#"
+						>VER TODOS
+						<i class="sprite sprite-menu-arrow"></i>
+					</a>
+				</div>
+			</div>
+		</li>
+		<li class="main-menu__department">
+			<a class="main-menu__department-link" href="#" title="LOREM IPSUM"
+				>LOREM IPSUM</a
+			>
+		</li>
+		<li class="main-menu__department">
+			<a class="main-menu__department-link" href="#" title="LOREM IPSUM"
+				>LOREM IPSUM</a
+			>
+		</li>
+	</ul>
+</nav>

src/template-pagina/sub-templates/thiagodutra-header.html

@@ -5,7 +5,7 @@
 				<button class="menu__button">
 					<i class="sprite sprite-menu-mobile"></i>
 				</button>
-				<nav class="main-menu"></nav>
+				<vtex.cmc:menuPrincipal />
 			</div>
 
 			<a href="/">