tabler/docs/content/ui/layout/page-headers.mdx

---
title: Page headers
summary: Page header layouts with a title, a pretitle, breadcrumbs, meta information and action buttons.
description: Ready-to-use page header examples with titles, subtitles, breadcrumbs, and action buttons for consistent page layouts.
related: [/ui/layout/page-layouts, /ui/components/breadcrumb]
---
import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro';

## Simple header

Use the `.page-header` class to combine a pretitle, a page title, and action buttons in one row. The primary action collapses to an icon-only button on small screens.

<Example>
<div class="page-header">
  <div class="row align-items-center">
    <div class="col">
      <div class="page-pretitle">Overview</div>
      <h2 class="page-title">Dashboard</h2>
    </div>
    <div class="col-auto ms-auto">
      <div class="btn-list">
        <span class="d-none d-sm-inline"><a href="#" class="btn">New view</a></span>
        <a href="#" class="btn btn-primary d-none d-sm-inline-block"> <Icon name="plus" /> Create new report </a>
        <a href="#" class="btn btn-primary d-sm-none btn-icon" aria-label="Create new report">
          <Icon name="plus" />
        </a>
      </div>
    </div>
  </div>
</div>
</Example>

## With meta, avatar and actions

Add an [avatar](/ui/components/avatar) and a `.page-subtitle` block with meta information to introduce a profile page. Icons and links in the subtitle give users quick context about the person or item.

<Example>
<div class="page-header">
  <div class="row align-items-center">
    <div class="col-auto">
      <span class="avatar avatar-md" style="background-image: url(/static/avatars/023m.jpg)"></span>
    </div>
    <div class="col">
      <h2 class="page-title">Paweł Kuna</h2>
      <div class="page-subtitle">
        <div class="row">
          <div class="col-auto">
            <Icon name="building-skyscraper" />
            <a href="#" class="text-reset">UI Designer at Tabler</a>
          </div>
          <div class="col-auto">
            <Icon name="users" />
            <a href="#" class="text-reset">194 friends</a>
          </div>
          <div class="col-auto text-success"><Icon name="check" /> Verified</div>
        </div>
      </div>
    </div>
    <div class="col-auto d-none d-md-flex">
      <a href="#" class="btn btn-primary">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" /> <line x1="8" y1="9" x2="16" y2="9" /> <line x1="8" y1="13" x2="14" y2="13" /> </svg> Send message
      </a>
    </div>
  </div>
</div>
</Example>

## With meta, search and actions

Combine the page title with a result count, a search input, and a primary action. The search field hides on small screens to save space.

<Example>
<div class="page-header">
  <div class="row align-items-center">
    <div class="col">
      <h2 class="page-title">Gallery</h2>
      <div class="text-secondary mt-1">1-12 of 241 photos</div>
    </div>
    <div class="col-auto ms-auto d-print-none">
      <div class="d-flex">
        <div class="me-3 d-none d-md-block">
          <div class="input-icon">
            <input type="search" class="form-control" placeholder="Search…" aria-label="Search" />
            <span class="input-icon-addon"><Icon name="search" /></span>
          </div>
        </div>
        <a href="#" class="btn btn-primary"> <Icon name="plus" /> Add photo </a>
      </div>
    </div>
  </div>
</div>
</Example>

## Bordered header

Add `page-header-border` to draw a line under the header, which separates it from the content below.

<Example>
<div class="page-header page-header-border">
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">Improve cards with no border</h2>
        <div class="text-secondary mt-1">
          <a href="#" class="text-reset">#693</a> opened by <a href="#" class="text-body">Jeffie Lewzey</a> in
          <a href="#" class="text-body">Calendar Page</a>
        </div>
      </div>
      <div class="col-auto">
        <div class="btn-list">
          <a href="#" class="btn">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /> <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /> <path d="M16 5l3 3" /> </svg> Edit
          </a>
          <a href="#" class="btn d-none d-md-inline-flex"> <Icon name="bell" /> Subscribe </a>
        </div>
      </div>
    </div>
  </div>
</div>
</Example>

## Header with breadcrumb and actions

A [breadcrumb](/ui/components/breadcrumb) above the title shows where the page sits in the hierarchy, and the actions on the right hold the tasks for this page, such as adding or editing an item.

<Example>
<div class="page-header">
  <div class="row align-items-center mw-100">
    <div class="col">
      <div class="mb-1">
        <ol class="breadcrumb" aria-label="breadcrumbs">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item"><a href="#">Library</a></li>
          <li class="breadcrumb-item active" aria-current="page"><a href="#">Articles</a></li>
        </ol>
      </div>
      <h2 class="page-title">
        <span class="text-truncate"> Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. </span>
      </h2>
    </div>
    <div class="col-auto">
      <div class="btn-list">
        <a href="#" class="btn d-none d-md-inline-flex">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /> <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /> <path d="M16 5l3 3" /> </svg> Edit
        </a>
        <a href="#" class="btn btn-primary">Publish</a>
      </div>
    </div>
  </div>
</div>
</Example>

## Section title

Use `.page-section-title` to split a long page body into sections, for example between groups of cards in a `.row-cards` grid. Add a `.page-section-description` below it to say in one sentence what the section holds.

<Example>
<div class="row row-cards">
  <div class="col-12">
    <h2 class="page-section-title">Line charts</h2>
    <p class="page-section-description">Trends over time, where the change between points matters more than single values.</p>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-body">
        <h3 class="card-title">Revenue by plan</h3>
        <p class="text-secondary mb-0">Monthly revenue of each plan.</p>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-body">
        <h3 class="card-title">CPU load</h3>
        <p class="text-secondary mb-0">Load of web servers and workers in one day.</p>
      </div>
    </div>
  </div>
</div>
</Example>

The title sets its own size and top margin, so it looks the same on an `h2`, an `h3` or a `div`. The space below comes from the grid gutter.

## Accessibility

- The page title belongs in an `h1`, and there should be exactly one per page. `page-title` is a style, not a heading.
- A section title is a real heading. Use an `h2` under the page `h1`, and an `h3` for card titles inside that section.
- The pretitle is context, not a heading. Keep it a `div` so it does not break the heading order.
- Buttons in `page-header` come after the title in the markup even when they sit to its right. That is the order they should be read in.
- An icon-only action needs an `aria-label`.
- A search field in the header needs a label. When the design has no room, use `aria-label` and `type="search"`.