How to load content page to .NET MAUI Navigation Drawer contentview?

Overview

The .NET MAUI Navigation Drawer includes a content area and a sliding pane. Although it doesn’t directly support ContentPages, you can include the content of a ContentPage in the Navigation Drawer. Here’s how:

Setting Up the Navigation Drawer in XAML

Define the Navigation Drawer in your XAML file:

<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationdrawer:SfNavigationDrawer.DrawerSettings>
        <navigationdrawer:DrawerSettings>
            <!-- DrawerContentView -->
            <navigationdrawer:DrawerSettings.DrawerContentView>
                <ScrollView>
                    <VerticalStackLayout Spacing="10" Padding="5,0">
                        <Border StrokeThickness="0" x:Name="inboxEffectsBorder">
                            <Border.StrokeShape>
                                <RoundRectangle CornerRadius="30"/>
                            </Border.StrokeShape>
                            <core:SfEffectsView x:Name="inboxEffects" RippleBackground="#ab56e3">
                                <core:SfEffectsView.GestureRecognizers>
                                    <TapGestureRecognizer 
                                        Tapped="InboxTapGestureRecognizer_Tapped"/>
                                </core:SfEffectsView.GestureRecognizers>
                                <Grid Padding="20,5,10,5" HeightRequest="48">
                                    <!-- Menu Item Content -->
                                </Grid>
                            </core:SfEffectsView>
                        </Border>
                        <!-- Additional Menu Items -->
                    </VerticalStackLayout>
                </ScrollView>
            </navigationdrawer:DrawerSettings.DrawerContentView>
        </navigationdrawer:DrawerSettings>
    </navigationdrawer:SfNavigationDrawer.DrawerSettings>
</navigationdrawer:SfNavigationDrawer>

Create Your Content Pages

Create the content pages that you want to load into the Navigation Drawer. For example, Inbox.xaml and Contacts.xaml, etc.

Handling Content Page Navigation in Code-Behind

In the code-behind, manage navigation between pages by updating the ContentView:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        Initialize();
    }

    private void Initialize()
    {
        navigationDrawer.ContentView = new Inbox().Content;
    }

    private void ResetSelection()
    {
        // Reset the visual state of menu items
    }

    private void InboxTapGestureRecognizer_Tapped(object? sender, TappedEventArgs e)
    {
        ResetSelection();
        navigationDrawer.ContentView = new Inbox().Content;
    }

    private void ContactsTapGestureRecognizer_Tapped(object? sender, TappedEventArgs e)
    {
        ResetSelection();
        navigationDrawer.ContentView = new Contacts().Content;
    }
    // Additional tap handlers for other menu items
}

Output

Download the complete sample from GitHub

Conclusion

I hope you enjoyed learning how to load the content page into the .NET MAUI Navigation Drawer.

You can refer to our .NET MAUI Navigation Drawer feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Navigation Drawer documentation to understand how to present and manipulate data.

You can check out our .NET MAUI 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 .NET MAUI Navigation Drawer and other .NET MAUI components.

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!