--- layout: default permalink: /dropdown category: components title: Dropdown description: " The famous drop-down options are contextual overlays that can be toggled to display lists of links and more. We use hover to activate the visibility of these elements. They are super easy to create and customize with excellent colors and spectacular shadows." ---

{{page.title}} Component

{{page.description}}


Use

e-dropdown This is the main container.

drop-right Add the class drop-right to have a drop-down menu aligned to the right.

drop-items This is the drop-down menu, hidden by default.

drop-item each item in the drop-down menu, which can be a (a) or a (div)

hr use the hr to separate the drop-down elements.

inverted invierte los colores del elemento (drop-item) utilizado el color como fondo.


{% highlight html %}
Dropdown
{% endhighlight %}
Drop-right

{% highlight html %}
Drop-right
{% endhighlight %}

Add the class drop-right to have a drop-down menu aligned to the right.

Use beautiful colors

Use the beautiful colors that are included in almost all the elements and hover over your items to see the changes.


{% highlight html %}
Dropdown
{% endhighlight %}


Inverted

Add the class (inverted) to change the background color to the class color, that is if you add (inverted danger) your (drop-item) when hovering over them you will have a background color (danger) and white text.


{% highlight html %}
Dropdown
{% endhighlight %}
Other ways to add

It can affect the dropdown from a higher container and obtain the same or better result. Example: Adding a dropdown to a navigation container like (e-nav).



In the previous example we use the classes in the main container that is a navigation (e-nav) the dropdown element behaves differently and is affected from the classes of (e-nav).

{% highlight html %} {% endhighlight %}

Dropdown Group

Add the container e-drops next to the class unified to obtain unified dropdowns, create impressive experiences and structured navigations.

It is recommended to use two or three dropdowns per e-drops container so that they are not so extended, even so you can add as many as you create, although they may break.

Use e-drops unified


{% highlight html %}
More
Dropdown
{% endhighlight %}

Let's add beautiful shadows

Use the fabulous shadows to highlight the (drop-items) even more, choose the one that best suits your project with 8 predetermined options.

You can add the shadows to the element (drop-items) and equally to (e-dropdown) to give better styles.

Check the shadows here

{% highlight html %}
Dropdown
{% endhighlight %}

Add any content and it will grow

You can add child elements such as (a) or (div) the class (drop-item) but even better to add buttons outside this class or notes or alerts among others.



{% highlight html %}
Dropdown
Item

This is a text.

Item
Button Button
{% endhighlight %}