Skip to content
PatternFly

Masthead

A masthead contains global properties such as logotype, navigation and settings in an organized fashion and it is accessible from all parts of the application. All pages should share a common masthead.

Examples

Basic

Logo
Content

Basic with mixed content

Logo
Content

Display inline

Logo
Content

Display stack

Logo
Content

Display stack, display inline responsive

Logo
Content

Light variant

Logo
Content

Light 200 variant

Logo
Content

Insets

Logo
Content

Documentation

Usage

Class
Applied to
Outcome
.pf-v5-c-masthead
<header>
Initiates the masthead component. Required
.pf-v5-c-masthead__main
<div>
Initiates the masthead main component. Required
.pf-v5-c-masthead__toggle
<span>
Initiates the masthead toggle component.
.pf-v5-c-masthead__brand
<a>, <div>
Initiates the masthead content component.
.pf-v5-c-masthead__content
<div>
Initiates the masthead content component.
.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}
.pf-v5-c-masthead
Modifies masthead horizontal padding at optional breakpoint.
.pf-m-light
.pf-v5-c-masthead
Modifies a masthead component to have a light theme with a background color of --pf-v5-global--BackgroundColor--100.
.pf-m-light-200
.pf-v5-c-masthead
Modifies a masthead component to have a light theme with a background color of --pf-v5-global--BackgroundColor--200.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-masthead.pf-m-light-200--pf-v5-global--Color--100
#151515
.pf-v5-c-masthead.pf-m-light-200--pf-v5-global--Color--200
#6a6e73
.pf-v5-c-masthead.pf-m-light-200--pf-v5-global--BorderColor--100
#d2d2d2
.pf-v5-c-masthead.pf-m-light-200--pf-v5-global--primary-color--100
#06c
.pf-v5-c-masthead.pf-m-light-200--pf-v5-global--link--Color
#06c
.pf-v5-c-masthead.pf-m-light-200--pf-v5-global--link--Color--hover
#004080
.pf-v5-c-masthead.pf-m-light-200--pf-v5-global--BackgroundColor--100
#fff
.pf-v5-c-masthead.pf-m-light-200--pf-v5-global--icon--Color--light
#6a6e73
.pf-v5-c-masthead.pf-m-light-200--pf-v5-global--icon--Color--dark
#151515
.pf-v5-c-masthead.pf-m-light-200--pf-v5-c-masthead--BackgroundColor
#f0f0f0
.pf-v5-c-masthead.pf-m-light-200--pf-v5-c-masthead__main--BorderBottomColor
#d2d2d2
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain--pf-v5-global--Color--100
#fff
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain--pf-v5-global--Color--200
#f0f0f0
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain--pf-v5-global--BorderColor--100
#b8bbbe
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain--pf-v5-global--primary-color--100
#73bcf7
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain--pf-v5-global--link--Color
#2b9af3
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain--pf-v5-global--link--Color--hover
#2b9af3
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain--pf-v5-global--BackgroundColor--100
#151515
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain--pf-v5-global--icon--Color--light
#f0f0f0
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain--pf-v5-global--icon--Color--dark
#fff
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain .pf-v5-c-button--pf-v5-c-button--m-primary--BackgroundColor
#06c
.pf-v5-c-masthead--pf-v5-c-masthead--PaddingLeft
1rem
.pf-v5-c-masthead--pf-v5-c-masthead--PaddingRight
1rem
.pf-v5-c-masthead--pf-v5-c-masthead--BackgroundColor
#151515
.pf-v5-c-masthead--pf-v5-c-masthead--inset
1rem
.pf-v5-c-masthead--pf-v5-c-masthead--xl--inset
1.5rem
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack--GridTemplateColumns
max-content 1fr
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__main--GridColumn
-1 / 1
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__main--MinHeight
4.375rem
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__main--Order
-1
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__main--FlexBasis
100%
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__main--PaddingTop
0.5rem
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__main--PaddingBottom
0.5rem
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__main--MarginRight
0
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__main--before--BorderBottom
1px solid #6a6e73
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__toggle--GridColumn
1
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__content--GridColumn
2
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__content--MinHeight
auto
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__content--Order
1
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__content--PaddingTop
0
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__content--PaddingBottom
0
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__content--MarginLeft
0
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight
calc(1rem * -1)
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft
calc(1rem * -1)
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline--GridTemplateColumns
max-content max-content 1fr
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__main--GridColumn
2
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__main--MinHeight
4.375rem
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__main--Order
0
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__main--FlexBasis
auto
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__main--PaddingTop
0
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__main--PaddingBottom
0
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__main--MarginRight
calc(1.5rem / 2)
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__main--BorderBottom
0
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__toggle--GridColumn
1
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__content--GridColumn
3
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__content--MinHeight
4.375rem
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__content--Order
0
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__content--PaddingTop
0
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__content--PaddingBottom
0
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__content--MarginLeft
calc(1.5rem / 2)
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight
0
.pf-v5-c-masthead--pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft
0
.pf-v5-c-masthead--pf-v5-c-masthead__main--before--Right
calc(1rem * -1)
.pf-v5-c-masthead--pf-v5-c-masthead__main--before--Left
calc(1rem * -1)
.pf-v5-c-masthead--pf-v5-c-masthead__main--before--BorderBottomWidth
1px
.pf-v5-c-masthead--pf-v5-c-masthead__main--before--BorderBottomColor
#6a6e73
.pf-v5-c-masthead--pf-v5-c-masthead__toggle--MarginRight
0.5rem
.pf-v5-c-masthead--pf-v5-c-masthead__toggle--MarginLeft
calc(1rem * -1)
.pf-v5-c-masthead--pf-v5-c-masthead__toggle--c-button--FontSize
1.5rem
.pf-v5-c-masthead--pf-v5-c-masthead--m-light--BackgroundColor
#fff
.pf-v5-c-masthead--pf-v5-c-masthead--m-light__main--BorderBottomColor
#f0f0f0
.pf-v5-c-masthead--pf-v5-c-masthead--m-light-200--BackgroundColor
#f0f0f0
.pf-v5-c-masthead--pf-v5-c-masthead--m-light-200__main--BorderBottomColor
#d2d2d2
.pf-v5-c-masthead--pf-v5-c-masthead--c-toolbar__item--Display
flex
.pf-v5-c-masthead--pf-v5-c-masthead--item-border-color--base
#3c3f42
.pf-v5-c-masthead--pf-v5-c-masthead--c-context-selector--Width
auto
.pf-v5-c-masthead--pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor
#3c3f42
.pf-v5-c-masthead--pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor
#3c3f42
.pf-v5-c-masthead--pf-v5-c-masthead--c-context-selector__toggle--BorderLeftColor
#3c3f42
.pf-v5-c-masthead--pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor
transparent
.pf-v5-c-masthead--pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor
transparent
.pf-v5-c-masthead--pf-v5-c-masthead--c-dropdown__toggle--before--BorderTopColor
#3c3f42
.pf-v5-c-masthead--pf-v5-c-masthead--c-dropdown__toggle--before--BorderRightColor
#3c3f42
.pf-v5-c-masthead--pf-v5-c-masthead--c-dropdown__toggle--before--BorderLeftColor
#3c3f42
.pf-v5-c-masthead--pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor
transparent
.pf-v5-c-masthead--pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor
transparent
.pf-v5-c-masthead--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor
#3c3f42
.pf-v5-c-masthead--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor
#3c3f42
.pf-v5-c-masthead--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor
#3c3f42
.pf-v5-c-masthead--pf-v5-c-masthead--c-toolbar--BackgroundColor
#151515
.pf-v5-c-masthead--pf-v5-c-masthead--c-toolbar--AlignItems--base
center
.pf-v5-c-masthead--pf-v5-c-masthead--c-toolbar__content--PaddingRight
0
.pf-v5-c-masthead--pf-v5-c-masthead--c-toolbar__content--PaddingLeft
0
.pf-v5-c-masthead--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop
1rem
.pf-v5-c-masthead--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight
1rem
.pf-v5-c-masthead--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom
1rem
.pf-v5-c-masthead--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft
1rem
.pf-v5-c-masthead--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth
1px
.pf-v5-c-masthead--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor
#3c3f42
.pf-v5-c-masthead--pf-v5-c-masthead--GridTemplateColumns
max-content 1fr
.pf-v5-c-masthead--pf-v5-c-masthead__main--GridColumn
-1 / 1
.pf-v5-c-masthead--pf-v5-c-masthead__main--MinHeight
4.375rem
.pf-v5-c-masthead--pf-v5-c-masthead__main--Order
-1
.pf-v5-c-masthead--pf-v5-c-masthead__main--FlexBasis
100%
.pf-v5-c-masthead--pf-v5-c-masthead__main--PaddingTop
0.5rem
.pf-v5-c-masthead--pf-v5-c-masthead__main--PaddingBottom
0.5rem
.pf-v5-c-masthead--pf-v5-c-masthead__main--MarginRight
0
.pf-v5-c-masthead--pf-v5-c-masthead__main--before--BorderBottom
1px solid #6a6e73
.pf-v5-c-masthead--pf-v5-c-masthead__content--GridColumn
2
.pf-v5-c-masthead--pf-v5-c-masthead__content--MinHeight
auto
.pf-v5-c-masthead--pf-v5-c-masthead__content--Order
1
.pf-v5-c-masthead--pf-v5-c-masthead__content--PaddingTop
0
.pf-v5-c-masthead--pf-v5-c-masthead__content--PaddingBottom
0
.pf-v5-c-masthead--pf-v5-c-masthead__content--MarginLeft
0
.pf-v5-c-masthead--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight
calc(1rem * -1)
.pf-v5-c-masthead--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft
calc(1rem * -1)
.pf-v5-c-masthead.pf-m-light--pf-v5-c-masthead--BackgroundColor
#fff
.pf-v5-c-masthead.pf-m-light--pf-v5-c-masthead__main--BorderBottomColor
#f0f0f0
.pf-v5-c-masthead .pf-v5-c-toolbar--pf-v5-c-toolbar--BackgroundColor
#151515
.pf-v5-c-masthead .pf-v5-c-toolbar--pf-v5-c-toolbar--AlignItems--base
center
.pf-v5-c-masthead .pf-v5-c-toolbar--pf-v5-c-toolbar__content--PaddingRight
0
.pf-v5-c-masthead .pf-v5-c-toolbar--pf-v5-c-toolbar__content--PaddingLeft
0
.pf-v5-c-masthead .pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--PaddingTop
1rem
.pf-v5-c-masthead .pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--PaddingRight
1rem
.pf-v5-c-masthead .pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--PaddingBottom
1rem
.pf-v5-c-masthead .pf-v5-c-toolbar--pf-v5-c-toolbar__expandable-content--PaddingLeft
1rem
.pf-v5-c-masthead .pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--before--BorderTopColor
#3c3f42
.pf-v5-c-masthead .pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--before--BorderRightColor
#3c3f42
.pf-v5-c-masthead .pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--before--BorderLeftColor
#3c3f42
.pf-v5-c-masthead .pf-v5-c-menu-toggle--pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth
0
.pf-v5-c-masthead .pf-v5-c-context-selector--pf-v5-c-context-selector--Width
auto
.pf-v5-c-masthead .pf-v5-c-context-selector--pf-v5-c-context-selector__toggle--BorderTopColor
#3c3f42
.pf-v5-c-masthead .pf-v5-c-context-selector--pf-v5-c-context-selector__toggle--BorderRightColor
#3c3f42
.pf-v5-c-masthead .pf-v5-c-context-selector--pf-v5-c-context-selector__toggle--BorderLeftColor
#3c3f42
.pf-v5-c-masthead .pf-v5-c-context-selector.pf-m-full-height--pf-v5-c-context-selector__toggle--BorderTopColor
transparent
.pf-v5-c-masthead .pf-v5-c-context-selector.pf-m-full-height--pf-v5-c-context-selector__toggle--BorderBottomColor
transparent
.pf-v5-c-masthead .pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--before--BorderTopColor
#3c3f42
.pf-v5-c-masthead .pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--before--BorderRightColor
#3c3f42
.pf-v5-c-masthead .pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--before--BorderLeftColor
#3c3f42
.pf-v5-c-masthead .pf-v5-c-dropdown.pf-m-full-height--pf-v5-c-dropdown__toggle--before--BorderTopColor
transparent
.pf-v5-c-masthead .pf-v5-c-dropdown.pf-m-full-height--pf-v5-c-dropdown__toggle--before--BorderBottomColor
transparent
.pf-v5-c-masthead__main:last-child--pf-v5-c-masthead__main--MarginRight
0
.pf-v5-c-masthead__content:only-child--pf-v5-c-masthead__content--MarginLeft
0
.pf-v5-c-masthead__toggle ~ .pf-v5-c-masthead__content--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft
calc(0 * -1)
.pf-v5-c-masthead__toggle .pf-v5-c-button--pf-v5-c-button--FontSize
1.5rem
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead--GridTemplateColumns
max-content 1fr
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__main--GridColumn
-1 / 1
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__main--MinHeight
4.375rem
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__main--Order
-1
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__main--FlexBasis
100%
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__main--PaddingTop
0.5rem
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__main--PaddingBottom
0.5rem
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__main--MarginRight
0
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__main--before--BorderBottom
1px solid #6a6e73
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__content--GridColumn
2
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__content--MinHeight
auto
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__content--Order
1
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__content--PaddingTop
0
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__content--PaddingBottom
0
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__content--MarginLeft
0
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight
calc(1rem * -1)
.pf-v5-c-masthead.pf-m-display-stack--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft
calc(1rem * -1)
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead--GridTemplateColumns
max-content max-content 1fr
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__main--GridColumn
2
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__main--MinHeight
4.375rem
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__main--Order
0
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__main--FlexBasis
auto
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__main--PaddingTop
0
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__main--PaddingBottom
0
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__main--MarginRight
calc(1.5rem / 2)
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__main--before--BorderBottom
0
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__content--GridColumn
3
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__content--MinHeight
4.375rem
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__content--Order
0
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__content--PaddingTop
0
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__content--PaddingBottom
0
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__content--MarginLeft
calc(1.5rem / 2)
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight
0
.pf-v5-c-masthead.pf-m-display-inline--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft
0
.pf-v5-c-masthead.pf-m-inset-none--pf-v5-c-masthead--inset
0
.pf-v5-c-masthead.pf-m-inset-sm--pf-v5-c-masthead--inset
0.5rem
.pf-v5-c-masthead.pf-m-inset-md--pf-v5-c-masthead--inset
1rem
.pf-v5-c-masthead.pf-m-inset-lg--pf-v5-c-masthead--inset
1.5rem
.pf-v5-c-masthead.pf-m-inset-xl--pf-v5-c-masthead--inset
2rem
.pf-v5-c-masthead.pf-m-inset-2xl--pf-v5-c-masthead--inset
3rem

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines