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.

<% l_ui_add_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.

<% l_ui_add_body_class "l-ui-body--hide-header" %>

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

Glass header

Add l-ui-body--glass-header for a glass header: it turns translucent and blurs whatever scrolls beneath it, dropping the solid bottom border. On its own, page content keeps its normal top padding and slides under the glass bar as you scroll.

To start the page content at very top of the viewport, behind the header, also add l-ui-body--flush-top - it zeroes the page's top gutter so the first section reaches the top edge and shows through a glass header. Give the hero its own internal top padding (at least --header-height) so its content clears the bar.

<% l_ui_add_body_class "l-ui-body--glass-header", "l-ui-body--flush-top" %>

<%= 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.