diff --git a/CHANGELOG.md b/CHANGELOG.md
index 608ab8f30..6372e49fe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
## HEAD
+* **css:** Add Menu List component (#474)
* **css:** Fx theme CTAs should use the Metropolis Font (#468)
* **css:** Separate newsletter form and newsletter layout styling (#444)
* **css:** Add inline list component (#465)
diff --git a/src/assets/sass/protocol/components/_menu-list.scss b/src/assets/sass/protocol/components/_menu-list.scss
new file mode 100644
index 000000000..e84cf9ad0
--- /dev/null
+++ b/src/assets/sass/protocol/components/_menu-list.scss
@@ -0,0 +1,139 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+@import '../includes/lib';
+
+.mzp-c-menu-list {
+ display: inline-block;
+}
+
+.mzp-c-menu-list-title {
+ font-size: inherit;
+ font-weight: bold;
+
+ .mzp-t-mozilla .mzp-t-cta & {
+ @include font-firefox;
+ }
+}
+
+.mzp-c-menu-list-list {
+ background-color: #fff;
+ box-shadow: 0 0 6px 0 rgba(0, 0, 0, .3);
+ border-radius: 4px;
+}
+
+.mzp-c-menu-list-item {
+ display: inline-block;
+
+ a {
+ color: $color-link;
+ display: inline-block;
+ padding: $spacing-sm;
+ position: relative;
+ text-decoration: none;
+
+ .mzp-t-download & {
+ @include bidi(((padding-right, $spacing-sm * 2 + 14px, padding-left, $spacing-sm),));
+
+ &::after {
+ @include background-size(20px, 20px);
+ @include bidi(((right, $spacing-sm, left, auto),));
+ bottom: $spacing-sm;
+ content: '';
+ display: block;
+ position: absolute;
+ top: $spacing-sm;
+ width: 14px;
+ }
+ }
+
+ &:hover,
+ &:focus {
+ background: $color-gray-20;
+ color: $color-link-hover;
+
+ &::after {
+ background: $url-image-download-link-hover center center no-repeat;
+ }
+ }
+ }
+}
+
+
+/* ---- */
+// JS init
+
+//TODO: hide menu if JS enabled
+
+.is-details {
+ &.mzp-c-menu-list {
+ position: relative;
+ }
+
+ .mzp-c-menu-list-title {
+ button {
+ @include bidi(((padding, 0 (16px + $spacing-sm) 0 0, 0 0 0 (16px + $spacing-sm)),));
+ background: transparent;
+ border: 0;
+ color: $color-link;
+ cursor: pointer;
+ font-family: inherit;
+ font-size: inherit;
+ font-weight: inherit;
+ position: relative;
+ text-align: inherit;
+ text-decoration: underline;
+ width: 100%;
+
+ &:after {
+ @include background-size(20px, 20px);
+ @include bidi(((right, 0, left, auto),));
+ background: $url-image-arrow-down-link center bottom no-repeat;
+ bottom: 1px;
+ content: '';
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ width: 16px;
+ @include transition(transform 200ms ease-in-out);
+ }
+
+ &[aria-expanded=true]:after {
+ @include transform(scaleY(-1));
+ }
+
+ &:hover,
+ &:focus {
+ color: $color-link-hover;
+ text-decoration: none;
+
+ &:after {
+ background-image: $url-image-arrow-down-link-hover;
+ }
+ }
+
+ }
+ }
+
+ .mzp-c-menu-list-list {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ z-index: 1;
+ padding: $spacing-xs 0;
+ min-width: 150px;
+
+ &.is-closed {
+ display: none;
+ }
+ }
+
+ .mzp-c-menu-list-item {
+ display: block;
+
+ a {
+ display: block;
+ }
+ }
+}
diff --git a/src/assets/sass/protocol/includes/mixins/_images.scss b/src/assets/sass/protocol/includes/mixins/_images.scss
index 701595103..1a385f183 100644
--- a/src/assets/sass/protocol/includes/mixins/_images.scss
+++ b/src/assets/sass/protocol/includes/mixins/_images.scss
@@ -77,7 +77,13 @@
$svg-expand-white: '';
// https://github.com/mozilla/protocol-assets/blob/master/icons/ui/expand-black.svg
$svg-expand-black: '';
+$svg-arrow-down-link: '';
+$svg-arrow-down-link-hover: '';
+$svg-download-link-hover: '';
// converted to url(svg) value
$url-image-expand-white: svg-url($svg-expand-white);
$url-image-expand-black: svg-url($svg-expand-black);
+$url-image-arrow-down-link: svg-url($svg-arrow-down-link);
+$url-image-arrow-down-link-hover: svg-url($svg-arrow-down-link-hover);
+$url-image-download-link-hover: svg-url($svg-download-link-hover);
diff --git a/src/assets/sass/protocol/protocol-extra.scss b/src/assets/sass/protocol/protocol-extra.scss
index 34d714706..8f94999b3 100644
--- a/src/assets/sass/protocol/protocol-extra.scss
+++ b/src/assets/sass/protocol/protocol-extra.scss
@@ -16,6 +16,7 @@ $image-path: '../img' !default;
@import '../protocol/components/hero';
@import '../protocol/components/inline-list';
@import '../protocol/components/modal';
+@import '../protocol/components/menu-list';
@import '../protocol/components/newsletter-form';
@import '../protocol/components/notification-bar';
@import '../protocol/components/picto-card';
diff --git a/src/patterns/molecules/menu-list/collection.yml b/src/patterns/molecules/menu-list/collection.yml
new file mode 100644
index 000000000..801c666f1
--- /dev/null
+++ b/src/patterns/molecules/menu-list/collection.yml
@@ -0,0 +1,2 @@
+name: Menu List
+title: Menu List
diff --git a/src/patterns/molecules/menu-list/menu-list-default.hbs b/src/patterns/molecules/menu-list/menu-list-default.hbs
new file mode 100644
index 000000000..4d3cb6c9a
--- /dev/null
+++ b/src/patterns/molecules/menu-list/menu-list-default.hbs
@@ -0,0 +1,23 @@
+---
+name: Menu List
+description: A sort title, when clicked, expands a list of links.
+order: 1
+notes: |
+ - Use the mzp-t-cta and mzp-t-download options to customize the appearance
+---
+
+
+
+
+
+
diff --git a/src/patterns/molecules/menu-list/menu-list-download.hbs b/src/patterns/molecules/menu-list/menu-list-download.hbs
new file mode 100644
index 000000000..00beecf70
--- /dev/null
+++ b/src/patterns/molecules/menu-list/menu-list-download.hbs
@@ -0,0 +1,23 @@
+---
+name: Menu List
+description: Customized with mzp-t-cta and mzp-t-download
+order: 2
+---
+
+
+
+
+
+
+
+