Bulma Dropdown Menu

Bulma - Dropdown

Bulma dropdown menu is basically a container of a dropdown button and dropdown menu. It is used to display related links in a list format.

Steps To Create Bulam CSS Dropdown Menu

  • dropdown - It is a main container for the dropdown.
  • dropdown-trigger - It is a container for dropdown buttons.
  • dropdown-menu It is a togglable menu that is hidden by default.
  • dropdown: It is a main container for the dropdown.
    • dropdown-content - It is a dropdown box having a white background with shadow.
    • dropdown-item - It is a single item in the dropdown list that will be either <a> or <div>.
    • dropdown-divider -It is a horizontal line that is used to separate dropdown items.

Example

General Syntax

Try it now

Dropdown content

Dropdown item might be either an anchor link i. e <a> or <div>.

Example

General Syntax

Try it now

Dropdown: Hoverable or Toggable

The dropdown component consists of two additional modifier classes such as is-hoverable & is-active

  • is-hoverable:- It displays dropdown menu when hovering over the dropdown trigger.
  • is-active: - It is used to show dropdowns all the time.

Example

General Syntax

Try it now

Dropdown Alignment

Following are the dropdown menu alignment methods: right aligned, left aligned & drop up.

Right aligned

To align dropdown menu in the right direction, use .is-right modifier class.

Example

General Syntax

Try it now

Dropdown Menu: Left aligned

Please keep in mind that the dropdown menu is left-aligned by default.

Example

General Syntax

Try it now

Code Explanation

...

Bulma CSS : Dropup Menu

To show the dropdown menu above the dropdown button, use the is-up modifier class.

Example

General Syntax

Try it now