From 056ad3ad9506a118ca77e3947cffbcef9d46fcd0 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Sun, 4 Apr 2021 11:11:33 -0700
Subject: Add offcanvas-top modifier (#33549)

---
 site/content/docs/5.0/components/offcanvas.md | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

(limited to 'site/content/docs')

diff --git a/site/content/docs/5.0/components/offcanvas.md b/site/content/docs/5.0/components/offcanvas.md
index a2b5ed3fa..768e811bc 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>
-- 
cgit v1.2.3