Progress Telerik UI for Blazor

Blazor Drawer

  • Left or right position, overlay or inline, small or large, collapsed or expanded - the side panel Blazor Drawer component provides templates, data binding, navigation and events.
  • This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
  • The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
Telerik UI for Blazor Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Blazor Drawer Overview

    The Drawer component is a dismissible or permanently visible panel for navigating in WebAssembly (WASM) and Server-side Blazor apps applications. It allows switching the content of different sections of the page and comes with multiple configuration options for setting its display mode, position, customization via templates, built-in keyboard support.

    Example of Drawer component in Blazor

    Telerik UI for Blazor Drawer Overview
  • Blazor Drawer Display Modes

    The Drawer component comes with two options for displaying its content: Overlay in which the Drawer expands on top of the container content and displays a grayed overlay over it; Push- the Drawer expands side by side to the container content by shrinking its width.

    Example of Drawer component display modes

    Telerik UI for Blazor Drawer Display Modes
  • Blazor Drawer Mini Mode

    When the Drawer is in a collapsed state, you can enable its “mini mode” or “mini view” which means that when the Drawer is minimized, it will elegantly display only the item icon.

    Telerik UI for Blazor Drawer Mini Mode
  • Blazor Drawer Positions

    Depending on the Blazor app requirements you may need to position the Drawer left or right in relation to the page content

    Telerik UI for Blazor Drawer Positioning
  • Customizing Blazor Drawer with Templates

    The Drawer component templates allow full customization of its appearance. Using the Drawer item template, you can control the rendering of each individual list item, and with the Drawer full template you can choose what the Drawer renders on your own without a data source the component uses. The full Template will let you add login components, user profile picture, and any other content and functionality you need - from headers/footers to hierarchical structures for navigation (such as a TreeView).

    Example of Drawer customization with templates

    Telerik UI for Blazor Drawer Template
  • Blazor Drawer Events

    The Drawer component exposes SelecteditemChanged and ExpandedChanged events to let you handle user interactions and component state changes:

    • SelecteditemChanged - fires every time the user clicks on a new Drawer item
    • ExpandedChanged - fires every time the component's state is changed.
    Telerik UI for Blazor Events
  • Blazor Drawer Keyboard Navigation

    The Drawer component has built-in keyboard navigation allowing end users to easily navigate, focus and click on Drawer items using their keyboard.

    Telerik UI for Bazor Keyboard Navigation
  • Blazor Drawer Theming

    The Telerik Blazor Drawer component has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of out-of-the-box themes with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.

All Blazor Components

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.