Sign in Subscribe
Blazor

How to Hide Bootstrap Offcanvas in Blazor with JavaScript (2026)

Discover how to programmatically hide a Bootstrap Offcanvas component in Blazor using JavaScript, enhancing UI interactions in your .NET 8 app.

kavin sharma

• 2 min read

How to Hide Bootstrap Offcanvas in Blazor with JavaScript (2026)

If you're developing a Blazor application with Bootstrap 5.3 and want to enhance user experience by programmatically hiding the Offcanvas component, you're in the right place. This guide will walk you through integrating JavaScript with Blazor to close the Offcanvas menu when a user selects an item. This is crucial for creating a seamless and interactive UI in your Blazor app.

Key Takeaways

  • Learn to integrate Bootstrap's Offcanvas component in a Blazor app.
  • Use JavaScript interop in Blazor to control UI components.
  • Understand how to invoke JavaScript functions from C# code.
  • Handle events in Blazor to trigger UI updates.
  • Troubleshoot common pitfalls in Blazor-JavaScript interactions.

Prerequisites

  • Basic understanding of Blazor and Bootstrap.
  • Familiarity with JavaScript, especially with Bootstrap.
  • Visual Studio 2022 or later installed.
  • .NET 8 SDK installed.

Step 1: Set Up Your Blazor Project

To start, ensure you have a Blazor project. If not, create one using the command:

dotnet new blazorserver -o BlazorBootstrapApp

Open the generated solution in Visual Studio.

Step 2: Install Bootstrap 5.3

Integrate Bootstrap 5.3 into your Blazor project to utilize the Offcanvas component. Add the following link to your _Host.cshtml file in the <head> section for server-side Blazor:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-..." crossorigin="anonymous">

Also, include the Bootstrap JavaScript bundle:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-..." crossorigin="anonymous"></script>

Step 3: Implement the Offcanvas Component

Incorporate the Offcanvas component in your Blazor page, for instance, in Index.razor:

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasMenu" aria-labelledby="offcanvasMenuLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasMenuLabel">Menu</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <button @onclick="() => ButtonClicked()" class="btn btn-primary">Select Item</button>
  </div>
</div>

Step 4: Add JavaScript Interop

JavaScript interop allows you to call JavaScript from your Blazor components. Create a JavaScript file wwwroot/js/site.js and define the function to close the Offcanvas:

function closeOffcanvas() {
  const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('offcanvasMenu'));
  if (offcanvas) {
    offcanvas.hide();
  }
}

Ensure this script is included in your project by adding it to _Host.cshtml:

<script src="~/js/site.js"></script>

Step 5: Invoke JavaScript from Blazor

In your Blazor component, inject the IJSRuntime service to invoke the JavaScript function:

@inject IJSRuntime JS

@code {
    private async Task ButtonClicked()
    {
        // Call the JavaScript function to hide the offcanvas
        await JS.InvokeVoidAsync("closeOffcanvas");
        // Handle any additional logic after closing
        await OnFilterSelected.InvokeAsync();
    }

    [Parameter]
    public EventCallback OnFilterSelected { get; set; }
}

This code snippet listens for a button click event and triggers the JavaScript function to hide the Offcanvas.

Common Errors/Troubleshooting

  • JavaScript function not found: Ensure your script is correctly linked in the _Host.cshtml file.
  • Offcanvas not closing: Check if the element ID in the JavaScript matches your Offcanvas component ID.
  • Console errors: Use browser developer tools to debug JavaScript errors.

With these steps, you can integrate and control Bootstrap's Offcanvas component in your Blazor application using JavaScript, creating a more dynamic and responsive user experience.

Frequently Asked Questions

Why use JavaScript interop in Blazor?

JavaScript interop is essential for integrating JavaScript libraries into Blazor applications, allowing you to utilize existing JavaScript code and libraries effectively.

How do I debug JavaScript in a Blazor app?

Use browser developer tools like the console to inspect and debug JavaScript execution within your Blazor application.

Can I use other Bootstrap components with Blazor?

Yes, you can integrate various Bootstrap components into Blazor applications to create rich, interactive user interfaces.

Sign up for more like this.

Enter your email
Subscribe