- 1.5.0

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.

Maturity: Developing

Usage

<main>
  <.page_header subtitle="Share Your Pup's Story">
    <:title>Puppy Profiles</:title>
    <: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</:title>
    <: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

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.
action :slot

A slot for action buttons related to the current page.
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. Ignored for an entry without href, navigate, patch or on_click, which renders its content without a link.
href :string
navigate :string
patch :string
on_click :any

Event name or Phoenix.LiveView.JS command.
Required title * :slot

The title for the current page.

 
<:title>Puppy Profiles</:title>