Blazor Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more with a offcanvas component.
NOTE
Similar to modals, only one offcanvas can be shown at a time.

Examples#

Dynamic component as offcanvas#

Render different components dynamically within the offcanvas without iterating through possible types or using conditional logic.
If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value.
razor 
<Offcanvas @ref="offcanvas" />

<Button Color="ButtonColor.Primary" @onclick="ShowEmployeeComponent">Show Employee Component</Button>

@code {
    private Offcanvas offcanvas = default!;

    private async Task ShowEmployeeComponent()
    {
        var parameters = new Dictionary<string, object>();
        parameters.Add("EmployeeId", 321);
        await offcanvas.ShowAsync<EmployeeDemoComponent1>(title: "Employee Details", parameters: parameters);
    }
}
EmployeeDemoComponent1.razor
razor 
<div class="row">
    <div class="col-5 col-md-4 text-end">Employee Id :</div>
    <div class="col-7 col-md-8">@EmployeeId</div>
</div>
<div class="row">
    <div class="col-5 col-md-4 text-end">First Name :</div>
    <div class="col-7 col-md-8">@employee.FirstName</div>
</div>
<div class="row">
    <div class="col-5 col-md-4 text-end">Last Name :</div>
    <div class="col-7 col-md-8">@employee.LastName</div>
</div>

@code {
    private Employee employee = default!;

    [Parameter] public int EmployeeId { get; set; }

    protected override void OnInitialized()
    {
        // get employee with {EmployeeId} from DB

        employee = new Employee { FirstName = "Vikram", LastName = "Reddy" };

        base.OnInitialized();
    }
}

Pass event callbacks to a dynamic component#

Event callbacks (EventCallback) can be passed in its parameter dictionary.
In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. The parent component passes the callback method, ShowDTMessage in the parameter dictionary:
  • The string key is the callback method's name, OnClickCallback.
  • The object value is created by EventCallbackFactory.Create for the parent callback method, ShowDTMessage.
razor 
<Offcanvas @ref="offcanvas" />

<Button Color="ButtonColor.Primary" @onclick="ShowEmployeeComponent">Show Employee Component</Button>

<div class="mt-3 bg-success text-white bg-opacity-75">
    @message
</div>

@code {
    private Offcanvas offcanvas = default!;
    private string? message;

    private async Task ShowEmployeeComponent()
    {
        var parameters = new Dictionary<string, object>();
        parameters.Add("EmployeeId", 322);
        parameters.Add("OnclickCallback", EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage));
        await offcanvas.ShowAsync<EmployeeDemoComponent2>(title: "Employee Details", parameters: parameters);
    }

    private void ShowDTMessage(MouseEventArgs e) => message = $"The current date time is: {DateTime.Now}.";
}
EmployeeDemoComponent2.razor
razor 
<div class="row">
    <div class="col-5 col-md-4 text-end">Employee Id :</div>
    <div class="col-7 col-md-8">@EmployeeId</div>
</div>
<div class="row">
    <div class="col-5 col-md-4 text-end">First Name :</div>
    <div class="col-7 col-md-8">@employee.FirstName</div>
</div>
<div class="row">
    <div class="col-5 col-md-4 text-end">Last Name :</div>
    <div class="col-7 col-md-8">@employee.LastName</div>
</div>

<Button class="mt-3" Color="ButtonColor.Success" Type="ButtonType.Button" @onclick="OnClickCallback">
    Trigger a Parent component method
</Button>

@code {
    private Employee employee = default!;

    [Parameter] public int EmployeeId { get; set; }

    [Parameter] public EventCallback<MouseEventArgs> OnClickCallback { get; set; }

    protected override void OnInitialized()
    {
        // get employee with {EmployeeId} from DB

        employee = new Employee { FirstName = "Sagar", LastName = "Reddy" };

        base.OnInitialized();
    }
}

Placement#

Try the top, bottom, and left examples out below.
INFO
Default placement for the offcanvas component is right.

Static backdrop#

When UseStaticBackdrop is set to true, the offcanvas will not close when clicking outside of it.

Sizes#

Set the size of the Offcanvas with the Size parameter. The default value is OffcanvasSize.Regular.

Events#

Blazor Bootstrap offcanvas component exposes a few events for hooking into offcanvas functionality.
Blazor Bootstrap Blazor Bootstrap
Links
Guides
Community