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();
    }
}

SizesNew

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();
    }
}

Best Practices

Secondary Content

Offcanvas panels suit secondary navigation and supporting tasks that should not permanently reduce the main content area. Choose placement according to reading direction and content type, and verify that the panel does not cover context users still need on smaller screens.

Focus and Stacking

Give the panel a clear title and an obvious close action, then restore focus to the triggering control after it closes. Avoid stacking offcanvas panels or opening another blocking overlay from one unless the interaction provides a clear and predictable escape path.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<Offcanvas />