How do you create NavigationDrawer in .NET MAUI?

To create a navigation drawer in .NET MAUI, you can use the “Grid” that slides in from the left side of the screen when a button is clicked. This drawer will include various menu items for navigation.

XAML

<Grid>
    <!-- Content Area -->
    <Grid>
        <Label Text="Main Content" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
        <Button Text="=>" Clicked="OnOpenDrawerClicked" HorizontalOptions="Start" VerticalOptions="Start" />
    </Grid>
    <!-- Navigation Drawer -->
<Grid x:Name="navigationDrawer" BackgroundColor="LightGray" TranslationX="-300"     WidthRequest="300" VerticalOptions="FillAndExpand" HorizontalOptions="StartAndExpand" RowDefinitions="Auto,Auto,Auto,Auto" ColumnDefinitions="*,Auto" RowSpacing="20" >
        <Label Grid.Row="0" Text="NavigationDrawer" VerticalOptions="Center" HorizontalOptions="Center" />
        <Button Grid.Column="1" Text="X" Clicked="OnCloseDrawerClicked"/>
        <Label Grid.Row="1" Text="Menu Item 1" VerticalOptions="StartAndExpand" />
        <Label Grid.Row="2" Text="Menu Item 2" VerticalOptions="StartAndExpand" />
        <Label Grid.Row="3" Text="Menu Item 3" VerticalOptions="StartAndExpand" />
    </Grid>
</Grid>

C#

 async void OnOpenDrawerClicked(object sender, EventArgs e)
 {
     await navigationDrawer.TranslateTo(0, 0, 250);
 }
 async void OnCloseDrawerClicked(object sender, EventArgs e)
 {
     await navigationDrawer.TranslateTo(-300, 0, 250);
 }