HomeAppsModulesGems

Header

Configure the application header with navigation, search, and user actions.

On this page

Full Example#

Complete header setup with navigation, search, and user actions.

DashboardProjects
Settings
ProfilePreferences
Sign Out 
layout.build_header do |header|
  header.build_left do |left|
    left.build_icon_link("menu", "#", size: 24)

    left.build_dropdown(skip_caret: true) do |dropdown|
      dropdown.build_button(new_icon("layout-grid"))

      dropdown.build_menu do |menu|
        menu.build_item("Dashboard", "#")
        menu.build_item("Projects", "#")
        menu.build_divider
        menu.build_item("Settings", "#")
      end
    end

    left.build_search_bar(static_path: "search.json")
  end

  header.build_right do |right|
    right.build_text("Jane Doe", class: "hidden lg:block")

    right.build_icon_link("info", "#")
    right.build_icon_link("settings", "#")

    right.build_dropdown(align: "right") do |dropdown|
      dropdown.build_button("Account")

      dropdown.build_menu do |menu|
        menu.build_item("Profile", "#")
        menu.build_item("Preferences", "#")
        menu.build_divider
        menu.build_item("Sign Out", "#")
      end
    end
  end
end

Positioning#

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

Left side content
Right side content
layout.build_header do |header|
  header.build_left do |left|
    left.build_text("Left side content")
  end

  header.build_right do |right|
    right.build_text("Right side content")
  end
end

Add a search input with keyboard shortcut hints and AJAX results dropdown.

layout.build_header do |header|
  header.build_left do |left|
    left.build_search_bar(static_path: "/search.json")
  end
end

Add dropdown menus for navigation or user actions. Supports nested menu items and dividers.

DashboardSettings
Logout
ProfileSign Out 
layout.build_header do |header|
  header.build_left do |left|
    left.build_dropdown(skip_caret: true) do |dropdown|
      dropdown.build_button(new_icon("layout-grid"))

      dropdown.build_menu do |menu|
        menu.build_item("Dashboard", "#")
        menu.build_item("Settings", "#")
        menu.build_divider
        menu.build_item("Logout", "#")
      end
    end
  end

  header.build_right do |right|
    right.build_dropdown do |dropdown|
      dropdown.build_button("Account")

      dropdown.build_menu do |menu|
        menu.build_item("Profile", "#")
        menu.build_item("Sign Out", "#")
      end
    end
  end
end

Text#

Display plain text in the header, useful for showing the current user's name or status.

Welcome, Jane
username
layout.build_header do |header|
  header.build_left do |left|
    left.build_text("Welcome, Jane")
  end

  header.build_right do |right|
    right.build_text("username")
  end
end

Text Link#

Add text-based navigation links that render as styled buttons.

DocumentationAPIPricing
layout.build_header do |header|
  header.build_left do |left|
    left.build_text_link("Documentation", "#")
    left.build_text_link("API", "#")
    left.build_text_link("Pricing", "#")
  end
end

Add icon-only navigation links, perfect for compact actions like settings or notifications.

layout.build_header do |header|
  header.build_right do |right|
    right.build_icon_link("info", "#")
    right.build_icon_link("settings", "#")
    right.build_icon_link("circle-question-mark", "#")
  end
end