Navbars

Navbars are a common way to organize navigation links at the top of a page.

Basic Navbar

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.

Preview
Code
= 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

Advanced Navbar

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.

Preview
Code
= 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"
Made with by Profoundry .
Copyright © 2023-2025 Profoundry LLC.
All rights reserved.