HomeAppsModulesGems

Footer

The application footer with copyright, links, and secondary navigation.

On this page

Full Example#

Full footer with feedback link, resource dropdown, copyright, policy links, and social icons.

layout.build_footer do |footer|
  footer.build_left do |left|
    left.build_text_link("Feedback", "#")

    left.build_dropdown(direction: "up") do |dropdown|
      dropdown.build_button("Resources")

      dropdown.build_menu do |menu|
        menu.build_item("Documentation", "#")
        menu.build_item("API Reference", "#")
        menu.build_item("Status Page", "#")
      end
    end
  end

  footer.build_right do |right|
    right.build_text_link("Privacy", "#")
    right.build_text_link("Terms", "#")
    right.build_icon_link("info", "#")
    right.build_icon_link("settings", "#")
    right.build_copyright(start_year: 2024, company_name: "Acme Corp")
  end
end

Position#

The footer is divided into left and right sections. Use build_left and build_right to position items.

layout.build_footer do |footer|
  footer.build_left do |left|
    left.build_text_link("Left content", "#")
  end

  footer.build_right do |right|
    right.build_text_link("Right content", "#")
  end
end

Display copyright information with automatic year range formatting.

© 2024-2026, Acme Corp
ui.build(RapidUI::Layout::Footer::Base) do |footer|
  footer.build_left do |right|
    right.build_copyright(start_year: 2024, company_name: "Acme Corp")
  end
end

Text Link#

Add text-based links for policies, legal pages, or other footer navigation.

layout.build_footer do |footer|
  footer.build_left do |right|
    right.build_text_link("Privacy", "#")
    right.build_text_link("Terms", "#")
    right.build_text_link("Contact", "#")
  end
end

Add icon-only links for compact actions or external resources.

layout.build_footer do |footer|
  footer.build_left do |right|
    right.build_icon_link("info", "#")
    right.build_icon_link("settings", "#")
    right.build_icon_link("user", "#")
  end
end

Add dropdown menus that open upward for additional links. Set direction: "up" since the footer is at the bottom of the page.

layout.build_footer do |footer|
  footer.build_left do |left|
    left.build_dropdown(direction: "up") do |dropdown|
      dropdown.build_button("Legal")

      dropdown.build_menu do |menu|
        menu.build_item("Privacy Policy", "#")
        menu.build_item("Terms of Service", "#")
        menu.build_item("Cookie Settings", "#")
      end
    end
  end
end