This article explains how to display a hamburger icon on all pages in the .NET MAUI Navigation Drawer. Step 1: Add a hamburger icon in the header To display the hamburger icon on every page and toggle the Navigation Drawer, follow these steps: Using a Grid layout, place the hamburger icon in the header section. Define the Navigation Drawer in the main content area, and configure key properties such as: DrawerHeaderView, DrawerContentView and DrawerHeaderHeight. <Grid RowDefinitions="80,*"> <Grid BackgroundColor="#6750A4" ColumnDefinitions="Auto,*,Auto" Grid.Row="0" ColumnSpacing="10" Padding="10,0"> <Image Grid.Column="0" HeightRequest="30" WidthRequest="30" HorizontalOptions="Start" Source="hamburgericon.png" BackgroundColor="#6750A4"> <Image.GestureRecognizers> <TapGestureRecognizer Tapped="Handle_Clicked"/> </Image.GestureRecognizers> </Image> </Grid> <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" Grid.Row="1"> <navigationdrawer:SfNavigationDrawer.DrawerSettings> <navigationdrawer:DrawerSettings DrawerHeaderHeight="177" DrawerWidth="260" DrawerHeight="{OnPlatform WinUI=400}" ContentBackground="#F7F2FB" DrawerFooterHeight="0"> <navigationdrawer:DrawerSettings.DrawerHeaderView> <Grid RowDefinitions="*,Auto,Auto" Padding="25,25,25,20"> <Image Source="user.png" VerticalOptions="Center" WidthRequest="72" HeightRequest="72"/> <Label Grid.Row="1" Text="Leslie Alexander" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" TextColor="#1C1B1F" FontAttributes="Bold" FontSize="16" WidthRequest="154" HorizontalOptions="Center"/> <Label Grid.Row="2" Text="UX Designer" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" TextColor="#1C1B1F" FontSize="12" WidthRequest="148" HeightRequest="24" HorizontalOptions="Center"/> </Grid> </navigationdrawer:DrawerSettings.DrawerHeaderView> <navigationdrawer:DrawerSettings.DrawerContentView> <ListView x:Name="listView" ItemSelected="On_ItemSelected"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Grid> <Label Text="{Binding}" FontSize="16" Margin="10,7,0,0" TextColor="Black" HorizontalOptions="Start" VerticalOptions="Center"> </Label> </Grid> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </navigationdrawer:DrawerSettings.DrawerContentView> </navigationdrawer:DrawerSettings> </navigationdrawer:SfNavigationDrawer.DrawerSettings> </navigationdrawer:SfNavigationDrawer> </Grid> Step 2: Navigating between pages In the DrawerContentView, you can add a list of items to allow navigation between different pages. When an item is selected, you can navigate to the corresponding page and update the content of the drawer. private void On_ItemSelected(object sender, SelectedItemChangedEventArgs e) { if (e.SelectedItem.ToString() == "Home") navigationDrawer.ContentView = new HomePage().Content; else if (e.SelectedItem.ToString() == "Profile") navigationDrawer.ContentView = new ProfilePage().Content; navigationDrawer.ToggleDrawer(); } void Handle_Clicked(object sender, System.EventArgs e) { navigationDrawer.ToggleDrawer(); } Step 3: Create a new page Create the new page that you want to navigate to. <ContentPage> <VerticalStackLayout> <Label Text="Welcome to Home Page!" VerticalOptions="Center" HorizontalOptions="Center" /> </VerticalStackLayout> </ContentPage> Output Download the complete sample from GitHub Conclusion I hope you enjoyed learning how to show hamburger icon in .NET MAUI Navigation Drawer pages. You can refer to our .NET MAUI NavigationDrawer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI NavigationDrawer example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our Support Forums, Direct-Trac, or Feedback Portal. We are always happy to assist you
This article explains how to navigate from one page to another using the .NET MAUI NavigationDrawer. Follow the steps outlined below to implement navigation in your MAUI project. Step 1: Set up the NavigationDrawer Create the NavigationDrawer with all necessary components such as DrawerHeaderView, DrawerContentView and ContentView. XAML <navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer"> <navigationdrawer:SfNavigationDrawer.DrawerSettings> <navigationdrawer:DrawerSettings DrawerWidth="250" DrawerHeaderHeight="160"> <navigationdrawer:DrawerSettings.DrawerHeaderView> <Grid BackgroundColor="#6750A4" RowDefinitions="120,40"> <Image Source="user.png" HeightRequest="110" Margin="0,10,0,0" BackgroundColor="#6750A4" VerticalOptions="Center" HorizontalOptions="Center"/> <Label Text="James Pollock" Grid.Row="1" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="20" TextColor="White"/> </Grid> </navigationdrawer:DrawerSettings.DrawerHeaderView> <navigationdrawer:DrawerSettings.DrawerContentView> <ListView x:Name="listView" ItemSelected="OnItemSelected"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <VerticalStackLayout HeightRequest="40"> <Label Margin="10,7,0,0" Text="{Binding}" FontSize="16" TextColor="Black"/> </VerticalStackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </navigationdrawer:DrawerSettings.DrawerContentView> </navigationdrawer:DrawerSettings> </navigationdrawer:SfNavigationDrawer.DrawerSettings> <navigationdrawer:SfNavigationDrawer.ContentView> <Grid x:Name="mainContentView" BackgroundColor="White" RowDefinitions="Auto,*"> <HorizontalStackLayout BackgroundColor="#6750A4" Spacing="10" Padding="5,0,0,0"> <ImageButton x:Name="hamburgerButton" HeightRequest="50" WidthRequest="50" HorizontalOptions="Start" Source="hamburgericon.png" BackgroundColor="#6750A4" Clicked="hamburgerButton_Clicked"/> <Label x:Name="headerLabel" HeightRequest="50" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="Home" FontSize="16" TextColor="White" BackgroundColor="#6750A4"/> </HorizontalStackLayout> <StackLayout Grid.Row="1"> <Button Text="Next_Page" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" Clicked="Button_Clicked" /> </StackLayout> </Grid> </navigationdrawer:SfNavigationDrawer.ContentView> </navigationdrawer:SfNavigationDrawer> Step 2: Handle the button click events Define the functionality for both the hamburger button and the navigation button. private void hamburgerButton_Clicked(object sender, EventArgs e) { navigationDrawer.ToggleDrawer(); } private async void Button_Clicked(object sender, EventArgs e) { await Navigation.PushAsync(new NewPage()); } Step 3: Create a New Page Create the new page that you want to navigate to. <ContentPage> <VerticalStackLayout> <Label Text="Welcome to .NET MAUI!" VerticalOptions="Center" HorizontalOptions="Center" /> </VerticalStackLayout> </ContentPage> Output Download the complete sample in GitHub Conclusion I hope you enjoyed learning about how to navigate to a page in .NET MAUI Navigation Drawer. You can refer to our .NET MAUI NavigationDrawer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our .NET MAUI NavigationDrawer example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our Support Forums, Direct-Trac, or Feedback Portal. We are always happy to assist you!
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 } Additional Notes Ensure that each content page (e.g., Inbox, Contacts, Remainders, ToDoList) is properly defined and returns a valid Content property. The ResetSelection method is used to reset the visual state of the menu items before setting the new selection. Call the ToggleDrawer method if needed after selecting an item. 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!
In the Flutter Event Calendar, you can use navigation drawer for view switching by loading controller views in drawer of the Scaffold widget and show the calendar in body region. Inside the state initializethe default values for calendar. final CalendarController _controller = CalendarController(); List<String> _items = [ 'Day view', 'Week view', 'Work week view', 'Month view', 'Schedule view', 'Timeline day', 'Timeline week', 'Timeline work week', 'Timeline month' ]; Place the ListView.builder in the drawer of the Scaffold widget for view switching. drawer: Drawer( child: ListView.builder( itemCount: _items.length, itemBuilder: (context, index) { return GestureDetector( child: ListTile( title: Text('${_items[index]}'), ), onTap: () { if (index == 0) { _controller.view = CalendarView.day; Navigator.pop(context); } else if (index == 1) { _controller.view = CalendarView.week; Navigator.pop(context); } else if (index == 2) { _controller.view = CalendarView.workWeek; Navigator.pop(context); } else if (index == 3) { _controller.view = CalendarView.month; Navigator.pop(context); } else if (index == 4) { _controller.view = CalendarView.schedule; Navigator.pop(context); } else if (index == 5) { _controller.view = CalendarView.timelineDay; Navigator.pop(context); } else if (index == 6) { _controller.view = CalendarView.timelineWeek; Navigator.pop(context); } else if (index == 7) { _controller.view = CalendarView.timelineWorkWeek; Navigator.pop(context); } else if (index == 8) { _controller.view = CalendarView.timelineMonth; Navigator.pop(context); } }); }, ), ), Place the calendar inside the body of Scaffold widget. body: SafeArea( child: SfCalendar( view: CalendarView.month, controller: _controller, dataSource: _getCalendarDataSource(), )), View sample in GitHub
