Drawer Templates
The Drawer can be customized by using Templates. This article explains the available layout templates for the component.
ItemTemplate
The <ItemTemplate> controls the rendering of the data bound items in the Drawer, in case you want to use a rendering different than the default one.
This template receives a context argument that is of the data model type and represents the current item.
When using an ItemTemplate, the Drawer can still navigate automatically if the UrlField parameter is set, or if the Drawer data items have a populated Url property.
Use ItemTemplate to control the rendering of the items in the Drawer.
Template
The <Template> allows you to control the whole rendering of the Drawer so you can add extra content and application logic. This template receives a context argument that is IEnumerable<TItem> - it is the Data collection of the component.
When using this template all built-in features of the Drawer are disabled and should be implemented by the application, for example the item selection and rendering, navigation to different pages, etc. Page navigation can be done with <a>, <NavLink>, NavigationManager and so on.
The drawer will expand and collapse as usual, but the content has to be controlled by the application entirely.
Make sure that the <DrawerContent> tag is outside of the <Template> - the <DrawerContent> is responsible for the rendering the application outside of the Drawer, whereas the <Template> controls only the rendering of the component. In the <DrawerContent> tag you can place the @Body when you are using the Drawer as a sidebar navigation.
You can find a runnable sample that showcases this in the Drawer as Side Navigation using the Template sample project.
Using the <Template> and <ItemTemplate> together is not possible - the Template removes any built-in rendering from the Drawer.
Using the template takes functionality away from the drawer because it no longer controls its own rendering. For example, appearance of the items, focused states, keyboard navigation, page navigation and clicks are no longer controlled by the Drawer component and need to be implemented by the application template.
Using a template with manual item selection, header and footer