Added in v1.3

Blazorise Offcanvas component

Blazorise Offcanvas component allows to build hidden sidebars into your project for navigation, shopping carts.

Offcanvas is a sidebar component that can be toggled to appear from the start, end, top, or bottom edge of the viewport.

<Offcanvas> the main container.
- <OffcanvasHeader>, a main offcanvas header.
- <OffcanvasBody>, a main content of the offcanvas.
- <OffcanvasFooter>, a main offcanvas footer.

Examples

Start Placement

The Offcanvas with the start placement appears from the beginning of the screen.

<Offcanvas @ref="offcanvasRef" ShowBackdrop Placement="Placement.Start">
    <OffcanvasHeader>
        Offcanvas Start
        <CloseButton Clicked="@HideOffcanvas" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Offcanvas Content
    </OffcanvasBody>
</Offcanvas>

<Button Color="Color.Primary" Clicked="@ShowOffcanvas">Show Offcanvas Start</Button>

@code {
    private Offcanvas offcanvasRef;

    private Task ShowOffcanvas()
    {
        return offcanvasRef.Show();
    }

    private Task HideOffcanvas()
    {
        return offcanvasRef.Hide();
    }
}

Backdrop styling

Use Styles to customize the backdrop element when ShowBackdrop is enabled.

For advanced styling of the backdrop and inner elements, see the Styling guide.

<Offcanvas @ref="offcanvasRef" ShowBackdrop Placement="Placement.End" Styles='@(new OffcanvasStyles { Backdrop = "background-color: rgba(11, 114, 133, 0.4);" })'>
    <OffcanvasHeader>
        Styled backdrop
        <CloseButton Clicked="@HideOffcanvas" />
    </OffcanvasHeader>
    <OffcanvasBody>
        This example customizes the backdrop color using <Code>OffcanvasStyles</Code>.
    </OffcanvasBody>
</Offcanvas>

<Button Color="Color.Primary" Clicked="@ShowOffcanvas">Show Styled Backdrop</Button>

@code {
    private Offcanvas offcanvasRef;

    private Task ShowOffcanvas()
    {
        return offcanvasRef.Show();
    }

    private Task HideOffcanvas()
    {
        return offcanvasRef.Hide();
    }
}

Top Placement

The Offcanvas with the top placement appears from the top of the screen.

<Offcanvas @ref="offcanvasRef" ShowBackdrop Placement="Placement.Top">
    <OffcanvasHeader>
        Offcanvas Top
        <CloseButton Clicked="@HideOffcanvas" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Offcanvas Content
    </OffcanvasBody>
</Offcanvas>

<Button Color="Color.Primary" Clicked="@ShowOffcanvas">Show Offcanvas Top</Button>

@code {
    private Offcanvas offcanvasRef;

    private Task ShowOffcanvas()
    {
        return offcanvasRef.Show();
    }

    private Task HideOffcanvas()
    {
        return offcanvasRef.Hide();
    }
}

Bottom Placement

The Offcanvas with the bottom placement appears from the bottom of the screen.

<Offcanvas @ref="offcanvasRef" ShowBackdrop Placement="Placement.Bottom">
    <OffcanvasHeader>
        Offcanvas Bottom
        <CloseButton Clicked="@HideOffcanvas" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Offcanvas Content
    </OffcanvasBody>
</Offcanvas>

<Button Color="Color.Primary" Clicked="@ShowOffcanvas">Show Offcanvas Bottom</Button>

@code {
    private Offcanvas offcanvasRef;

    private Task ShowOffcanvas()
    {
        return offcanvasRef.Show();
    }

    private Task HideOffcanvas()
    {
        return offcanvasRef.Hide();
    }
}

End Placement

The Offcanvas with the end placement appears from the end of the screen.

<Offcanvas @ref="offcanvasRef" ShowBackdrop Placement="Placement.End">
    <OffcanvasHeader>
        Offcanvas End
        <CloseButton Clicked="@HideOffcanvas" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Offcanvas Content
    </OffcanvasBody>
</Offcanvas>

<Button Color="Color.Primary" Clicked="@ShowOffcanvas">Show Offcanvas End</Button>

@code {
    private Offcanvas offcanvasRef;

    private Task ShowOffcanvas()
    {
        return offcanvasRef.Show();
    }

    private Task HideOffcanvas()
    {
        return offcanvasRef.Hide();
    }
}

Sizes

Use Size to apply predefined offcanvas dimensions on the active axis for the current placement.

Treat Placement and Size as instance configuration. When switching between horizontal and vertical placements, use separate offcanvas instances.

<Offcanvas @ref="offcanvasEndSmallRef" ShowBackdrop Placement="Placement.End" Size="OffcanvasSize.Small">
    <OffcanvasHeader>
        Small End Offcanvas
        <CloseButton Clicked="@(() => HideOffcanvas( offcanvasEndSmallRef ))" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Small size applied to an end-positioned offcanvas.
    </OffcanvasBody>
</Offcanvas>

<Offcanvas @ref="offcanvasEndLargeRef" ShowBackdrop Placement="Placement.End" Size="OffcanvasSize.Large">
    <OffcanvasHeader>
        Large End Offcanvas
        <CloseButton Clicked="@(() => HideOffcanvas( offcanvasEndLargeRef ))" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Large size applied to an end-positioned offcanvas.
    </OffcanvasBody>
</Offcanvas>

<Offcanvas @ref="offcanvasEndExtraLargeRef" ShowBackdrop Placement="Placement.End" Size="OffcanvasSize.ExtraLarge">
    <OffcanvasHeader>
        Extra Large End Offcanvas
        <CloseButton Clicked="@(() => HideOffcanvas( offcanvasEndExtraLargeRef ))" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Extra large size applied to an end-positioned offcanvas.
    </OffcanvasBody>
</Offcanvas>

<Offcanvas @ref="offcanvasEndFullscreenRef" ShowBackdrop Placement="Placement.End" Size="OffcanvasSize.Fullscreen">
    <OffcanvasHeader>
        Fullscreen End Offcanvas
        <CloseButton Clicked="@(() => HideOffcanvas( offcanvasEndFullscreenRef ))" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Fullscreen size applied to an end-positioned offcanvas.
    </OffcanvasBody>
</Offcanvas>

<Offcanvas @ref="offcanvasTopSmallRef" ShowBackdrop Placement="Placement.Top" Size="OffcanvasSize.Small">
    <OffcanvasHeader>
        Small Top Offcanvas
        <CloseButton Clicked="@(() => HideOffcanvas( offcanvasTopSmallRef ))" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Small size applied to a top-positioned offcanvas.
    </OffcanvasBody>
</Offcanvas>

<Offcanvas @ref="offcanvasTopLargeRef" ShowBackdrop Placement="Placement.Top" Size="OffcanvasSize.Large">
    <OffcanvasHeader>
        Large Top Offcanvas
        <CloseButton Clicked="@(() => HideOffcanvas( offcanvasTopLargeRef ))" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Large size applied to a top-positioned offcanvas.
    </OffcanvasBody>
</Offcanvas>

<Offcanvas @ref="offcanvasTopExtraLargeRef" ShowBackdrop Placement="Placement.Top" Size="OffcanvasSize.ExtraLarge">
    <OffcanvasHeader>
        Extra Large Top Offcanvas
        <CloseButton Clicked="@(() => HideOffcanvas( offcanvasTopExtraLargeRef ))" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Extra large size applied to a top-positioned offcanvas.
    </OffcanvasBody>
</Offcanvas>

<Offcanvas @ref="offcanvasTopFullscreenRef" ShowBackdrop Placement="Placement.Top" Size="OffcanvasSize.Fullscreen">
    <OffcanvasHeader>
        Fullscreen Top Offcanvas
        <CloseButton Clicked="@(() => HideOffcanvas( offcanvasTopFullscreenRef ))" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Fullscreen size applied to a top-positioned offcanvas.
    </OffcanvasBody>
</Offcanvas>

<Div Margin="Margin.Is3.FromBottom">
    <Button Color="Color.Primary" Margin="Margin.Is2.FromEnd" Clicked="@(() => ShowOffcanvas( Placement.End, OffcanvasSize.Small ))">Small End</Button>
    <Button Color="Color.Primary" Margin="Margin.Is2.FromEnd" Clicked="@(() => ShowOffcanvas( Placement.End, OffcanvasSize.Large ))">Large End</Button>
    <Button Color="Color.Primary" Margin="Margin.Is2.FromEnd" Clicked="@(() => ShowOffcanvas( Placement.End, OffcanvasSize.ExtraLarge ))">Extra Large End</Button>
    <Button Color="Color.Primary" Margin="Margin.Is2.FromEnd" Clicked="@(() => ShowOffcanvas( Placement.End, OffcanvasSize.Fullscreen ))">Fullscreen End</Button>
</Div>
<Div>
    <Button Color="Color.Secondary" Margin="Margin.Is2.FromEnd" Clicked="@(() => ShowOffcanvas( Placement.Top, OffcanvasSize.Small ))">Small Top</Button>
    <Button Color="Color.Secondary" Margin="Margin.Is2.FromEnd" Clicked="@(() => ShowOffcanvas( Placement.Top, OffcanvasSize.Large ))">Large Top</Button>
    <Button Color="Color.Secondary" Margin="Margin.Is2.FromEnd" Clicked="@(() => ShowOffcanvas( Placement.Top, OffcanvasSize.ExtraLarge ))">Extra Large Top</Button>
    <Button Color="Color.Secondary" Clicked="@(() => ShowOffcanvas( Placement.Top, OffcanvasSize.Fullscreen ))">Fullscreen Top</Button>
</Div>

@code {
    private Offcanvas offcanvasEndSmallRef;
    private Offcanvas offcanvasEndLargeRef;
    private Offcanvas offcanvasEndExtraLargeRef;
    private Offcanvas offcanvasEndFullscreenRef;
    private Offcanvas offcanvasTopSmallRef;
    private Offcanvas offcanvasTopLargeRef;
    private Offcanvas offcanvasTopExtraLargeRef;
    private Offcanvas offcanvasTopFullscreenRef;

    private Task ShowOffcanvas( Placement nextPlacement, OffcanvasSize nextSize )
    {
        return (nextPlacement, nextSize) switch
        {
            (Placement.End, OffcanvasSize.Small ) => offcanvasEndSmallRef.Show(),
            (Placement.End, OffcanvasSize.Large ) => offcanvasEndLargeRef.Show(),
            (Placement.End, OffcanvasSize.ExtraLarge ) => offcanvasEndExtraLargeRef.Show(),
            (Placement.End, OffcanvasSize.Fullscreen ) => offcanvasEndFullscreenRef.Show(),
            (Placement.Top, OffcanvasSize.Small ) => offcanvasTopSmallRef.Show(),
            (Placement.Top, OffcanvasSize.Large ) => offcanvasTopLargeRef.Show(),
            (Placement.Top, OffcanvasSize.ExtraLarge ) => offcanvasTopExtraLargeRef.Show(),
            (Placement.Top, OffcanvasSize.Fullscreen ) => offcanvasTopFullscreenRef.Show(),
            _ => Task.CompletedTask,
        };
    }

    private Task HideOffcanvas( Offcanvas offcanvas )
    {
        return offcanvas.Hide();
    }
}

Closing

If you want to prevent modal from closing you can use Closing event.

<Offcanvas @ref="offcanvasRef" ShowBackdrop Closing="@OnOffcanvasClosing">
    <OffcanvasHeader>
        Offcanvas Start
        <CloseButton Clicked="@HideOffcanvas" />
    </OffcanvasHeader>
    <OffcanvasBody>
        <Div Padding="Padding.Is3">
             Offcanvas Content
        </Div>
        <Div Padding="Padding.Is3">
             <Button Color="Color.Secondary" Clicked="@HideOffcanvas">This will close the offcanvas</Button>
             <Button Color="Color.Primary" Clicked="@TryHideOffcanvas">This will not</Button>
        </Div>
    </OffcanvasBody>
</Offcanvas>

<Button Color="Color.Primary" Clicked="@ShowOffcanvas">Show Offcanvas Start</Button>

@code {
    private Offcanvas offcanvasRef;

    private bool cancelClose;

    private Task ShowOffcanvas()
    {
        return offcanvasRef.Show();
    }

    private Task HideOffcanvas()
    {
        cancelClose = false;

        return offcanvasRef.Hide();
    }

    private Task TryHideOffcanvas()
    {
        cancelClose = true;

        return offcanvasRef.Hide();
    }

    private Task OnOffcanvasClosing( OffcanvasClosingEventArgs e )
    {
        // just set Cancel to prevent offcanvas from closing
        e.Cancel = cancelClose
            || e.CloseReason != CloseReason.UserClosing;

        return Task.CompletedTask;
    }
}

Footer

To show a footer in the Offcanvas just add an OffcanvasFooter component.

<Offcanvas @ref="offcanvasRef" ShowBackdrop>
    <OffcanvasHeader>
        Offcanvas Start
        <CloseButton Clicked="@HideOffcanvas" />
    </OffcanvasHeader>
    <OffcanvasBody>
        Offcanvas Content
    </OffcanvasBody>
    <OffcanvasFooter>
        <Button Color="Color.Primary" Clicked="@HideOffcanvas">Close Offcanvas</Button>
    </OffcanvasFooter>
</Offcanvas>

<Button Color="Color.Primary" Clicked="@ShowOffcanvas">Show Offcanvas</Button>

@code {
    private Offcanvas offcanvasRef;

    private Task ShowOffcanvas()
    {
        return offcanvasRef.Show();
    }

    private Task HideOffcanvas()
    {
        return offcanvasRef.Hide();
    }
}

API

Parameters

Offcanvas

Parameter	Description	Type	Default
`Animated`	Specifies whether the Offcanvas should have an animated transition.	`bool`	`true`
`AnimationDuration`	The duration of the animation in milliseconds.	`int`	`300`
`ChildContent`	The content to be rendered inside the Offcanvas.	`RenderFragment`	`null`
`Placement`	Specifies the position of the Offcanvas. Possible values:`Top`, `Bottom`, `Start`, `End`	`Placement`	`Placement.Start`
`ShowBackdrop`	Specifies whether to render the backdrop for this Offcanvas.	`bool`	`true`
`Size`	Changes the size of the offcanvas. Possible values:`Default`, `Small`, `Large`, `ExtraLarge`, `Fullscreen`	`OffcanvasSize`	`OffcanvasSize.Default`
`Visible`	Specifies the visibility state of the Offcanvas.	`bool`	`false`

OffcanvasHeader

Parameter	Description	Type	Default
`ChildContent`	Specifies the content to be rendered inside this OffcanvasHeader .	`RenderFragment`	`null`

OffcanvasBody

Parameter	Description	Type	Default
`ChildContent`	Specifies the content to be rendered inside this OffcanvasBody .	`RenderFragment`	`null`

OffcanvasFooter

Parameter	Description	Type	Default
`ChildContent`	Specifies the content to be rendered inside this OffcanvasFooter.	`RenderFragment`	`null`

Events

Offcanvas

Event	Description	Type
`Closed`	Event callback for when the Offcanvas has been closed.	`EventCallback`
`Closing`	Callback for handling the closing of the Offcanvas.	`Func<OffcanvasClosingEventArgs, Task>`
`Opened`	Event callback for when the Offcanvas has been opened.	`EventCallback`
`Opening`	Callback for handling the opening of the Offcanvas.	`Func<OffcanvasOpeningEventArgs, Task>`
`VisibleChanged`	Event callback for when the visibility state of the Offcanvas changes.	`EventCallback<bool>`

Methods

Offcanvas

Method	Description	Return	Parameters
`Close`	Triggers the closable component to be closed.	`Task`	`CloseReason closeReason`
`Hide`	Fires the offcanvas dialog closure process.	`Task`
`IsSafeToClose`	Finds if the closable component is ready to be closed.	`Task<bool>`	`string elementId, CloseReason closeReason, bool isChildClicked`
`Show`	Starts the offcanvas opening process.	`Task`

Blazorise Offcanvas component

Examples

Start Placement

Backdrop styling

Top Placement

Bottom Placement

End Placement

Sizes

Closing

Footer

API

Parameters

Offcanvas

OffcanvasHeader

OffcanvasBody

OffcanvasFooter

Events

Offcanvas

Methods

Offcanvas

On this page