How to set toggle animations in .NET MAUI Navigation Drawer (SfNavigationDrawer)?

In this section, explore how to set toggle animations in the .NET MAUI Navigation Drawer. The drawer toggling animation can be adjusted using the Transition property, which offers three different values:

• SlideOnTop
• Push
• Reveal

SlideOnTop
The navigation pane overlays the main content area when opened.

XAML

<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationdrawer:SfNavigationDrawer.DrawerSettings>
        <navigationdrawer:DrawerSettings Transition="SlideOnTop">
          ...
        </navigationdrawer:DrawerSettings>
    </navigationdrawer:SfNavigationDrawer.DrawerSettings>
    ...
</navigationdrawer:SfNavigationDrawer>

Output

Push

The navigation pane is hidden. When opened, it pushes the main content area on the opposite side up to the width of the drawer.

XAML

<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationdrawer:SfNavigationDrawer.DrawerSettings>
        <navigationdrawer:DrawerSettings Transition="Push">
          ...
        </navigationdrawer:DrawerSettings>
    </navigationdrawer:SfNavigationDrawer.DrawerSettings>
    ...
</navigationdrawer:SfNavigationDrawer>

Output

Reveal
The navigation pane is hidden behind the main content. The main content moves away on the opposite side up to the drawer width to reveal the drawer content.

XAML

<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationdrawer:SfNavigationDrawer.DrawerSettings>
        <navigationdrawer:DrawerSettings Transition="Reveal">
         ...
        </navigationdrawer:DrawerSettings>
    </navigationdrawer:SfNavigationDrawer.DrawerSettings>
    ...
</navigationdrawer:SfNavigationDrawer>

Output

Download the complete sample from GitHub

Conclusion
I hope you enjoyed learning how to set toggle animations in 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. Explore our .NET MAUI Navigation Drawer documentation to understand how to present and manipulate data.

You can check out our .NET MAUI components on the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI Navigation Drawer and other .NET MAUI components.

Please let us know in the comments if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!