Bulma Navbar

Bulma Navbar

Steps To Create Bulma CSS Dropdown Menu

  • dropdown - It is a main container for the dropdown.
  • dropdown-trigger - It is a container for the dropdown button.
  • dropdown-menu It is a toggleable menu that is hidden by default.
  • dropdown: It is the 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 of 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

Navbar brand

The navbar is placed in the left direction of the navbar. It can contain:

  • a number of navbar-item
  • The navbar-burger as last-child

Example

On the desktop >=1024, the navbar brand will only take up the space it needs.

General Syntax

Try it now

Code Explanation

The navbar brand is shown on the both touch devices < 1024px and desktop >=1024px.Always use a few navbar items to avoid the horizontal overflow on the small devices.

Navbar Hamburger Menu

It is also known as hamburger menu that only appears on touch devices. It is the last child of the navbar-brand.It has also contain three empty span tag in order to visualize the hamburger lines or the cross(when active).

General Syntax

Try it now

Code Explanation

You can add the modifier class is-active to turn it into a cross.