diff --git a/source/_imports/components/c-nav.css b/source/_imports/components/c-nav.css
new file mode 100644
index 000000000..6e32fae22
--- /dev/null
+++ b/source/_imports/components/c-nav.css
@@ -0,0 +1,138 @@
+/*
+Nav
+
+Navigation links that flows inline on narrow screens.
+
+To enforce appropriate semantic HTML, a `<nav>` is required.
+
+For list-like navigation, use `<ul>` or `<ol>` (with children `<li>`). Inside this kind of nav, markup whitespace is __not__ rendered.
+
+To support a navigation not as a list and with direct `<a>` children, add class `c-nav--no-list`. Inside this kind of nav, markup whitespace __is__ rendered.﹡
+
+﹡ To remove whitespace with CSS would break or complicate font-size cascade.
+- c-nav--boxed - Surrounded by a box
+
+Markup: c-nav.html
+
+Styleguide Components.Nav
+*/
+@import url("_imports/tools/media-queries.css");
+
+
+
+
+
+/* Modifiers */
+
+
+
+/* Modifiers: Boxed */
+
+nav.c-nav--boxed {
+  --small-indent: calc(var(--global-space--list-indent) / 2);
+  --large-indent: var(--global-space--list-indent);
+
+  width: fit-content;
+  padding-block: var(--small-indent);
+
+  border: var(--global-border--normal);
+
+  line-height: 2em;
+}
+
+/* any list */
+nav.c-nav--boxed :is(ul,ol) {
+  margin: 0;
+}
+
+/* Modifiers: Boxed: Padding */
+
+/* unordered list */
+nav.c-nav--boxed ul {
+  list-style-type: none; /* to remove bullets (must then reduce padding left) */
+  padding-left: var(--small-indent); /* overwrite `html-elements.css` */
+  padding-right: var(--large-indent);
+}
+
+/* ordered list (wide) */
+@media (--narrow-and-above) {
+  nav.c-nav--boxed ol {
+    /* We retain bullets, which (wide screen) need large padding (so keep it) */
+    /* padding-left: var(--large-indent); *//* comes from `html-elements.css` */
+    padding-right: var(--large-indent);
+  }
+}
+/* ordered list (narrow) */
+@media (--narrow-and-below) {
+  nav.c-nav--boxed ol {
+    /* We retain bullets, which (narrow screen) don't need large padding left */
+    padding-left: var(--small-indent); /* overwrite `html-elements.css` */
+    padding-right: var(--large-indent);
+  }
+}
+
+/* no list */
+nav.c-nav--boxed.c-nav--no-list {
+  /* Has no bullets, thus smaller padding left */
+  padding-left: var(--small-indent);
+  padding-right: var(--large-indent);
+}
+
+
+
+/* Modifiers: No List */
+
+/* This is not a true modifier. It is required to support certain markup. */
+/* SEE: stylesheet docblock, "no list" comments, `...--no-list` selectors */
+
+
+
+
+
+/* Content */
+
+
+
+nav.c-nav {
+  --space-between-inline-items: 0.5em;
+}
+
+/* no list */
+nav.c-nav--no-list > a {
+  display: inline-block;
+
+  /* To space content via margin (must then be re-aligned with container) */
+  margin-left: var(--space-between-inline-items);
+  /* To re-align content to container (after they were spaced via margin) */
+  transform: translateX(calc(-1 * var(--space-between-inline-items)));
+}
+
+
+
+/* Content: Narrow Screen */
+
+@media (--narrow-and-below) {
+
+  /* any list */
+  nav.c-nav :is(ul,ol) {
+    display: flex;
+    flex-wrap: wrap;
+
+    /* To prevent overlap of any lists' decorators (when items are inline) */
+    list-style-position: inside;
+  }
+  nav.c-nav :is(ul,ol):not(.c-nav--boxed :is(ul,ol)) {
+    /* To remove padding because list decorators are `...position: inside` */
+    padding-left: unset;
+  }
+  nav.c-nav :is(ul,ol) li {
+    /* To space content via margin (must then be re-aligned with container) */
+    margin-left: var(--space-between-inline-items);
+    /* To re-align content to container (after they were spaced via margin) */
+    transform: translateX(calc(-1 * var(--space-between-inline-items)));
+  }
+
+  /* unordered list */
+  nav.c-nav ul { list-style-type: none; }
+
+}
diff --git a/source/_imports/components/c-nav.html b/source/_imports/components/c-nav.html
new file mode 100644
index 000000000..7d3aecdca
--- /dev/null
+++ b/source/_imports/components/c-nav.html
@@ -0,0 +1,45 @@
+{# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
+
+<h3>Unordered List</h3>
+<nav class="c-nav {{modifier_class}} {{ html }}">
+  <ul>
+    <li><a href="#alabama">Alabama</a></li>
+    <li><a href="#alaska">Alaska</a></li>
+    <li><a href="#arizona">Arizona</a></li>
+    <li><a href="#arkansas">Arkansas</a></li>
+    <li><a href="#california">California</a></li>
+    <li><a href="#colorado">Colorado</a></li>
+    <li><a href="#connecticut">Connecticut</a></li>
+    <li><a href="#deleware">Delware</a></li>
+    <li><a href="#florida">Florida</a></li>
+  </ul>
+</nav>
+
+<h3>Ordered List</h3>
+<nav class="c-nav {{modifier_class}} {{ html }}">
+  <ol>
+    <li><a href="#alabama">Alabama</a></li>
+    <li><a href="#alaska">Alaska</a></li>
+    <li><a href="#arizona">Arizona</a></li>
+    <li><a href="#arkansas">Arkansas</a></li>
+    <li><a href="#california">California</a></li>
+    <li><a href="#colorado">Colorado</a></li>
+    <li><a href="#connecticut">Connecticut</a></li>
+    <li><a href="#deleware">Delware</a></li>
+    <li><a href="#florida">Florida</a></li>
+  </ol>
+</nav>
+
+<h3>No List</h3>
+<p>(requires <code>c-nav--no-list</code>)</p>
+<nav class="c-nav c-nav--no-list {{modifier_class}} {{ html }}">
+  <a href="#alabama">Alabama</a>
+  <a href="#alaska">Alaska</a>
+  <a href="#arizona">Arizona</a>
+  <a href="#arkansas">Arkansas</a>
+  <a href="#california">California</a>
+  <a href="#colorado">Colorado</a>
+  <a href="#connecticut">Connecticut</a>
+  <a href="#deleware">Delware</a>
+  <a href="#florida">Florida</a>
+</nav>