Navbars

Basic Navbar

Navbars are simple elements which typically contain start and end sections, and sometimes a center section.

.w-full{ class: "max-w-[800px]" }
  = daisy_navbar(css: "bg-base-100 border border-base-200 rounded-lg shadow-xs") do |navbar|
    - navbar.with_start do
      = image_tag("loco-logo.png", class: "h-8")
      %span
        %em> Loco
        %span.font-bold Motion

    - navbar.with_end do
      = link_to "https://github.com/profoundry-us/loco_motion", target: "_blank", class: "flex items-center space-x-2" do
        %svg.size-6{role: "img", viewbox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", class: "dark:fill-base-100"}
          %title GitHub
          %path{d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"}
        %span
        GitHub

Advanced Navbar

Navbars items can also contain center sections and dropdowns with menus.

Note

Note that the size of the elements inside the navbar will affect the height of the navbar itself. The navbar will grow to fit the largest element inside it.

Try hovering the green icon below to see the change.

Preview

Code

.w-full{ class: "max-w-[800px]" }
  = daisy_navbar(css: "bg-base-100 border border-base-200 rounded-lg shadow-xs") do |navbar|
    - navbar.with_start(css: "text-lg italic") do
      Code-<strong>Fur</strong>-Life

    - navbar.with_center do
      = hero_icon("code-bracket-square", css: "transition-all size-14 hover:size-20 text-green-600 -rotate-12")

    - navbar.with_end do
      = daisy_dropdown(css: "dropdown-end") do |dropdown|
        - dropdown.with_button(css: "btn-ghost", title: "Languages", right_icon: "chevron-down")

        - dropdown.with_item do
          = link_to "Ruby", "https://www.ruby-lang.org", target: "_blank"
        - dropdown.with_item do
          = link_to "Rails", "http://www.rubyonrails.org", target: "_blank"
        - dropdown.with_item do
          = link_to "Hotwire", "https://hotwired.dev/", target: "_blank"

Basic Navbar

Advanced Navbar

Docs

Guides

Hero

Daisy