The YouTube menu design is one of the most engaging and widely used UI patterns on the web. By combining a sidebar with a top navigation bar, YouTube has created a highly smooth and user-friendly experience. In this comprehensive article, we will learn step-by-step how to design a YouTube-style menu using pure HTML and CSS.
Why is the YouTube menu so popular?
The YouTube menu is a smart blend of simplicity and functionality. A fixed sidebar on the left side of the screen houses icons for Home, Shorts, Subscriptions, Library, and more.
Designing such a menu using HTML and CSS not only strengthens your fundamental skills but also covers important concepts such as layout, Flexbox, Grid, pseudo-elements, and responsive design.
HTML Code
<!doctype html>
<html>
<head>
<link href="./css/style.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
</head>
<body>
<div class="menu mobile">
<h3 class="title">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M20 5H4a1 1 0 000 2h16a1 1 0 100-2Zm0 6H4a1 1 0 000 2h16a1 1 0 000-2Zm0 6H4a1 1 0 000 2h16a1 1 0 000-2Z"
></path></svg
>
</h3>
<div class="seperator"></div>
<nav>
<ul>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="m11.485 2.143-8 4.8-2 1.2a1 1 0 001.03 1.714L3 9.567V20a2 2 0 002 2h6v-7h2v7h6a2 2 0 002-2V9.567l.485.29a1 1 0 001.03-1.714l-2-1.2-8-4.8a1 1 0 00-1.03 0ZM5 8.366l7-4.2 7 4.2V20h-4v-5.5a1.5 1.5 0 00-1.5-1.5h-3A1.5 1.5 0 009 14.5V20H5V8.366Z"
></path>
</svg>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="m13.467 1.19-8 4.7a5 5 0 00-.255 8.46 5 5 0 005.32 8.462l8-4.7a5 5 0 00.258-8.462 5 5 0 001.641-6.464l-.12-.217a5 5 0 00-6.844-1.78m5.12 2.79a2.999 2.999 0 01-1.067 4.107l-1.327.78a1 1 0 00.096 1.775l.943.423a3 3 0 01.288 5.323l-8 4.7a3 3 0 01-3.039-5.173l1.327-.78a1 1 0 00-.097-1.775l-.942-.423a3 3 0 01-.288-5.323l8-4.7a3 3 0 014.106 1.066ZM15 12l-5-3v6l5-3Z"
></path>
</svg>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M18 1H6a2 2 0 00-2 2h16a2 2 0 00-2-2Zm3 4H3a2 2 0 00-2 2v13a2 2 0 002 2h18a2 2 0 002-2V7a2 2 0 00-2-2ZM3 20V7h18v13H3Zm13-6.5L10 10v7l6-3.5Z"
></path>
</svg>
</a>
</li>
</ul>
</nav>
<div class="seperator"></div>
<nav>
<ul>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M4 2a2 2 0 00-2 2v16a2 2 0 002 2h16a2 2 0 002-2V4a2 2 0 00-2-2H4Zm8 10.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7Zm-6.467 5.821A7.001 7.001 0 0118.928 20H5.072a7 7 0 01.461-1.679Z"
></path>
</svg>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M8.76 1.487a11 11 0 11-7.54 12.706 1 1 0 011.96-.4 9 9 0 0014.254 5.38A9 9 0 0016.79 4.38 9 9 0 004.518 7H7a1 1 0 010 2H1V3a1 1 0 012 0v2.678a11 11 0 015.76-4.192ZM12 6a1 1 0 00-1 1v5.58l.504.288 3.5 2a1 1 0 10.992-1.736L13 11.42V7a1 1 0 00-1-1Z"
></path>
</svg>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M16 15.395a.5.5 0 01.762-.426L22.5 18.5l-5.738 3.531a.5.5 0 01-.762-.425v-6.212ZM14 19H4a1 1 0 110-2h10v2Zm6-8a1 1 0 110 2H4a1 1 0 110-2h16Zm0-6a1 1 0 110 2H4a1 1 0 010-2h16Z"
></path>
</svg>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1Zm0 2a9 9 0 110 18.001A9 9 0 0112 3Zm0 3a1 1 0 00-1 1v5.565l.485.292 3.33 2a1 1 0 001.03-1.714L13 11.435V7a1 1 0 00-1-1Z"
></path>
</svg>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M9.221 1.795a1 1 0 011.109-.656l1.04.173a4 4 0 013.252 4.784L14 9h4.061a3.664 3.664 0 013.576 2.868A3.68 3.68 0 0121 14.85l.02.087A3.815 3.815 0 0120 18.5v.043l-.01.227a2.82 2.82 0 01-.135.663l-.106.282A3.754 3.754 0 0116.295 22h-3.606l-.392-.007a12.002 12.002 0 01-5.223-1.388l-.343-.189-.27-.154a2.005 2.005 0 00-.863-.26l-.13-.004H3.5a1.5 1.5 0 01-1.5-1.5V12.5A1.5 1.5 0 013.5 11h1.79l.157-.013a1 1 0 00.724-.512l.063-.145 2.987-8.535Zm-1.1 9.196A3 3 0 015.29 13H4v4.998h1.468a4 4 0 011.986.528l.27.155.285.157A10 10 0 0012.69 20h3.606c.754 0 1.424-.483 1.663-1.2l.03-.126a.819.819 0 00.012-.131v-.872l.587-.586c.388-.388.577-.927.523-1.465l-.038-.23-.02-.087-.21-.9.55-.744A1.663 1.663 0 0018.061 11H14a2.002 2.002 0 01-1.956-2.418l.623-2.904a2 2 0 00-1.626-2.392l-.21-.035-2.71 7.741Z"
></path>
</svg>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M21 3H3a2 2 0 00-2 2v14a2 2 0 002 2h18a2 2 0 002-2V5a2 2 0 00-2-2ZM3 19V5h18v14H3Zm13-7L9.5 8v8l6.5-4Z"
></path>
</svg>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M12 2a1 1 0 00-1 1v11.586l-4.293-4.293a1 1 0 10-1.414 1.414L12 18.414l6.707-6.707a1 1 0 10-1.414-1.414L13 14.586V3a1 1 0 00-1-1Zm7 18H5a1 1 0 000 2h14a1 1 0 000-2Z"
></path>
</svg>
</a>
</li>
</ul>
</nav>
</div>
<div class="menu">
<h3 class="title">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M20 5H4a1 1 0 000 2h16a1 1 0 100-2Zm0 6H4a1 1 0 000 2h16a1 1 0 000-2Zm0 6H4a1 1 0 000 2h16a1 1 0 000-2Z"
></path></svg
><span>YouTube</span>
</h3>
<div class="sub-title">menu</div>
<div class="seperator"></div>
<nav>
<ul>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="m11.485 2.143-8 4.8-2 1.2a1 1 0 001.03 1.714L3 9.567V20a2 2 0 002 2h6v-7h2v7h6a2 2 0 002-2V9.567l.485.29a1 1 0 001.03-1.714l-2-1.2-8-4.8a1 1 0 00-1.03 0ZM5 8.366l7-4.2 7 4.2V20h-4v-5.5a1.5 1.5 0 00-1.5-1.5h-3A1.5 1.5 0 009 14.5V20H5V8.366Z"
></path>
</svg>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="m13.467 1.19-8 4.7a5 5 0 00-.255 8.46 5 5 0 005.32 8.462l8-4.7a5 5 0 00.258-8.462 5 5 0 001.641-6.464l-.12-.217a5 5 0 00-6.844-1.78m5.12 2.79a2.999 2.999 0 01-1.067 4.107l-1.327.78a1 1 0 00.096 1.775l.943.423a3 3 0 01.288 5.323l-8 4.7a3 3 0 01-3.039-5.173l1.327-.78a1 1 0 00-.097-1.775l-.942-.423a3 3 0 01-.288-5.323l8-4.7a3 3 0 014.106 1.066ZM15 12l-5-3v6l5-3Z"
></path>
</svg>
<span>Shorts</span>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M18 1H6a2 2 0 00-2 2h16a2 2 0 00-2-2Zm3 4H3a2 2 0 00-2 2v13a2 2 0 002 2h18a2 2 0 002-2V7a2 2 0 00-2-2ZM3 20V7h18v13H3Zm13-6.5L10 10v7l6-3.5Z"
></path>
</svg>
<span>Subscriptions</span>
</a>
</li>
</ul>
</nav>
<div class="seperator"></div>
<h3 class="sub-title">
You
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M8.793 5.293a1 1 0 000 1.414L14.086 12l-5.293 5.293a1 1 0 101.414 1.414L16.914 12l-6.707-6.707a1 1 0 00-1.414 0Z"
></path>
</svg>
</h3>
<nav>
<ul>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M4 2a2 2 0 00-2 2v16a2 2 0 002 2h16a2 2 0 002-2V4a2 2 0 00-2-2H4Zm8 10.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7Zm-6.467 5.821A7.001 7.001 0 0118.928 20H5.072a7 7 0 01.461-1.679Z"
></path>
</svg>
<span>Your channel</span>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M8.76 1.487a11 11 0 11-7.54 12.706 1 1 0 011.96-.4 9 9 0 0014.254 5.38A9 9 0 0016.79 4.38 9 9 0 004.518 7H7a1 1 0 010 2H1V3a1 1 0 012 0v2.678a11 11 0 015.76-4.192ZM12 6a1 1 0 00-1 1v5.58l.504.288 3.5 2a1 1 0 10.992-1.736L13 11.42V7a1 1 0 00-1-1Z"
></path>
</svg>
<span>History</span>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M16 15.395a.5.5 0 01.762-.426L22.5 18.5l-5.738 3.531a.5.5 0 01-.762-.425v-6.212ZM14 19H4a1 1 0 110-2h10v2Zm6-8a1 1 0 110 2H4a1 1 0 110-2h16Zm0-6a1 1 0 110 2H4a1 1 0 010-2h16Z"
></path>
</svg>
<span>Playlists</span>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1Zm0 2a9 9 0 110 18.001A9 9 0 0112 3Zm0 3a1 1 0 00-1 1v5.565l.485.292 3.33 2a1 1 0 001.03-1.714L13 11.435V7a1 1 0 00-1-1Z"
></path>
</svg>
<span>Watch later</span>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M9.221 1.795a1 1 0 011.109-.656l1.04.173a4 4 0 013.252 4.784L14 9h4.061a3.664 3.664 0 013.576 2.868A3.68 3.68 0 0121 14.85l.02.087A3.815 3.815 0 0120 18.5v.043l-.01.227a2.82 2.82 0 01-.135.663l-.106.282A3.754 3.754 0 0116.295 22h-3.606l-.392-.007a12.002 12.002 0 01-5.223-1.388l-.343-.189-.27-.154a2.005 2.005 0 00-.863-.26l-.13-.004H3.5a1.5 1.5 0 01-1.5-1.5V12.5A1.5 1.5 0 013.5 11h1.79l.157-.013a1 1 0 00.724-.512l.063-.145 2.987-8.535Zm-1.1 9.196A3 3 0 015.29 13H4v4.998h1.468a4 4 0 011.986.528l.27.155.285.157A10 10 0 0012.69 20h3.606c.754 0 1.424-.483 1.663-1.2l.03-.126a.819.819 0 00.012-.131v-.872l.587-.586c.388-.388.577-.927.523-1.465l-.038-.23-.02-.087-.21-.9.55-.744A1.663 1.663 0 0018.061 11H14a2.002 2.002 0 01-1.956-2.418l.623-2.904a2 2 0 00-1.626-2.392l-.21-.035-2.71 7.741Z"
></path>
</svg>
<span>Liked videos</span>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M21 3H3a2 2 0 00-2 2v14a2 2 0 002 2h18a2 2 0 002-2V5a2 2 0 00-2-2ZM3 19V5h18v14H3Zm13-7L9.5 8v8l6.5-4Z"
></path>
</svg>
<span>Your videos</span>
</a>
</li>
<li>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
focusable="false"
aria-hidden="true"
style="
pointer-events: none;
display: inherit;
width: 100%;
height: 100%;
"
>
<path
d="M12 2a1 1 0 00-1 1v11.586l-4.293-4.293a1 1 0 10-1.414 1.414L12 18.414l6.707-6.707a1 1 0 10-1.414-1.414L13 14.586V3a1 1 0 00-1-1Zm7 18H5a1 1 0 000 2h14a1 1 0 000-2Z"
></path>
</svg>
<span>Downloads</span>
</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
CSS Code
* {
box-sizing: border-box;
transition: all 0.3s ease-in;
}
body {
margin: 0;
background-image: url(../img/bg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
gap:60px;
padding: 20px;
font-family: Roboto, "Arial", sans-serif;
font-size: 16px;
}
.menu svg {
max-width: 25px;
width: 25px;
}
.menu {
border: 1px solid #6ce2df88;
border-radius: 18px;
background-color: #0006;
backdrop-filter: blur(10px);
width: 350px;
padding: 10px;
color: #fff;
fill: #fff;
box-shadow: #6ce2df88 0 0 10px;
}
.menu .title {
font-size: 24px;
margin: 20px 0;
padding: 0 10px;
display: flex;
align-items: center;
gap: 20px;
cursor: pointer;
}
.menu .sub-title {
font-size: 18px;
margin-top: 10px;
padding: 0 10px;
font-weight: 700;
text-transform: capitalize;
display: flex;
align-items: center;
gap: 20px;
color: #ccc;
fill: #ccc;
}
.menu .seperator {
height: 1px;
background: #eee6;
margin: 15px 0;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li a {
color: #fff;
display: flex;
align-items: center;
gap: 20px;
text-decoration: none;
text-transform: capitalize;
padding: 10px;
border-radius: 15px;
}
.menu ul li a:hover {
background-color: #6ce2df33;
}
.menu ul li a span {
line-height: 1px;
}
.menu.mobile {
width: auto;
padding-top: 10px;
}
@media screen and (max-width:767px) {
.menu {
width: auto;
padding-top: 10px;
}
.menu .title span,
.menu .sub-title,
.menu ul li a span {
display: none;
}
.menu .title {
justify-content: center;
}
}