Skip to content
NAVIGATION · FREE

Drawer

A side panel for navigation or details that stays out of the way.

A side panel for navigation or details. It can float over the page, close with Escape, or stay as a slim icon rail when closed.

Why it helps

  • Temporary or permanent
  • Icon rail option
  • Focus handled for you

Where it fits

  • Main navigation
  • Filters
  • Detail panels
Drawer control in a RayCraft page

Example

<Button OnClick="() => _open = true">Open drawer</Button>

<Drawer @bind-Open="_open" Title="Navigation">
    <Stack Direction="StackDirection.Column" Spacing="1">
        <Button Variant="Variant.Text">Dashboard</Button>
        <Button Variant="Variant.Text">Settings</Button>
    </Stack>
</Drawer>

@code {
    private bool _open;
}

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.

All controls ยท Documentation