diff --git a/contents/_includes/covers/menu.njk b/contents/_includes/covers/menu.njk
new file mode 100644
index 0000000..dce5a33
--- /dev/null
+++ b/contents/_includes/covers/menu.njk
@@ -0,0 +1,14 @@
+
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 804d7c7..aea6cad 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -129,8 +129,9 @@ eleventyExcludeFromCollections: true
{% pattern "Circular navigation" %}{% include "covers/circular-navigation.njk" %}{% endpattern %}
{% pattern "Dot navigation" %}{% include "covers/dot-navigation.njk" %}{% endpattern %}
{% pattern "Drawer" %}{% include "covers/drawer.njk" %}{% endpattern %}
- {% pattern "Tab" %}{% include "covers/tab.njk" %}{% endpattern %}
+ {% pattern "Menu" %}{% include "covers/menu.njk" %}{% endpattern %}
{% pattern "Pagination" %}{% include "covers/pagination.njk" %}{% endpattern %}
+ {% pattern "Tab" %}{% include "covers/tab.njk" %}{% endpattern %}
{% pattern "Wizard" %}{% include "covers/wizard.njk" %}{% endpattern %}
diff --git a/contents/menu.md b/contents/menu.md
new file mode 100644
index 0000000..1da4be7
--- /dev/null
+++ b/contents/menu.md
@@ -0,0 +1,75 @@
+---
+layout: layouts/post.njk
+title: Menu
+description: Create a menu with CSS flexbox
+keywords: css flexbox, css menu
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.menu {
+ display: flex;
+ flex-direction: column;
+
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+}
+
+.menu__item {
+ /* Center the content horizontally */
+ align-items: center;
+ display: flex;
+}
+
+.menu__hotkey {
+ /* Push the hot key to the right */
+ margin-left: auto;
+}
+
+.menu__divider {
+ border-bottom: 1px solid #d1d5db;
+ height: 1px;
+}
+```
+
+{% demo %}{% include "covers/menu.njk" %}{% enddemo %}
diff --git a/pages/menu/index.tsx b/pages/menu/index.tsx
deleted file mode 100644
index ebcf097..0000000
--- a/pages/menu/index.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default Details;
diff --git a/patterns/menu/Cover.tsx b/patterns/menu/Cover.tsx
deleted file mode 100644
index c587dbe..0000000
--- a/patterns/menu/Cover.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Line from '../../placeholders/Line';
-
-const Cover: React.FC<{}> = () => {
- return (
-
-
-
- );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 491e121..c3074e9 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -55,6 +55,7 @@
@import './patterns/lined-paper';
@import './patterns/masonry-grid';
@import './patterns/media-object';
+@import './patterns/menu';
@import './patterns/modal';
@import './patterns/notification';
@import './patterns/overlay-play-button';
diff --git a/styles/patterns/_menu.scss b/styles/patterns/_menu.scss
new file mode 100644
index 0000000..c0b3833
--- /dev/null
+++ b/styles/patterns/_menu.scss
@@ -0,0 +1,33 @@
+.menu {
+ display: flex;
+ flex-direction: column;
+
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+
+ /* Demo */
+ width: 8rem;
+}
+
+.menu__item {
+ /* Center the content horizontally */
+ align-items: center;
+ display: flex;
+
+ height: 2rem;
+ padding: 0.25rem;
+}
+.menu__item:hover {
+ background: #e5e7eb;
+}
+
+.menu__hotkey {
+ /* Push the hot key to the right */
+ margin-left: auto;
+}
+
+.menu__divider {
+ border-bottom: 1px solid #d1d5db;
+ height: 1px;
+}