src/index.html

@@ -253,6 +253,79 @@
     </div>
 
     <div class="container">
+      <h2>Navigation pills</h2>
+      <div class="row">
+        <div class="col-12">
+          <h3>Horizontal</h3>
+          <p>
+            Navigation pills have a horizontal layout by default.
+          </p>
+          <div aria-orientation="horizontal" class="mb-4 nav nav-pills" role="tablist">
+            <a class="nav-pills-item active" href="/">
+              <i class="i-home"></i>
+              Home
+            </a>
+            <a class="nav-pills-item " href="/settings/profile">
+              <i class="i-user"></i>
+              Profile
+            </a>
+            <div class="nav-pills-divider"></div>
+            <a class="nav-pills-item " href="/active-sessions/">
+              <i class="i-activity"></i>
+              Sessions
+            </a>
+            <a class="nav-pills-item " href="/applications">
+              <i class="i-link"></i>
+              Authenticated Apps
+            </a>
+            <div class="nav-pills-divider"></div>
+            <a class="nav-pills-item " href="/change">
+              <i class="i-shield"></i>
+              Password
+            </a>
+            <a class="nav-pills-item " href="/delete-my-account">
+              <i class="i-trash"></i>
+              Delete Account
+            </a>
+          </div>
+        </div>
+      </div>
+      <h3>Vertical</h3>
+      <p>
+        Navigation pills have a vertical layout with the addition of the <code>flex-column</code> class.
+      </p>
+      <div class="row">
+        <aside class="col-4">
+          <div aria-orientation="vertical" class="flex-column mb-4 nav nav-pills" role="tablist">
+            <a class="nav-pills-item active" href="/">
+              <i class="i-home"></i>
+              Home
+            </a>
+            <a class="nav-pills-item " href="/settings/profile">
+              <i class="i-user"></i>
+              Profile
+            </a>
+            <div class="nav-pills-divider"></div>
+            <a class="nav-pills-item " href="/active-sessions/">
+              <i class="i-activity"></i>
+              Sessions
+            </a>
+            <a class="nav-pills-item " href="/applications">
+              <i class="i-link"></i>
+              Authenticated Apps
+            </a>
+            <div class="nav-pills-divider"></div>
+            <a class="nav-pills-item " href="/change">
+              <i class="i-shield"></i>
+              Password
+            </a>
+            <a class="nav-pills-item " href="/delete-my-account">
+              <i class="i-trash"></i>
+              Delete Account
+            </a>
+          </div>
+        </aside>
+      </div>
       <h2>Notifications</h2>
       <div class="notifications">
         <button class="btn mb-3">Mark all as read</button>

src/styles/_mixins.sass

@@ -79,6 +79,7 @@
     display: block
     content: ' '
 
+// TODO: check if mixins box-shadows are still needed with CSS custom properties box-shadows
 =box-shadow-lg-strong
   box-shadow: var(--box-shadow-card), 0 var(--spacer-1) calc(var(--spacer) * 2) rgba(0, 0, 0, .15)
 

src/styles/_navigation.sass

@@ -572,6 +572,52 @@ body
   span, i, svg
     pointer-events: none
 
+/* Nav pills */
+.nav-pills
+  @extend .box
+
+  +list-unstyled
+  overflow-x: auto
+  padding: .2rem
+
+.nav-pills-divider,
+.nav-pills-item
+  margin: .2rem
+
+.nav-pills-item
+  border-radius: var(--border-radius)
+  line-height: var(--lh-sm)
+  +padding(3, x)
+  +padding(2, y)
+  transition: background-color var(--transition-speed) var(--transition-timing-fast), color var(--transition-speed) var(--transition-timing-fast)
+  user-select: none
+  white-space: nowrap
+
+  &:hover,
+  &.active
+    background-color: var(--color-accent-bg)
+    color: var(--color-accent)
+    text-decoration: none
+
+  i
+    +margin(1, right)
+    +margin(-1, left)
+
+  &.is-admin
+    background-color: var(--admin-color-bg)
+    color: var(--admin-color-text)
+
+    &:hover
+      background-color: var(--admin-color-bg-hover)
+
+  &.active
+    color: var(--color-accent)
+    +fw-bold
+
+.nav-pills-divider
+  border-bottom: var(--border-width) solid var(--border-color)
+  border-right: var(--border-width) solid var(--border-color)
+
 /* Tabs navigation. */
 .tabs
   +border-radius(lg)