<divclass="dropdown is-active"><divclass="dropdown-trigger"><buttonclass="button"aria-haspopup="true"aria-controls="dropdown-menu"><span>Dropdown button</span><spanclass="icon is-small"><iclass="fas fa-angle-down"aria-hidden="true"></i></span></button></div><divclass="dropdown-menu"id="dropdown-menu"role="menu"><divclass="dropdown-content"><ahref="#"class="dropdown-item"> Dropdown item </a><aclass="dropdown-item"> Other dropdown item </a><ahref="#"class="dropdown-item is-active"> Active dropdown item </a><ahref="#"class="dropdown-item"> Other dropdown item </a><hrclass="dropdown-divider"/><ahref="#"class="dropdown-item"> With a divider </a></div></div></div>
<divclass="dropdown is-active"><divclass="dropdown-trigger"><buttonclass="button"aria-haspopup="true"aria-controls="dropdown-menu2"><span>Content</span><spanclass="icon is-small"><iclass="fas fa-angle-down"aria-hidden="true"></i></span></button></div><divclass="dropdown-menu"id="dropdown-menu2"role="menu"><divclass="dropdown-content"><divclass="dropdown-item"><p>
You can insert <strong>any type of content</strong> within the
dropdown menu.
</p></div><hrclass="dropdown-divider"/><divclass="dropdown-item"><p>You simply need to use a <code><div></code> instead.</p></div><hrclass="dropdown-divider"/><ahref="#"class="dropdown-item"> This is a link </a></div></div></div>
is-hoverable: the dropdown will show up when
hovering the dropdown-trigger
is-active: the dropdown will show up
all the time
While the CSS :hover implementation works perfectly, the
is-active class is available for users who want to control the
display of the dropdown with JavaScript.
<divclass="dropdown"><divclass="dropdown-trigger"><buttonclass="button"aria-haspopup="true"aria-controls="dropdown-menu3"><span>Click me</span><spanclass="icon is-small"><iclass="fas fa-angle-down"aria-hidden="true"></i></span></button></div><divclass="dropdown-menu"id="dropdown-menu3"role="menu"><divclass="dropdown-content"><ahref="#"class="dropdown-item"> Overview </a><ahref="#"class="dropdown-item"> Modifiers </a><ahref="#"class="dropdown-item"> Grid </a><ahref="#"class="dropdown-item"> Form </a><ahref="#"class="dropdown-item"> Elements </a><ahref="#"class="dropdown-item"> Components </a><ahref="#"class="dropdown-item"> Layout </a><hrclass="dropdown-divider"/><ahref="#"class="dropdown-item"> More </a></div></div></div>
Example
You can insert any type of content within the
dropdown menu.
HTML
<divclass="dropdown is-hoverable"><divclass="dropdown-trigger"><buttonclass="button"aria-haspopup="true"aria-controls="dropdown-menu4"><span>Hover me</span><spanclass="icon is-small"><iclass="fas fa-angle-down"aria-hidden="true"></i></span></button></div><divclass="dropdown-menu"id="dropdown-menu4"role="menu"><divclass="dropdown-content"><divclass="dropdown-item"><p>
You can insert <strong>any type of content</strong> within the
dropdown menu.
</p></div></div></div></div>
You can add the is-right modifier to have a
right-aligned dropdown.
Example
The dropdown is left-aligned by default.
HTML
<divclass="dropdown is-active"><divclass="dropdown-trigger"><buttonclass="button"aria-haspopup="true"aria-controls="dropdown-menu5"><span>Left aligned</span><spanclass="icon is-small"><iclass="fas fa-angle-down"aria-hidden="true"></i></span></button></div><divclass="dropdown-menu"id="dropdown-menu5"role="menu"><divclass="dropdown-content"><divclass="dropdown-item"><p>The dropdown is <strong>left-aligned</strong> by default.</p></div></div></div></div>
Example
Add the is-right modifier for a
right-aligned dropdown.
HTML
<divclass="dropdown is-right is-active"><divclass="dropdown-trigger"><buttonclass="button"aria-haspopup="true"aria-controls="dropdown-menu6"><span>Right aligned</span><spanclass="icon is-small"><iclass="fas fa-angle-down"aria-hidden="true"></i></span></button></div><divclass="dropdown-menu"id="dropdown-menu6"role="menu"><divclass="dropdown-content"><divclass="dropdown-item"><p>
Add the <code>is-right</code> modifier for a
<strong>right-aligned</strong> dropdown.
</p></div></div></div></div>
You can add the is-up modifier to have a dropdown menu that
appears above the dropdown button.
Example
You can add the is-up modifier to have a dropdown menu
that appears above the dropdown button.
HTML
<divclass="dropdown is-up"><divclass="dropdown-trigger"><buttonclass="button"aria-haspopup="true"aria-controls="dropdown-menu7"><span>Dropup button</span><spanclass="icon is-small"><iclass="fas fa-angle-up"aria-hidden="true"></i></span></button></div><divclass="dropdown-menu"id="dropdown-menu7"role="menu"><divclass="dropdown-content"><divclass="dropdown-item"><p>
You can add the <code>is-up</code> modifier to have a dropdown menu
that appears above the dropdown button.
</p></div></div></div></div>
