ASP.NET Core 5.0 - Bootstrap v5 Offcanvas Demo

Ken Haggerty
Created 09/01/2021 - Updated 09/02/2021 01:56

This article will demonstrate the implementation of a Bootstrap v5 Offcanvas in a partial view. I will assume you have downloaded the FREE ASP.NET Core 3.1 - FIDO Utilities Project or created a new ASP.NET Core 5.0 Razor Pages project and migrated to Bootstrap v5. See Tutorial: Get started with Razor Pages in ASP.NET Core and ASP.NET Core 5.0 - Migrate To Bootstrap v5.

FIDO Utilities Project and Article Series

The ASP.NET Core 3.1 - FIDO Utilities Project (FUP) is a collection of utilities I use in the ASP.NET Core 5.0 - Users Without Passwords Project (UWPP). I have upgraded the FUP with Bootstrap v5 and Bootstrap Native v4. FUP version 2.1 features SingleUser Authentication, Admin Page with Send Email Tests, ExceptionEmailerMiddleware, Bootstrap v5 Detection JavaScript, Copy and Paste Demo, Offcanvas Partial Demo, and Path QR Code Demo. The SMTP Settings Tester is updated and now located in the authorized Pages > Admin folder. The EmailSender and AES Cipher Demo are also updated. Registered users can download the source code for free on KenHaggerty. Com at Manage > Assets. The UWPP is published at Fido. KenHaggerty. Com.

Bootstrap v5 features the new Offcanvas component. See Bootstrap v5.0 - Components Offcanvas. If you implement Offcanvas in a partial view, you can add the partial view to multiple pages.

Pages > Shared > _OffcanvasDemoPartial.cshtml:
<button class="btn btn-primary float-end" type="button" data-bs-toggle="offcanvas" data-bs-target="#OffcanvasDemoId" aria-controls="OffcanvasDemoId">
    Offcanvas Demo
</button>
<div class="offcanvas offcanvas-end" data-bs-scroll="false" data-bs-backdrop="true" tabindex="-1" id="OffcanvasDemoId" aria-labelledby="OffcanvasDemoLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="OffcanvasDemoLabel">Offcanvas Demo</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
        <div class="offcanvas-body">
        <div>
            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
        </div>
        <div class="dropdown mt-3">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
                Dropdown button
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>
    </div>
</div>
Insert the partial view at the top of a page:
<partial name="_OffcanvasDemoPartial" />
Offcanvas Toggle
Offcanvas Toggle Mobile

If the partial view is implemented in _Layout.cshtml, it is applied to all pages. The FUP implements the partial view in _Layout.cshtml but uses a list of paths from an OffcanvasDemoExcludedPaths array property in appsettings. json to exclude some pages.

appsettings.json:
"OffcanvasDemoExcludedPaths": [
  "/",
  "/account/login",
  "/account/logout",
  "/privacy"
]

First the _Layout.cshtml injects the Configuration extension.

Pages > Shared > _Layout.cshtml:
@@inject Microsoft.Extensions.Configuration.IConfiguration _config

Then gets the list of excluded paths from _config.

<div class="container">
    <main role="main" class="pb-3">
        @@{
            var offcanvasDemoExcludedPaths = _config.GetSection("OffcanvasDemoExcludedPaths").GetChildren().ToArray()
                .Select(c => c.Value).ToList();
            if (offcanvasDemoExcludedPaths.Count > 0)
                if (!offcanvasDemoExcludedPaths.Contains(Context.Request.Path.Value.ToLower()))
                {
                    <partial name="_OffcanvasDemoPartial" />
                }
        }
        @@RenderBody()
    </main>
    <partial name="_CookieConsentPartial" />
</div>

The data-bs-scroll defaults to false and the data-bs-backdrop defaults to true. Bootstrap v5.1.0 introduces a new offcanvas-backdrop class. The bootstrap-native.js v4.0.4 does not support the offcanvas-backdrop class. I submitted the issue to GitHub thednp/ bootstrap.native - Bootstrap v5 backdrop over offcanvas #422. The bootstrap-native.js v4.0.5 resolves the issue.

Offcanvas Over Backdrop
Offcanvas Over Backdrop Mobile

My _CookieConsentPartial.cshtml uses the #cookieConsent class in site.css. I added a z-index: 1050 property to display the cookie consent over the offcanvas.

Cookie Consent Over Offcanvas
Cookie Consent Over Offcanvas Mobile

The offcanvas automatically scrolls any overflow. The data-bs-scroll attribute enables a scroll on scrollable pages. When you set the data-bs-scroll to true, you get two scroll controls on scrollable pages with scrollable offcanvas. Set the data-bs-backdrop to false to view page content.

Offcanvas Scroll No Backdrop
Offcanvas Scroll No Backdrop Mobile

Article Tags:

Bootstrap BootstrapNative

Comment Count = 0

Please log in to comment.

Login Register
Logged in users receive web notifications.
Web Notifications