---
layout: default
permalink: /navbars
category: components
title: Navbars
description: "The navigation is a main component for our design, it is the element with which our users are guided,
you have different options in colors,
sizes and states. They are easy to customize, take a look and create your own navbar."
---
{{ page.title }} Component
{{ page.description }}
Use
e-nav the main container.
e-menu the right side, hidden on touch devices, visible on desktop.
e-menu-item each single item of the navbar.
e-separator a vertical line to separate navbar items.
e-distribution
separates or pushes the elements of a container (e-menu) is used once or several times.
Basic structure
This is the basic structure to build a navigation (e-nav),
it is important to follow this basic structure to activate and deactivate
the visibility of the element (e-menu).
It includes outside the container (e-menu) the brand or logo of the website,
a label and input element that detonate the visibility of the element (e-menu).
{% highlight html %}
{% endhighlight %}
With explanatory comments
{% highlight html %}
{% endhighlight %}
Distribution
The navigation bar is divided in this way we give you control over how the content
of the bar is displayed. The navigation is not divided by default,
if you add the elements without the distribution, the content will take
the center as the default position. (See example above.)
<i class="e-distribution"></i>
Example:
with distribution. // All content on the Right.
{% highlight html %}
Logo
{% endhighlight %}
Example:
with distribution. // All content on the left.
{% highlight html %}
Logo
{% endhighlight %}
Example:
with distribution. // Both sides.
{% highlight html %}
Logo
{% endhighlight %}
Additional classes
Apply the following classes to customize the navigation.
Add fixed after e-nav to have a fixed bar.
Add narrow after e-menu to have (e-menu-item) of smaller size.
Narrow menu
The narrow menu is visible on mobile devices. To see an example, minimize your browser window.
Oh oh! we notice your small screen if you notice any damage in the navigation bars we recommend
that you see it through the link button for more viewing.
See the navigation bar by clicking on the button to see it completely and without losing the format.
This page looks small, but that does not mean that the navigation bar will look the same on your page.