ASP.NET Core 5.0 - Bootstrap v5 Offcanvas Demo

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" />

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.

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.

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.