The Dock component provides a navigation bar fixed to the bottom of the screen, commonly used in mobile interfaces.
A simple dock component with three sections.
We add the relative
class to ensure visibility in the example rather
than the default of being fixed to the bottom of the screen.
The Dock 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_dock(css: "relative border border-base-content") do |dock|
- dock.with_section(icon: "home", href: "#", title: "Home")
- dock.with_section(icon: "information-circle", icon_css: "text-blue-600 -rotate-45", href: "#", active: true, title: "Info")
- dock.with_section(icon: "chart-bar", href: "#") do
.font-bold.italic.text-xs.text-error.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 do |color|
= daisy_dock(css: "relative border border-base-300") do |dock|
- dock.with_section(icon: "home", href: "#", title: "Home", css: color)
- dock.with_section(icon: "information-circle", title: color, href: "#", css: color)
- dock.with_section(icon: "chart-bar", href: "#", title: "Stats", css: color)
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.