LocoMotion

Basic Menu

Menus typically contain a list of links or buttons that users can click. The styling is very minimal, just adding a hover effect.

Preview

Code

= daisy_menu do |menu|
  - # Menu Item Group with a title keyword argument
  - menu.with_item(title: "Group 1") do
    = link_to "Item 1 - 1", "#"

  - # Menu Item Group with a title as the first positional argument
  - menu.with_item("Group 2") do
    = link_to "Item 2 - 1", "#"
  - menu.with_item do
    = link_to "Item 2 - 2", "#"

Horizontal Menu

Menus can be displayed horizontally by adding the .menu-horizontal class to the menu. They can also have icons, disabled / active items, and many other options.

Note

We can't actually disable the link since the HTML spec does not allow that (instead you should generally just make it text). However, we can disable the link with CSS and use .pointer-events-none to ensure it cannot be clicked. You may also want to add tabindex: -1 to your link to ensure it cannot be focused with the keyboard.

Preview

Code

= daisy_menu(css: "menu-horizontal") do |menu|
  - menu.with_item do
    = link_to "Item 1", "#"
  - menu.with_item(disabled: true) do
    = link_to "Item 2", "#", tabindex: -1
  - menu.with_item do
    = link_to "Item 3", "#", class: "active"

Nested Menus

Menus can also contain nested menus. This is useful for organizing a large number of options.

Preview

Code

- icon_options = { css: "size-4 mr-1 text-slate-600", variant: :mini }
= daisy_menu(css: "bg-base-100 border border-base-300 rounded-lg shadow-md") do |menu|
  - menu.with_item do
    = link_to "#" do
      = hero_icon("home", **icon_options)
      Home
  - menu.with_item do
    = link_to "#" do
      = hero_icon("bell-alert", **icon_options)
      Notifications
  - menu.with_item(title: "Parent") do
    = daisy_menu do |menu|
      - menu.with_item do
        = link_to "Child 1", "#"
      - menu.with_item do
        = link_to "Child 2", "#"
      - menu.with_item do
        - icon_options[:css] += " !text-yellow-500"
        = link_to "#" do
          Child 3
          = hero_icon("bolt", **icon_options)