Header

The header is a fixed 63px bar containing the logo, optional inline links, and an actions group on the right. By default the actions group shows the theme toggle, Devise login/register buttons (when signed out), and the navigation toggle (when navigation items or a signed-in user are present).

Inline links

For landing pages, use the :l_ui_header_links yield to render plain inline links beside the logo. Combine with l-ui-body--header-contained to constrain the header's inner row to the same width as your page content. The links are hidden below the sm breakpoint; pair with :l_ui_navigation_items if you need a mobile menu.

<% content_for :l_ui_body_class, "l-ui-body--header-contained" %>

<% content_for :l_ui_header_links do %>
  <%= link_to "Features", "#features" %>
  <%= link_to "Pricing", "#pricing" %>
  <%= link_to "Docs", docs_path %>
<% end %>

<%= render template: "layouts/layered_ui/application" %>

Prepend or append actions

Add items either side of the default actions group with the :l_ui_header_actions_start and :l_ui_header_actions_end yields. The default theme toggle, authentication, and navigation toggle remain in place.

<% content_for :l_ui_header_actions_start do %>
  <%= link_to "Docs", docs_path, class: "l-ui-button l-ui-button--ghost l-ui-button--small" %>
<% end %>

<% content_for :l_ui_header_actions_end do %>
  <%= link_to "Help", help_path, class: "l-ui-button l-ui-button--ghost l-ui-button--small" %>
<% end %>

Replace the actions group

For full control over the action area, set :l_ui_header_actions and compose your own bar using the default building blocks. Any helper you omit will not render, and :l_ui_header_actions_start and :l_ui_header_actions_end are skipped when this yield is set.

<% content_for :l_ui_header_actions do %>
  <%= link_to "Docs", docs_path, class: "l-ui-button l-ui-button--ghost l-ui-button--small" %>
  <%= l_ui_theme_toggle %>
  <%= l_ui_authentication %>
  <%= l_ui_navigation_toggle %>
<% end %>

Hide the header

Add the l-ui-body--hide-header modifier to the body to hide the header and reclaim its 63px of vertical space.

<% content_for :l_ui_body_class, "l-ui-body--hide-header" %>

<%= render template: "layouts/layered_ui/application" %>

Override

For full control, override the partial by creating app/views/layouts/layered_ui/_header.html.erb in your application.