<div class="relative">
  
  <!-- White bg header -->  
  <div class="bg-white border-b border-gray-200 p-4 md:p-6 md:pl-8 sticky top-0 z-20">
    <div class="flex flex-col md:flex-row justify-between md:items-center">
      <div class="text-2xl font-normal text-gray-700 flex items-center ">
        
        <%= helpers.render_breadcrumbs separator: helpers.heroicon('chevron-right', style: :solid, class: "w-5 h-5 mx-2 text-gray-300") %>
        
        <!-- Optional content after breadcrumbs -->
        <%= after_breadcrumbs %>
        
      </div>
    </div>
    
    <!-- Optional navigation -->
    <%= navigation %>
  </div>
  
  <div class="flex space-x-3 p-4 py-6 z-20 md:absolute top-0 right-0 md:-top-0.5 md:right-0 h-md:full w-full md:w-auto items-start md:pr-8 justify-end">
    <%= actions %>
  </div>
  
</div>