Navbars are a common way to organize navigation links at the top of a page.
Navbars are simple elements which typically contain start and end
sections, and sometimes a center section. Since the word end
is a
reserved word in Ruby, we have replaced it with tail
for this component.
= daisy_navbar(css: "bg-base-100 border border-base-200 rounded-lg shadow") do |navbar|
- navbar.with_start do
= image_tag("loco-logo.png", class: "h-8")
%span
%em> Loco
%span.font-bold Motion
- # end is a reserved word in Ruby, so we use tail instead
- navbar.with_tail do
= link_to "https://github.com/profoundry-us/loco_motion", target: "_blank", class: "flex items-center space-x-2" do
%svg.w-6.h-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
Navbars items can also contain center sections and dropdowns with menus.
Note that the size of the elements inside the navbar will affect the size of the navbar itself. The navbar will grow to fit the largest element inside it.
= daisy_navbar(css: "bg-base-100 border border-base-200 rounded-lg shadow") 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: "size-14 text-green-600 -rotate-12")
- navbar.with_tail do
= daisy_dropdown(css: "dropdown-end") do |dropdown|
- dropdown.with_title do
= daisy_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"