PhoenixKitWeb.Components.Core.AdminPageHeader (phoenix_kit v1.7.71)

Copy Markdown View Source

Provides a unified admin page header component with optional back button, title, subtitle, and action slots.

Replaces the 7+ different header patterns previously used across admin templates, providing a consistent inline flex layout with responsive behavior.

Summary

Functions

Renders an admin page header with back navigation, title, and optional actions.

Functions

admin_page_header(assigns)

Renders an admin page header with back navigation, title, and optional actions.

For simple headers, use title and subtitle attributes. For complex headers with rich content (badges, metadata), use inner_block to provide custom title markup that replaces the default title/subtitle rendering.

Attributes

  • back - Navigate path for the back button (renders a <.link>)
  • back_click - Phoenix event name for the back button (renders a <button>)
  • title - Page title as a string attribute
  • subtitle - Page subtitle as a string attribute

Slots

  • :inner_block - Custom title/subtitle markup (overrides title/subtitle attrs)
  • :actions - Action buttons rendered on the right side

Examples

<%!-- Basic --%>
<.admin_page_header back={Routes.path("/admin")} title="User Management" />

<%!-- With subtitle --%>
<.admin_page_header back={Routes.path("/admin")} title="Settings" subtitle="Configure system" />

<%!-- With actions --%>
<.admin_page_header back={Routes.path("/admin/posts")} title="Posts">
  <:actions>
    <button class="btn btn-primary btn-sm">New Post</button>
  </:actions>
</.admin_page_header>

<%!-- Rich title content --%>
<.admin_page_header back={Routes.path("/admin/billing")}>
  <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-base-content">Invoice #123</h1>
  <p class="text-sm text-base-content/60 mt-0.5">Created 2 days ago</p>
</.admin_page_header>

<%!-- phx-click back (for unsaved changes check) --%>
<.admin_page_header back_click="attempt_cancel" title="Page Editor" />

Attributes

  • back (:string) - Defaults to nil.
  • back_click (:string) - Defaults to nil.
  • title (:string) - Defaults to nil.
  • subtitle (:string) - Defaults to nil.

Slots

  • inner_block
  • actions