Skip to content

Masthead

A masthead contains and organizes global properties like a logo, navigation, and settings for easy and consistent access across all pages of an application.

Examples

Basic

Content

Basic with mixed content

Display inline

Content

Display stack

Content

Display stack, display inline responsive

Content

Insets

Content

Docked

Documentation

Usage

Class
Applied to
Outcome
.pf-v6-c-masthead
<header>
Initiates the masthead component. Required
.pf-v6-c-masthead__main
<div>
Initiates the masthead main component. Required
.pf-v6-c-masthead__toggle
<span>
Initiates the masthead toggle component.
.pf-v6-c-masthead__brand
<div>
Initiates the masthead content component.
.pf-v6-c-masthead__logo
<a>, <div>
Initiates the masthead content component.
.pf-v6-c-masthead__content
<div>
Initiates the masthead content component.
.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}
.pf-v6-c-masthead
Modifies masthead horizontal padding at optional breakpoint.
.pf-m-docked
.pf-v6-c-masthead
Modifies masthead for use with docked nav.

Edit this page on GitHub

Contribute

Community

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat
Copyright © 2014-2026 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines