| layout | post |
|---|---|
| title | Separators in AngularJS Menu Control | Syncfusion |
| description | Learn here all about Separators support in Syncfusion Essential AngularJS Menu control, its elements, and more. |
| platform | AngularJS |
| control | Menu |
| documentation | ug |
| keywords | ejmenu, menu, angularjs menu |
Menu can also contain separators that are horizontal bars between menu items. You cannot select a separator. Separators are somewhat similar to borders, except that they are genuine components and, as such, are drawn inside a control, rather than around the edges of the Menu control. enableSeparator is the property that is used to display the separators in the Menu control. It accepts the Boolean type value. Its default value is true.
Add the following the code sample to display the Menu control without separator by setting enableSeparator as false.
{% highlight html %}
{% endhighlight %}
The following screenshot displays the output for the above code.
We can add the separators for particular ContextMenu items by including e-separator class in the required LI elements. Add the following code to display ContextMenu with separator lines.
{% highlight html %}
{% endhighlight %}
{% highlight javascript %}
<script type="text/javascript"> angular.module('MenuApp', ['ejangular']) .controller('MenuCtrl', function ($scope) { $scope.type = ej.MenuType.ContextMenu; }); </script>{% endhighlight %}
{% highlight css %}
<style type="text/css">
.textarea {
border: 1px solid;
padding: 10px;
position: relative;
text-align: justify;
width: 463px;
color: gray;
}
</style>
{% endhighlight %}
The following screenshot displays the output for the above code.
