The Dock component provides a navigation bar fixed to the bottom of the screen, commonly used in mobile interfaces.

Basic Dock

A simple dock component with three sections.

Tip

We add the relative class to ensure visibility in the example rather than the default of being fixed to the bottom of the screen.

Preview
Code
= daisy_dock(css: "relative border border-base-300") do |dock|
  - dock.with_section(icon: "home", href: "#")
  - dock.with_section(icon: "information-circle", href: "#", active: true)
  - dock.with_section(icon: "chart-bar", href: "#")

Dock with Titles

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.

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

Colored Dock

You can also use any of the built-in Daisy, Tailwind, or custom colors.

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