%article
  %header
    %h1 Buttons
    %a{ href: '/styleguide/' } Back to Index
  %hr
  %section
    .dropdown
      %button.btn.js-dropdown__toggler{ href: '#', id: 'dropdownMenu1'} Dropdown Button
      %ul.dropdown__menu{ role: 'menu', :'aria-labelledby' => 'dropdownMenu1'}
        %li{ role: 'presentation'}
          %a{ role: 'menuitem', href: '#'} Action
        %li{ role: 'presentation'}
          %a{ role: 'menuitem', href: '#'} Another action
        %li{ role: 'presentation'}
          %a{ role: 'menuitem', href: '#'} Something else here
        %li{ role: 'presentation'}
          %a{ role: 'menuitem', href: '#'} Separated link

  %section
    .dropdown.dropdown--open
      %button.btn.btn--active.js-dropdown__toggler{href: '#', id: 'dropdownMenu1'} Dropdown Button
      %ul.dropdown__menu{ role: 'menu', :'aria-labelledby' => 'dropdownMenu1'}
        %li{ role: 'presentation'}
          %a{ role: 'menuitem', href: '#'} Action
        %li{ role: 'presentation'}
          %a{ role: 'menuitem', href: '#'} Another action
        %li{ role: 'presentation'}
          %a{ role: 'menuitem', href: '#'} Something else here
        %li{ role: 'presentation'}
          %a{ role: 'menuitem', href: '#'} Separated link