Bottom Navigation is typically used in mobile-friendly applications to provide the user with quick access to the most important parts of the app.
A basic bottom navigation has multiple sections with icons. Typically only
one section is set to active at a time.
relative class to ensure that it shows up
in our example rather than the default of being fixed to the bottom of the
screen.
The Bottom Nav sections can also have a simple title passed via the
title attribute, or a more complex title by passing a block
to the section.
= daisy_bottom_nav(css: "relative border border-base-200") do |nav|
- nav.with_section(icon: "home", href: "#", title: "Home")
- nav.with_section(icon: "information-circle", icon_css: "text-blue-600 -rotate-45", href: "#", active: true, title: "Info")
- nav.with_section(icon: "chart-bar", href: "#") do
.font-bold.italic.text-xs.text-red-600.animate-bounce
Stats
You can also use any of the built-in Daisy, Tailwind, or custom colors.
- colors = ["text-primary", "text-secondary", "text-accent", "text-info", "text-success", "text-warning", "text-error", "text-cyan-400", "text-[#449944]"]
- colors.each_with_index do |color, index|
= daisy_bottom_nav(css: "relative border border-base-200") do |nav|
- nav.with_section(icon: "home", href: "#", active: index % 3 == 0, css: color)
- nav.with_section(icon: "information-circle", href: "#", active: index % 3 == 1, css: color)
- nav.with_section(icon: "chart-bar", href: "#", active: index % 3 == 2, css: color)