How to use SfAccordion in SfNavigationDrawer in .NET MAUI?

You can load the SfAccordion into the SfNavigationDrawer in .NET MAUI.

XAML

Load the SfAccordion into the SfNavigationDrawer.DrawerContentView. Add a hamburger icon with Image.GestureRecognizer and bind the ViewModel command to the TapGestureRecognizer.Command to toggle the drawer.

<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer">
            
    <navigationdrawer:SfNavigationDrawer.ContentView>
        <Grid x:Name="mainContentView" BackgroundColor="White">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid BackgroundColor="#e8e8e8" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image x:Name="hamburgerButton" Source="hamburger.png" HeightRequest="30" WidthRequest="30" Margin="5,0,0,0" HorizontalOptions="Start">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding ToggleDrawerCommand}" CommandParameter="{x:Reference navigationDrawer}"/>
                    </Image.GestureRecognizers>
                </Image>
                <Label x:Name="headerLabel" Grid.Column="1" HeightRequest="50" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" Text="Home" FontSize="16" TextColor="#385170" />
            </Grid>
            <Label Grid.Row="1" x:Name="contentLabel" VerticalOptions="Center" HorizontalOptions="Center" Text="Content View" FontSize="14"/>
        </Grid>
    </navigationdrawer:SfNavigationDrawer.ContentView>
            
    <navigationdrawer:SfNavigationDrawer.DrawerSettings>
        <navigationdrawer:DrawerSettings DrawerHeaderHeight="160" DrawerFooterHeight="0">
                    
            <navigationdrawer:DrawerSettings.DrawerHeaderView>
                <Grid BackgroundColor="Black">
                    <Image Source="burger.jpg" HeightRequest="110" Margin="0,10,0,0" VerticalOptions="Center" HorizontalOptions="Center" />
                </Grid>
            </navigationdrawer:DrawerSettings.DrawerHeaderView>
                    
            <navigationdrawer:DrawerSettings.DrawerContentView>
                <Grid BackgroundColor="#323f4c">                          
                        <accordion:SfAccordion x:Name="accordion"  BindableLayout.ItemsSource="{Binding Info}"  ExpandMode="SingleOrNone" HeaderIconPosition="End">
                            <BindableLayout.ItemTemplate>
                                <DataTemplate>
                                    <accordion:AccordionItem HeaderBackground="#1f2933" HeaderIconColor="#cbd2d9">
                                        <accordion:AccordionItem.Header>
                                            <Grid>
                                                <Label Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="StartAndExpand" HeightRequest="50" TextColor="#cbd2d9" Padding="5,0,0,0" VerticalTextAlignment="Center"/>
                                            </Grid>
                                        </accordion:AccordionItem.Header>
                                        <accordion:AccordionItem.Content>
                                            <Grid Padding="5,0,5,0" BackgroundColor="#3e4c59">
                                                <Label Text="{Binding Description}" TextColor="#cbd2d9" VerticalOptions="Center"/>
                                            </Grid>
                                        </accordion:AccordionItem.Content>
                                    </accordion:AccordionItem>
                                </DataTemplate>
                            </BindableLayout.ItemTemplate>
                        </accordion:SfAccordion>                           
                </Grid>
            </navigationdrawer:DrawerSettings.DrawerContentView>
        </navigationdrawer:DrawerSettings>               
    </navigationdrawer:SfNavigationDrawer.DrawerSettings>                    
</navigationdrawer:SfNavigationDrawer>

C#

Use the ToggleDrawer() method to manage the navigation drawer in the command execution method.

public class ItemInfoRepository : INotifyPropertyChanged
{		
   public Command ToggleDrawerCommand { get; set; }
   public ItemInfoRepository()
   {
     ToggleDrawerCommand = new Command(OpenDrawer);
   }
   private void OpenDrawer(object obj)
   {
     (obj as SfNavigationDrawer).ToggleDrawer();
   }
}

Download the complete sample from GitHub

Output

Conclusion
I hope you enjoyed learning how to use SfAccordion in SfNavigationDrawer in .NET MAUI.
You can refer to our .NET MAUI Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our .NET MAUI Accordion example to understand how to create and manipulate data.
Check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!