View as markdownAsk ChatGPTAsk Claude

Page headers

Page header layouts with a title, a pretitle, breadcrumbs, meta information and action buttons.

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.

Overview

Dashboard

New view Create new report 
<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">
          <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M12 5l0 14" />
            <path d="M5 12l14 0" />
          </svg> Create new report
        </a>
        <a href="#" class="btn btn-primary d-sm-none btn-icon" aria-label="Create new report">
          <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M12 5l0 14" />
            <path d="M5 12l14 0" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>

With meta, avatar and actions

Add an 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.

Paweł Kuna

UI Designer at Tabler
194 friends
Verified
Send message
<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">
            <!-- Download SVG icon from http://tabler.io/icons/icon/building-skyscraper -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
              <path d="M3 21l18 0" />
              <path d="M5 21v-14l8 -4v18" />
              <path d="M19 21v-10l-6 -4" />
              <path d="M9 9l0 .01" />
              <path d="M9 12l0 .01" />
              <path d="M9 15l0 .01" />
              <path d="M9 18l0 .01" />
            </svg>
            <a href="#" class="text-reset">UI Designer at Tabler</a>
          </div>
          <div class="col-auto">
            <!-- Download SVG icon from http://tabler.io/icons/icon/users -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
              <path d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
              <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
              <path d="M16 3.13a4 4 0 0 1 0 7.75" />
              <path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
            </svg>
            <a href="#" class="text-reset">194 friends</a>
          </div>
          <div class="col-auto text-success">
            <!-- Download SVG icon from http://tabler.io/icons/icon/check -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
              <path d="M5 12l5 5l10 -10" />
            </svg> 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>

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.

Gallery

1-12 of 241 photos
Add photo 
<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">
              <!-- Download SVG icon from http://tabler.io/icons/icon/search -->
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
                <path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
                <path d="M21 21l-6 -6" />
              </svg>
            </span>
          </div>
        </div>
        <a href="#" class="btn btn-primary">
          <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
            <path d="M12 5l0 14" />
            <path d="M5 12l14 0" />
          </svg> Add photo
        </a>
      </div>
    </div>
  </div>
</div>

Bordered header

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

Improve cards with no border

#693 opened by Jeffie Lewzey in Calendar Page
Edit Subscribe 
<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">
            <!-- Download SVG icon from http://tabler.io/icons/icon/bell -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
              <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
              <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
            </svg> Subscribe
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Header with breadcrumb and actions

A 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.

  1. Home
  2. Library
  3. Articles

Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.

EditPublish
<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>

Accessibility

  • The page title belongs in an h1, and there should be exactly one per page. page-title is a style, not a heading.
  • 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".
Page layouts

Combine containers, navigation and page structure into a complete dashboard layout, step by step.

Breadcrumb

A breadcrumb trail for the current page location, with separators, icons and a muted style.

On this page

130 sleek illustrations for your startup's visual identity.