9ncbiw
Last Updated: February 25, 2016
·
6.121K
· mkjones
Wcuk

HAML-based dropdown menu in Bootstrap

Slightly left-field but this took me a while to work out. HAML is great but the extra meta and elements needed to make Bootstrap work were a bit of a pain:

HAML code

.nav-collapse.collapse
  %ul.nav
    %li.active
      %a{:href => "#"} Home
    %li.dropdown
      %a.dropdown-toggle{:href => "#", "role" => "button", "data-toggle" => "dropdown", "data-target" => "#"} 
        The dropdown item
        %b.caret
      %ul.dropdown-menu{"role" => "menu"}
        %li
          %a{:href => "#link1"} 
            Dropdown #1
          %a{:href => "#link2"} 
            Dropdown #2
          %a{:href => "#link3"} 
            Dropdown #3
          %a{:href => "#link4"} 
            Dropdown #4
    %li
      %a{:href => "#contact"} Contact

HTML output (Bootstrap)

<ul class="nav">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li class="dropdown">
    <a role="button" href="#" data-toggle="dropdown" data-target="#" class="dropdown-toggle">
      The dropdown item
      <b class="caret"></b>
    </a>
    <ul role="menu" class="dropdown-menu">
      <li>
        <a href="#link1">
          Dropdown #1
        </a>
        <a href="#link2">
          Dropdown #2
        </a>
        <a href="#link3">
          Dropdown #3
        </a>
        <a href="#link4">
          Dropdown #4
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#contact">Contact</a>
  </li>
</ul>
Say Thanks
Respond

5 Responses
Add your response

7341
Bada823c03de1520d96ed0d1527833c1

Hey thanks. This really helped. I was having a hell of a hard time getting it to work with HAML and with this I got it working in 2 minutes.

over 1 year ago ·
12328

Great example! I was having a hard time displaying the caret symbol and this helped a lot.

over 1 year ago ·
16060
Copy of zb normal

hhjggeqghdrtewhj

over 1 year ago ·
18177
Hbojpuq8 normal

Great help when I needed, thanks for the post!

over 1 year ago ·
18830
None

Thanks so much for this! It seems so straight forward, but I was having a hard time figuring out why mine wouldn't work.

over 1 year ago ·