Separators

21 Sep 20176 minutes to read

Separators can be added to menu items to display a horizontal bars between menu items. Separators are similar to borders and cannot be selected.enableSeparator is the property that is used to display the separators in the Menu control. It accepts Boolean type value. Its default value is true.

1. Add the following code in your view page.

    // Add the following code in the CSHTML page.
   
    <div class="imgframe">
   
        Html.EJ().Menu("menuControl").Items(items =>
   
        {
   
            items.Add().Id("Home").Text("Home").Children(child =>
   
                {
   
                    child.Add().Text("Foundation");
   
                    child.Add().Text("Launch");
   
                    child.Add().Text("About").Children(child1 =>
   
                    {
   
                        child1.Add().Text("Company");
   
                        child1.Add().Text("Location");
   
                    });
   
                });
   
            items.Add().Text("Services").Children(child =>
   
                {
   
                    child.Add().Text("Consulting");
   
                    child.Add().Text("Outsourcing");
   
                });
   
            items.Add().Text("About");
   
            items.Add().Id("Contact").Text("Contact Us").Children(child =>
   
                {
   
                    child.Add().Text("Contact number");
   
                    child.Add().Text("E-mail");
   
                });
   
            items.Add().Id("Careers").Text("Careers").Children(child =>
   
                 {
   
   
   
                     child.Add().Text("Position").Children(child1 =>
   
                             {
   
                                 child1.Add().Text("Developer");
   
                                 child1.Add().Text("Manager");
   
                             });
   
                     child.Add().Text("Apply online");
   
                 });
   
   
   
        }).Width("500").EnableSeparator(true)
   		
    </div>

   The following screenshot displays the output for the above code sample.

   

   Menu with Separators

2. Add the following code in your view page to display the Menu control without separator by setting EnableSeparator as false.

    <div class="imgframe">
   
    @Html.EJ().Menu("menuControl").Items(items =>
   
        {
   
            items.Add().Id("Home").Text("Home").Children(child =>
   
                {
   
                    child.Add().Text("Foundation");
   
                    child.Add().Text("Launch");
   
                    child.Add().Text("About").Children(child1 =>
   
                    {
   
                        child1.Add().Text("Company");
   
                        child1.Add().Text("Location");
   
                    });
   
                });
   
            items.Add().Text("Services").Children(child =>
   
                {
   
                    child.Add().Text("Consulting");
   
                    child.Add().Text("Outsourcing");
   
                });
   
            items.Add().Text("About");
   
            items.Add().Id("Contact").Text("Contact Us").Children(child =>
   
                {
   
                    child.Add().Text("Contact number");
   
                    child.Add().Text("E-mail");
   
                });
   
            items.Add().Id("Careers").Text("Careers").Children(child =>
   
                 {
   
   
   
                     child.Add().Text("Position").Children(child1 =>
   
                             {
   
                                 child1.Add().Text("Developer");
   
                                 child1.Add().Text("Manager");
   
                             });
   
                     child.Add().Text("Apply online");
   
                 });
   
   
   
        }).Width("500").EnableSeparator(false)
   
    </div>

The following screenshot displays the output for the above code.

Menu without Separators