Getting Started

13 Jun 20236 minutes to read

Create your first Navigation Drawer control in MVC

In this section, you can learn how to create a simple navigation drawer.

Create Navigation Drawer Widget

The following steps guide you in adding a Navigation Drawer control for a web application that displays a list of items such as home, profile, photos and location where you can navigate to desired page by clicking on the option available in the drawer.

You can create an MVC Project and add the necessary assemblies, styles and scripts to it.  Refer to the MVC-Getting Started.

To add a Navigation Drawer control, call NavigationDrawer helper. You can display the navigational item as a list by using ListView. This is achieved by creating the ListView inside the content template. You can set the text for list items by using Text property. You can paste the following code in corresponding view page.

  • CSHTML
  • @Html.EJ().NavigationDrawer("navigationPane").Width(300).ContentTemplate(@<div>
    
    @Html.EJ().ListView("list").ShowHeader(false).Width(300).Items(items =>
    
    	 {
    
    		 items.Add().Text("Home");
    
    		 items.Add().Text("Profile");
    
    		 items.Add().Text("Photos");
    
    		 items.Add().Text("Location");
    
    	 });
    
    </div>)

    Create the target element as follows to display the drawer by clicking target icon.

  • CSHTML
  • <div class="navigation">
    
         <div id="target" class="icon-target"> Drawer</div>
    
    </div>

    To set the target icon image from sprite and to position the target icon properly use the following code example.

  • CSS
  • <style>
    
    	[class*="icon-"]
    
    	{
    
    		background-image: url("http://js.syncfusion.com/ug/web/content/drawer/sprite.png");
    
    	}
    
     .icon-target 
    
    	{
    
    		 background-position: 0 -331px;
    
    		 font-size: 34px;
    
    		 height: 48px;
    
    		 position: absolute;
    
    		 text-indent: 50px;
    
    		 top: -3px;
    
    		 width: 48px;
    
    		 z-index: 3;
    
    	 }
    
     .navigation 
    
    	{
    
    		background: none repeat scroll 0 0 #C4C4B4;
    
    		color: #fff;
    
    		height: 45px;
    
    		padding-left: 5px;
    
    		width: 100%;
    
    	}
    
       body
    
    	 {
    
    		background: none repeat scroll 0 0 #ece9d8;
    
    	 }
    
    </style>

    Set the TargetId property as follows.

  • CSHTML
  • @Html.EJ().NavigationDrawer("navigationPane").Width(300).TargetId("target").ContentTemplate(@<div>
    
    @Html.EJ().ListView("list").ShowHeader(false).Width(300).Items(items =>
    
    	 {
    
    		 items.Add().Text("Home");
    
    		 items.Add().Text("Profile");
    
    		 items.Add().Text("Photos");
    
    		 items.Add().Text("Location");
    
    	 });
    
    </div>)

    Run the application to render the following output.

    You can display the drawer either by clicking on the target icon or by swiping from left on the page. Refer to the following screenshot.

    You can set the images for Navigation Drawer by using the ImageClass property as follows.

  • CSHTML
  • @Html.EJ().NavigationDrawer("navigationPane").Width(300).TargetId("target").ContentTemplate(@<div>
    
    @Html.EJ().ListView("list").ShowHeader(false).Width(300).Items(items =>
    
     {
    
    	 items.Add().Text("Home").ImageClass("e-icon e-home");
    
    	 items.Add().Text("Profile").ImageClass("e-icon e-profile");
    
    	 items.Add().Text("Photos").ImageClass("e-icon e-photo");
    
    	 items.Add().Text("Location").ImageClass("e-icon e-location");
    
     });
    
    </div>)

    You can define the image classes specified for the list items as follows.

  • CSS
  • <style>
    
    	@font-face { 
            font-family: 'ej-font'; 
            src: url('../../common-images/tools/icons.eot'); 
            src: url('../../common-images/tools/icons.eot') format('embedded-opentype'), url('../../common-images/tools/icons.woff') format('woff'),url('../../common-images/tools/icons.woff') format('woff'), url('../../common-images/tools/icons.ttf') format('truetype'), url('../../common-images/tools/icons.svg') format('svg'); 
            font-weight: normal; 
            font-style: normal; 
        } 
     
        .e-home:before { 
            font-family: "ej-font"; 
            content: "\e900"; 
        } 
     
        .e-profile:before { 
            font-family: "ej-font"; 
            content: "\e901"; 
        } 
     
        .e-photo:before { 
            font-family: "ej-font"; 
            content: "\e903"; 
        } 
     
        .e-location:before { 
            font-family: "ej-font"; 
            content: "\e905"; 
        } 
    
        .e-people:before { 
            font-family: "ej-font"; 
            content: "\e902"; 
        } 
     
        .e-communities:before { 
            font-family: "ej-font"; 
            content: "\e904"; 
        }
    
        .e-home, .e-profile, .e-people, .e-photo, .e-communities, .e-location { 
            font-size: 24px; 
            color: black; 
        } 
    </style>

    Run the application to render the following output.

    Create corresponding content elements for each options in the navigation list as follows.

  • CSHTML
  • <!-- Home Page Content-->
    
    <div id="Home">
    
      The Home screen allows you to choose the specific content type displayed.
    
    </div>
    
    <!-- Profile Page Content-->
    
    <div id="Profile" style="display: none">
    
       The Profile page content is displayed.
    
    </div>
    
    <!-- Photos Page Content-->
    
    <div id="Photos" style="display: none">
    
        The Photos page content is displayed.
    
    </div>
    
    <!-- Location Page Content-->
    
    <div id="Location" style="display: none">
    
         The Location page content is displayed.
    
    </div>
    
    </div>

    You can load the desired content for the navigation items by updating the content through MouseDown handler of ListView. You can define the handler and pass the method name with MouseDown attribute through listViewSettings. Also to know which item’s content is being loaded in the page, make the list selection to persist in the drawer by setting persistSelection as true. Refer to the following code example.

  • CSHTML
  • @Html.EJ().NavigationDrawer("navigationPane").Width(300).TargetId("target").ContentTemplate(@<div>
    
    @Html.EJ().ListView("list").ShowHeader(false).ClientSideEvents(click => click.MouseDown("slideMenuClick")).PersistSelection(true).Width(300).Items(items =>
    
     {
    
    	 items.Add().Text("Home").ImageClass("e-icon e-home");
    
    	 items.Add().Text("Profile").ImageClass("e-icon e-profile");
    
    	 items.Add().Text("Photos").ImageClass("e-icon e-photo");
    
    	 items.Add().Text("Location").ImageClass("e-icon e-location");
    
     });
    
    </div>)

    In the mouse down handler, you can hide the other content and display the respective selected item’s content.

  • JS
  • <script type="text/javascript">
    
    	function slideMenuClick(e) 
    	{
    
    			$('#Home, #Profile, #Photos, #Location').hide(); //Hiding all other contents
    
    			$('#' + e.text).show(); //Displaying the content based on the text of item selected
    
    			$("#navigationPane").ejNavigationDrawer("close");
    
    	}
    
    </script>

    Run the application to render the following output.