Getting Started

15 Dec 2018 / 16 minutes to read

This section helps to get started with Essential ReactJS Navigation Drawer component.

Create a Navigation Drawer

Refer the common ReactJS Getting Started Documentation to create an application and add necessary scripts and styles for rendering our ReactJS components.

Create a JSX file and use syntax to render React NavigationDrawer component. Add required properties to tag element.

  • javascript
  • ReactDOM.render(    
                   <EJ.NavigationDrawer id="navpanedefault"
                   </EJ.NavigationDrawer>,
                   document.getElementById('navigation')
              );

    Define an HTML element for adding Navigation Drawer in the application and refer the JSX file created.

  • html
  • <div id="navigation"></div> 
           <script type="text/babel" src="sample.jsx">

    Configuring properties

    In the JSX, need to declare the navigation drawer properties. Refer to the following code,

  • javascript
  • ReactDOM.render(    
                    <EJ.NavigationDrawer id="navpanedefault" type="overlay" direction="left" enableListView={true} listViewSettings-width={220} listViewSettings-height="100%" 
                    listViewSettings-selectedItemIndex="0" position="normal">
                        <ul>
                            <li data-ej-text="Home"></li>
                            <li data-ej-text="People"></li>
                            <li data-ej-text="Profile"></li>
                        </ul>
                    </EJ.NavigationDrawer>,
                    document.getElementById('navigation')
    
            );

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

  • html
  • <div id="targetPane">
        <div className="e-lv">
            <div className="e-header">
                <div id="drawer" className="drawerIcon e-icon alignText"></div>
            </div>
        </div>
      </div>

    To set the target icon image and with the correct position as using the below mentioned styles.

  • css
  • <style>
        
            .drawerIcon {
                background-position: center center;
                background-repeat: no-repeat;
                height: 45px;
                width: 32px;
                background-size: 100% 100%;
                padding-right: 10px;
            }
    
            .drawerIcon:before {
                content: "\e76b";
                font-size: 24px;
                height: 26px;
                line-height: 24px;
            }
    
            #targetPane {
                height: 220px;
                position: relative;
                padding: 0px;
                overflow: hidden;
                margin: 0px;
            }
    
        </style>

    Getting Started

    You can open the list items by clicking on target element using the targetId property.

  • javascript
  • ReactDOM.render(    
                   <EJ.NavigationDrawer id="navpanedefault" type="overlay" direction="left" targetId="drawer" enableListView={true} listViewSettings-width={220} listViewSettings-height="100%" 
                    listViewSettings-selectedItemIndex="0" position="normal">
                        <ul>
                            <li data-ej-text="Home"></li>
                            <li data-ej-text="People"></li>
                            <li data-ej-text="Profile"></li>
                        </ul>
                   </EJ.NavigationDrawer>,
                   document.getElementById('navigation')
             );

    Getting Started Navigations

    To set the images for list items of the Navigation Drawer by using the [data-ej-imageclass] property as follows.

  • javascript
  • ReactDOM.render(    
                   <EJ.NavigationDrawer id="navpanedefault" type="overlay" direction="left" targetId="drawer" enableListView={true} listViewSettings-width={220} listViewSettings-height="100%" 
                    listViewSettings-selectedItemIndex="0" position="normal">
                        <ul>
                            <li data-ej-imageclass="e-icon e-home" data-ej-text="Home"></li>
                            <li data-ej-imageclass="e-icon e-photo" data-ej-text="Photos"></li>
                            <li data-ej-imageclass="e-icon e-profile" data-ej-text="Profile"></li>
                        </ul>
                   </EJ.NavigationDrawer>,
                   document.getElementById('navigation')
          );

    To set the images with the correct position by using the mentioned styles.

  • 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>

    Getting Started Navigation Drawer

    To add desired page content while selecting the options in navigation drawer as follows.

  • html
  • <!-- 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>

    To load the appropriate content for the navigation by using the listViewSettings-mouseUp event handler of ListView component.

  • javascript
  • ReactDOM.render(    
                   <EJ.NavigationDrawer id="navpanedefault" type="overlay" direction="left" targetId="drawer" enableListView={true} listViewSettings-width={220} listViewSettings-height="100%" 
                    listViewSettings-selectedItemIndex="0" listViewSettings-mouseUp={this.headChange} position="normal">
                        <ul>
                            <li data-ej-imageclass="e-icon e-home" data-ej-text="Home"></li>
                            <li data-ej-imageclass="e-icon e-photo" data-ej-text="Photos"></li>
                            <li data-ej-imageclass="e-icon e-profile" data-ej-text="Profile"></li>
                        </ul>
                   </EJ.NavigationDrawer>,
                   document.getElementById('navigation')
          );

    In the mouse, up handler, it’s display the respective selected item’s content.

  • javascript
  • headChange: function (e) {
                  $('#Home, #Profile, #Photos').hide(); //Hiding all other contents
                  $('#' + e.text).show(); //Displaying the content based on the text of item selected
              }

    Run the above code to render the following output.

    Getting started images

    Customize Direction

    By using direction property, to change the list view open direction. The possible directions are Right, Left and the Left is default value.

  • javascript
  • ReactDOM.render(    
             <EJ.NavigationDrawer id="navpanedefault" type="overlay" direction="right" targetId="drawer" enableListView={true} listViewSettings-width={220} listViewSettings-height="100%" 
                    listViewSettings-selectedItemIndex="0" listViewSettings-mouseUp={this.headChange} position="normal">
                        <ul>
                            <li data-ej-imageclass="e-icon e-home" data-ej-text="Home"></li>
                            <li data-ej-imageclass="e-icon e-photo" data-ej-text="Photos"></li>
                            <li data-ej-imageclass="e-icon e-profile" data-ej-text="Profile"></li>
                        </ul>
              </EJ.NavigationDrawer>,
              document.getElementById('navigation')
        );

    Customize direction

    NOTE

    To get the complete API list for all the Syncfusion component’s properties from the API reference