Drawer: Blazor drawer component

Examples

Built-in toggle

ToggleContent renders a real button wired to the panel with aria-expanded; bind Open to follow the state.

The drawer is closed. Press Escape inside the panel to close it.

website/Examples/Layout/DrawerToggleExample.razor Source

From the end

End slides the panel in from the right; open and close it from your own buttons. CloseLabel names the overlay for screen readers.

Notifications

Deploy to production finished

Invoice INV-4821 paid

Mei Chen joined Contoso

New support ticket #318

website/Examples/Layout/DrawerEndExample.razor Source

API

<Drawer>

DaisyBlazor

Parameters

CloseLabel string
= null
Accessible name of the overlay that closes the open panel. Null uses the app-wide Strings.
CloseOnNavigation bool
= false
Closes the drawer when the location changes, e.g. after following a link in the panel.
End bool
= false
When true, the drawer slides in from the right end instead of the left.
Id string
= generated
Unique id for the hidden checkbox used to drive the CSS toggle. Defaults to a generated value.
Open bool
= false
Whether the drawer is currently open (two-way bindable).
ToggleClass string
= "btn drawer-button"
CSS classes of the built-in toggle button (e.g. add lg:hidden for a responsive drawer).
Variant DrawerVariant
= DrawerVariant.Persistent
Persistent (default) docks the open panel beside the content (drawer-open). Temporary slides it over the content with an overlay; daisyUI's overlay panel is position: fixed, so it covers the viewport unless an ancestor sets a transform. Mini and Responsive behave like Persistent.
Class string
= null
Extra CSS classes merged onto the .drawer root; a responsive drawer-open class keeps the side panel active.
Style string
= null
Inline CSS styles applied to the root element.

Name	Type	Default	Description
CloseLabel	string	null	Accessible name of the overlay that closes the open panel. Null uses the app-wide Strings.
CloseOnNavigation	bool	false	Closes the drawer when the location changes, e.g. after following a link in the panel.
End	bool	false	When true, the drawer slides in from the right end instead of the left.
Id	string	generated	Unique id for the hidden checkbox used to drive the CSS toggle. Defaults to a generated value.
Open	bool	false	Whether the drawer is currently open (two-way bindable).
ToggleClass	string	"btn drawer-button"	CSS classes of the built-in toggle button (e.g. add lg:hidden for a responsive drawer).
Variant	DrawerVariant	DrawerVariant.Persistent	Persistent (default) docks the open panel beside the content (drawer-open). Temporary slides it over the content with an overlay; daisyUI's overlay panel is position: fixed, so it covers the viewport unless an ancestor sets a transform. Mini and Responsive behave like Persistent.
Class	string	null	Extra CSS classes merged onto the .drawer root; a responsive drawer-open class keeps the side panel active.
Style	string	null	Inline CSS styles applied to the root element.

Events

OpenChanged EventCallback<bool>
Raised when the open state changes (toggle, overlay click, or Escape).

Name	Type	Description
OpenChanged	EventCallback<bool>	Raised when the open state changes (toggle, overlay click, or Escape).

Content

ChildContent RenderFragment
The main content rendered inside the drawer-content region.
SideContent RenderFragment
The panel content rendered inside the drawer-side region.
ToggleContent RenderFragment
Content of an accessible built-in toggle button rendered at the top of the drawer-content region (a real button exposing aria-expanded/aria-controls). When set, the hidden checkbox leaves the tab order.

Name	Type	Description
ChildContent	RenderFragment	The main content rendered inside the drawer-content region.
SideContent	RenderFragment	The panel content rendered inside the drawer-side region.
ToggleContent	RenderFragment	Content of an accessible built-in toggle button rendered at the top of the drawer-content region (a real button exposing aria-expanded/aria-controls). When set, the hidden checkbox leaves the tab order.

From MudDrawer

Drawer keeps MudDrawer's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.

Drawer wraps both the panel and the page content, like daisyUI's drawer, rather than living inside a MudLayout.

Drawer