Skip to main content
Maquina
Docs components

Header — Maquina Components

Header component for Rails. Page header for sidebar layouts with breadcrumbs and actions. ERB partial with Tailwind CSS. Copy, paste, customize.

Quick Reference

Parameters

Parameter Type Default Description
css_classes String "" Additional CSS classes
**html_options Hash {} HTML attributes (id:, data:, etc.)

Data Attributes

Component Identifier

Attribute Element Description
data-component="header" <header> Main component identifier

Basic Usage

<%= render "components/header" do %>
  <%= render "components/sidebar/trigger" %>
  <%= render "components/separator", orientation: :vertical %>
  <%= breadcrumbs({"Dashboard" => dashboard_path}, @page_title) %>
<% end %>

Examples

With Breadcrumbs

<%= render "components/header" do %>
  <%= render "components/sidebar/trigger" %>
  <%= render "components/separator", orientation: :vertical %>
  <%= breadcrumbs(
    {"Dashboard" => dashboard_path, "Users" => users_path},
    "John Doe"
  ) %>
<% end %>

With Actions

<%= render "components/header" do %>
  <%= render "components/sidebar/trigger" %>
  <%= render "components/separator", orientation: :vertical %>
  <%= breadcrumbs({"Projects" => projects_path}, @project.name) %>
  
  <div class="ml-auto flex items-center gap-2">
    <%= link_to "Edit", edit_project_path(@project), data: { component: "button", variant: "outline", size: "sm" } %>
    <%= link_to "Delete", project_path(@project), data: { component: "button", variant: "destructive", size: "sm" }, method: :delete %>
  </div>
<% end %>

<%= render "components/header" do %>
  <%= render "components/sidebar/trigger" %>
  <%= render "components/separator", orientation: :vertical %>
  
  <div class="flex-1 max-w-md">
    <%= form_with url: search_path, method: :get, class: "relative" do |f| %>
      <%= icon_for :search, class: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" %>
      <%= f.search_field :q, data: { component: "input" }, class: "pl-10 h-8", placeholder: "Search..." %>
    <% end %>
  </div>
  
  <div class="ml-auto flex items-center gap-2">
    <%= render "components/dropdown_menu" do %>
    <% end %>
  </div>
<% end %>

Simple Page Title

<%= render "components/header" do %>
  <%= render "components/sidebar/trigger" %>
  <%= render "components/separator", orientation: :vertical %>
  <h1 class="text-sm font-medium">Dashboard</h1>
<% end %>

Real-World Patterns

Standard App Header

<%= render "components/header" do %>
  <%= render "components/sidebar/trigger" %>
  <%= render "components/separator", orientation: :vertical %>
  
  <%= responsive_breadcrumbs(@breadcrumb_links, @breadcrumb_current) %>
  
  <div class="ml-auto flex items-center gap-3">
    <button type="button" data-component="button" data-variant="ghost" data-size="icon-sm" class="relative">
      <%= icon_for :bell, class: "size-4" %>
      <span class="absolute -top-1 -right-1 size-4 rounded-full bg-destructive text-destructive-foreground text-xs flex items-center justify-center">3</span>
    </button>
    
    <%= dropdown_menu do |menu| %>
      <% menu.trigger variant: :ghost, size: :sm do %>
        <%= image_tag current_user.avatar, class: "size-6 rounded-full" %>
      <% end %>
      <% menu.content align: :end do %>
        <% menu.label { current_user.name } %>
        <% menu.separator %>
        <% menu.item "Profile", href: profile_path, icon: :user %>
        <% menu.item "Settings", href: settings_path, icon: :settings %>
        <% menu.separator %>
        <% menu.item "Logout", href: logout_path, method: :delete, icon: :log_out %>
      <% end %>
    <% end %>
  </div>
<% end %>

With Tabs

<%= render "components/header" do %>
  <%= render "components/sidebar/trigger" %>
  <%= render "components/separator", orientation: :vertical %>
  
  <nav class="flex items-center gap-1">
    <%= link_to "Overview", project_path(@project), 
      class: "px-3 py-1.5 text-sm rounded-md #{'bg-accent text-accent-foreground' if current_page?(project_path(@project))}" %>
    <%= link_to "Tasks", project_tasks_path(@project),
      class: "px-3 py-1.5 text-sm rounded-md #{'bg-accent text-accent-foreground' if current_page?(project_tasks_path(@project))}" %>
    <%= link_to "Settings", edit_project_path(@project),
      class: "px-3 py-1.5 text-sm rounded-md #{'bg-accent text-accent-foreground' if current_page?(edit_project_path(@project))}" %>
  </nav>
<% end %>

Theme Variables

var(--background)
var(--border)

Customization

Fixed Height

The header has a fixed height for consistency with sidebar layouts:

[data-component="header"] {
  @apply h-14;
}

<%= render "components/header", css_classes: "sticky top-0 z-50" do %>
<% end %>

Accessibility

  • Uses semantic <header> element
  • Works with skip links for keyboard navigation
  • Provides consistent landmark for screen readers

File Structure

app/views/components/
└── _header.html.erb

app/assets/stylesheets/header.css
docs/header.md