From c1ab1042e21b76643a1ced18c5a242b8cb6e3f8d Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Sun, 4 Apr 2021 10:59:51 -0700
Subject: [PATCH 1/2] Add offcanvas-top modifier

---
 scss/_offcanvas.scss                          |  9 +++++++++
 site/content/docs/5.0/components/offcanvas.md | 17 ++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 1eeb989666d1..2e1025c070d2 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -52,6 +52,15 @@
   transform: translateX(100%);
 }
 
+.offcanvas-top {
+  right: 0;
+  left: 0;
+  height: $offcanvas-vertical-height;
+  max-height: 100%;
+  border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
+  transform: translateY(-100%);
+}
+
 .offcanvas-bottom {
   right: 0;
   left: 0;
diff --git a/site/content/docs/5.0/components/offcanvas.md b/site/content/docs/5.0/components/offcanvas.md
index a2b5ed3fa577..768e811bce58 100644
--- a/site/content/docs/5.0/components/offcanvas.md
+++ b/site/content/docs/5.0/components/offcanvas.md
@@ -85,9 +85,24 @@ There's no default placement for offcanvas components, so you must add one of th
 
 - `.offcanvas-start` places offcanvas on the left of the viewport (shown above)
 - `.offcanvas-end` places offcanvas on the right of the viewport
+- `.offcanvas-top` places offcanvas on the top of the viewport
 - `.offcanvas-bottom` places offcanvas on the bottom of the viewport
 
-Try the right and bottom examples out below.
+Try the top, right, and bottom examples out below.
+
+{{< example >}}
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
+
+<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
+  <div class="offcanvas-header">
+    <h5 id="offcanvasTopLabel">Offcanvas top</h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    ...
+  </div>
+</div>
+{{< /example >}}
 
 {{< example >}}
 <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

From 9013eb4add239aefa478c0a6177c2c7195ed1e37 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Sun, 4 Apr 2021 11:04:32 -0700
Subject: [PATCH 2/2] Update _offcanvas.scss

---
 scss/_offcanvas.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 2e1025c070d2..4d2186adbce4 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -53,6 +53,7 @@
 }
 
 .offcanvas-top {
+  top: 0;
   right: 0;
   left: 0;
   height: $offcanvas-vertical-height;