Menus are used to display a list of options for users to choose from.
Vertical menus no longer have a default width. Use w-full or other width
classes if you want to control the width.
Menus typically contain a list of links or buttons that users can click. The styling is very minimal, just adding a hover effect.
= daisy_menu(css: "w-56") 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", "#"
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.
Use menu-active, menu-focus, and menu-disabled classes to style menu
items in different states.
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.
Menus can also contain nested menus. This is useful for organizing a large number of options.
- icon_options = { css: "size-4 mr-1 text-slate-600", variant: :mini }
= daisy_menu(css: "w-56 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(css: "w-full") 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)
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.