- 1.4.1

Page Header

Renders a header that is specific to the content of the current page.

Read more Read less

Unlike a site-wide header, which offers consistent navigation and elements like logos throughout the website or application, this component is meant to describe the unique content of each page. For instance, on an article page, it would display the article's title.

It is typically used as a direct child of the <main> element.

Usage

<main>
  <.page_header title="Puppy Profiles" subtitle="Share Your Pup's Story">
    <:action>
      <.button_link patch={~p"/puppies/new"}>Add New Profile</.button_link>
    </:action>
  </.page_header>

  <section>
    <!-- Content -->
  </section>
</main>

With back link:

<main>
  <.page_header title="Puppy Profile">
    <:navigation navigate={~p"/puppies"}>
      Back to puppy list
    </:navigation>
    <:action>
      <.button_link patch={~p"/puppies/new"}>Add New Profile</.button_link>
    </:action>
  </.page_header>

  <section>
    <!-- Content -->
  </section>
</main>

Puppy Profiles

Share Your Pup's Story

Add New Profile
Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
rest :global

Any additional HTML attributes.
subtitle :string

An optional sub title.
Required title * :string

The title for the current page.
action :slot

A slot for action buttons related to the current page.

 
<:action>
  <.button_link patch="/puppies/new">Add New Profile</.button_link>
</:action>
navigation :slot

Slot for a single link rendered before the title, typically used for a back link.
Show slot attributes Hide slot attributes
label :string

Optional aria label for the link. Use if the link has no text content.
href :string
navigate :string
patch :string
on_click :any

Event name or Phoenix.LiveView.JS command.