---
title: Pagehead
path: components/pagehead
status: Stable
internal: true
source: 'https://github.com/github/github/tree/master/app/assets/stylesheets/components/pagehead.scss'
symbols: [account-switcher, active, admin, avatar, dropdown-menu-content, experiment-repo-nav, fork, fork-flag, mirror, mirror-flag, octicon, octicon-lock, octicon-mirror, octicon-mute, pagehead, pagehead-actions, pagehead-heading, pagehead-tabs-item, path-divider, png, private, repohead, repohead-details-container, reponav, reponav-dropdown, reponav-item, select-menu, select-menu-modal-holder, selected, underline-nav]
---
Give a page a clear, separated title and optional top nav by adding a `.pagehead`.
## Basic pagehead
In its simplest form, you can build a pagehead with a `pagehead` element with an `h1` child.
```html live
Title
```
### Avatars
Place an avatar inside the `h1` to have margins applied to it. Don't forget the `avatar` class!
Also be sure to add `aria-hidden="true"` to hide the avatar from screenreaders.
```html live
jonrohan
```
### Path divider
For path or breadcrumb patterns, wrap the `/` with `path-divider` to add some nice horizontal spacing.
```html live
```
## Pagehead actions
To add actions on the right side of the `pagehead`, use the `pagehead-actions` element. Place `pagehead-actions` before the `h1` to ensure proper placement.
```html live
```
## Org nav
```html live
```
## Repohead
Use `pagehead` to construct a header and navigation for a repository.
### Base
```html live
```
### Private
```html live
```