Skip to content
PatternFly logo

Navigation

A navigation organizes an application's structure and content, making it easy to find information and accomplish tasks. Navigation communicates relationships, context, and actions a user can take within an application.

Examples

Default

Grouped nav

Grouped nav, no titles

Grouped nav, no titles, no margin top

Expanded

Expanded with subnav titles

Mixed

Expandable, third level

Horizontal

Horizontal overflow

Horizontal subnav

Horizontal subnav overflow

Legacy tertiary

Legacy tertiary overflow

Default in light mode

Expanded in light mode

Documentation

Overview

The navigation system relies on several different sub-components:

  • .pf-c-nav__list - default navigation list. It is the basis for both default and expandable, vertical navigation.

Accessibility

Attribute
Applied to
Outcome
aria-label="[landmark description]"
.pf-c-nav
Describes <nav> landmark.
aria-label="[section title]"
.pf-c-nav__section
Describes a nav <section>, where a .pf-c-nav__section-title is not present.
aria-labelledby="[id value of link describing subnav]"
.pf-c-nav__subnav
Gives the subnav <section> landmark an accessible name by referring to the element that provides the subnav <section> landmark title.
aria-expanded="false"
.pf-c-nav__link
Indicates that subnav section is hidden.
aria-expanded="true"
.pf-c-nav__link
Indicates that subnav section is visible.
hidden
.pf-c-nav__subnav
Indicates that the subnav section is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies.
disabled
.pf-c-nav__scroll-button
Indicates that a scroll button is disabled, when at the first or last item of a list. Required when disabled
aria-current="page"
.pf-c-nav__link
Indicates the current page link. Can only occur once on page.
aria-haspopup="true"
.pf-c-nav__link
Declares that a nav item has a submenu.

Usage

Class
Applied to
Outcome
.pf-c-nav
<nav>
Initiates a primary nav element.
.pf-c-nav__subnav
<section>
Initiates a subnav section.
.pf-c-nav__list
<ul>
Initiates nav list.
.pf-c-nav__item
<li>
Initiates nav list item.
.pf-c-nav__link
<a>
Initiates nav list link.
.pf-c-nav__section
<section>
Initiates a nav section element.
.pf-c-nav__section-title
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Initiates a nav section title.
.pf-c-nav__toggle
<span>
Initiates the nav toggle wrapper.
.pf-c-nav__toggle-icon
<span>
Initiates a nav toggle icon wrapper.
.pf-c-nav__scroll-button
<button>
Initiates a nav scroll button. Required for horizontal navs
.pf-m-horizontal
.pf-c-nav
Modifies nav for the horizontal variation.
.pf-m-no-title
.pf-c-nav__section
Modifies nav section margin top to 0.
.pf-m-horizontal-subnav
.pf-c-nav
Modifies nav for the horizontal subnav variation.
.pf-m-tertiary
.pf-c-nav
Modifies nav for the tertiary variation.
.pf-m-light
.pf-c-nav
Modifies nav for the light variation. Note: only for use with vertical navs, and requires .pf-m-light on the page component's sidebar element (.pf-c-page__sidebar).
.pf-m-flyout
.pf-c-nav__item
Modifies nav item for the flyout variation.
.pf-m-scrollable
.pf-c-nav
Modifies nav for the scrollable state.
.pf-m-expandable
.pf-c-nav__item
Modifies for the expandable state.
.pf-m-expanded
.pf-c-nav__item
Modifies for the expanded state.
.pf-m-current
.pf-c-nav__link
Modifies for the current state.
.pf-m-hover
.pf-c-nav__link
Modifies for the hover state.
.pf-m-start
.pf-c-nav__toggle
Modifies nav toggle to align left.

CSS variables

.pf-c-nav--pf-c-nav--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-nav--pf-c-nav--m-light__item--before--BorderColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__link--Color
#151515
.pf-c-nav--pf-c-nav--m-light__link--hover--Color
#151515
.pf-c-nav--pf-c-nav--m-light__link--focus--Color
#151515
.pf-c-nav--pf-c-nav--m-light__link--active--Color
#151515
.pf-c-nav--pf-c-nav--m-light__link--m-current--Color
#151515
.pf-c-nav--pf-c-nav--m-light__link--hover--BackgroundColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__link--focus--BackgroundColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__link--active--BackgroundColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__link--m-current--BackgroundColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__link--before--BorderColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__link--after--BorderColor
#06c
.pf-c-nav--pf-c-nav--m-light__link--m-current--after--BorderColor
#06c
.pf-c-nav--pf-c-nav--m-light__section-title--Color
#6a6e73
.pf-c-nav--pf-c-nav--m-light__section-title--BorderBottomColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light--c-divider--BackgroundColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-light__subnav__link--hover--after--BorderColor
#d2d2d2
.pf-c-nav--pf-c-nav--m-light__subnav__link--focus--after--BorderColor
#d2d2d2
.pf-c-nav--pf-c-nav--m-light__subnav__link--active--after--BorderColor
#d2d2d2
.pf-c-nav--pf-c-nav--m-light__subnav__link--m-current--after--BorderColor
#06c
.pf-c-nav--pf-c-nav__item--MarginTop
0
.pf-c-nav--pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor
#4f5255
.pf-c-nav--pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth
4px
.pf-c-nav--pf-c-nav__item__item__link--PaddingRight
2rem
.pf-c-nav--pf-c-nav__item__item__toggle--FontSize
0.875rem
.pf-c-nav--pf-c-nav__item__toggle-icon--Rotate
0
.pf-c-nav--pf-c-nav__item--m-expanded__toggle-icon--Rotate
90deg
.pf-c-nav--pf-c-nav__item--before--BorderColor
#3c3f42
.pf-c-nav--pf-c-nav__item--before--BorderWidth
1px
.pf-c-nav--pf-c-nav__link--FontSize
1rem
.pf-c-nav--pf-c-nav__link--FontWeight
400
.pf-c-nav--pf-c-nav__link--PaddingTop
1rem
.pf-c-nav--pf-c-nav__link--PaddingRight
1rem
.pf-c-nav--pf-c-nav__link--PaddingBottom
1rem
.pf-c-nav--pf-c-nav__link--PaddingLeft
1rem
.pf-c-nav--pf-c-nav__link--xl--PaddingRight
1.5rem
.pf-c-nav--pf-c-nav__link--xl--PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav__link--Color
#fff
.pf-c-nav--pf-c-nav__link--hover--Color
#fff
.pf-c-nav--pf-c-nav__link--focus--Color
#fff
.pf-c-nav--pf-c-nav__link--active--Color
#fff
.pf-c-nav--pf-c-nav__link--m-current--Color
#fff
.pf-c-nav--pf-c-nav__link--BackgroundColor
transparent
.pf-c-nav--pf-c-nav__link--hover--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__link--focus--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__link--active--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__link--m-current--BackgroundColor
#4f5255
.pf-c-nav--pf-c-nav__link--OutlineOffset
calc(0.25rem * -1)
.pf-c-nav--pf-c-nav__link--before--BorderColor
#3c3f42
.pf-c-nav--pf-c-nav__link--before--BorderBottomWidth
1px
.pf-c-nav--pf-c-nav__link--hover--before--BorderBottomWidth
0
.pf-c-nav--pf-c-nav__link--focus--before--BorderBottomWidth
0
.pf-c-nav--pf-c-nav__link--active--before--BorderBottomWidth
0
.pf-c-nav--pf-c-nav__link--m-current--before--BorderBottomWidth
0
.pf-c-nav--pf-c-nav__link--after--BorderColor
#73bcf7
.pf-c-nav--pf-c-nav__link--hover--after--BorderColor
#73bcf7
.pf-c-nav--pf-c-nav__link--focus--after--BorderColor
#73bcf7
.pf-c-nav--pf-c-nav__link--active--after--BorderColor
#73bcf7
.pf-c-nav--pf-c-nav__link--m-current--after--BorderColor
#73bcf7
.pf-c-nav--pf-c-nav__link--after--BorderLeftWidth
0
.pf-c-nav--pf-c-nav__link--hover--after--BorderLeftWidth
0
.pf-c-nav--pf-c-nav__link--focus--after--BorderLeftWidth
0
.pf-c-nav--pf-c-nav__link--active--after--BorderLeftWidth
0
.pf-c-nav--pf-c-nav__link--m-current--after--BorderLeftWidth
4px
.pf-c-nav--pf-c-nav--m-horizontal__link--PaddingTop
0.5rem
.pf-c-nav--pf-c-nav--m-horizontal__link--PaddingRight
1rem
.pf-c-nav--pf-c-nav--m-horizontal__link--PaddingBottom
0.5rem
.pf-c-nav--pf-c-nav--m-horizontal__link--PaddingLeft
1rem
.pf-c-nav--pf-c-nav--m-horizontal__link--lg--PaddingTop
1.5rem
.pf-c-nav--pf-c-nav--m-horizontal__link--lg--PaddingBottom
1.5rem
.pf-c-nav--pf-c-nav--m-horizontal__link--Right
1rem
.pf-c-nav--pf-c-nav--m-horizontal__link--Left
1rem
.pf-c-nav--pf-c-nav--m-horizontal__link--Color
#d2d2d2
.pf-c-nav--pf-c-nav--m-horizontal__link--hover--Color
#73bcf7
.pf-c-nav--pf-c-nav--m-horizontal__link--focus--Color
#73bcf7
.pf-c-nav--pf-c-nav--m-horizontal__link--active--Color
#73bcf7
.pf-c-nav--pf-c-nav--m-horizontal__link--m-current--Color
#73bcf7
.pf-c-nav--pf-c-nav--m-horizontal__link--BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-horizontal__link--hover--BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-horizontal__link--focus--BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-horizontal__link--active--BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-horizontal__link--m-current--BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-horizontal__link--before--BorderColor
#73bcf7
.pf-c-nav--pf-c-nav--m-horizontal__link--before--BorderWidth
0
.pf-c-nav--pf-c-nav--m-horizontal__link--hover--before--BorderWidth
3px
.pf-c-nav--pf-c-nav--m-horizontal__link--focus--before--BorderWidth
3px
.pf-c-nav--pf-c-nav--m-horizontal__link--active--before--BorderWidth
3px
.pf-c-nav--pf-c-nav--m-horizontal__link--m-current--before--BorderWidth
3px
.pf-c-nav--pf-c-nav--m-tertiary__link--PaddingTop
0.5rem
.pf-c-nav--pf-c-nav--m-tertiary__link--PaddingRight
1rem
.pf-c-nav--pf-c-nav--m-tertiary__link--PaddingBottom
0.5rem
.pf-c-nav--pf-c-nav--m-tertiary__link--PaddingLeft
1rem
.pf-c-nav--pf-c-nav--m-tertiary__link--Right
1rem
.pf-c-nav--pf-c-nav--m-tertiary__link--Left
1rem
.pf-c-nav--pf-c-nav--m-tertiary__link--Color
#151515
.pf-c-nav--pf-c-nav--m-tertiary__link--hover--Color
#06c
.pf-c-nav--pf-c-nav--m-tertiary__link--focus--Color
#06c
.pf-c-nav--pf-c-nav--m-tertiary__link--active--Color
#06c
.pf-c-nav--pf-c-nav--m-tertiary__link--m-current--Color
#06c
.pf-c-nav--pf-c-nav--m-tertiary__link--BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-tertiary__link--hover--BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-tertiary__link--focus--BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-tertiary__link--active--BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-tertiary__link--m-current--BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-tertiary__link--before--BorderColor
#06c
.pf-c-nav--pf-c-nav--m-tertiary__link--before--BorderWidth
0
.pf-c-nav--pf-c-nav--m-tertiary__link--hover--before--BorderWidth
3px
.pf-c-nav--pf-c-nav--m-tertiary__link--focus--before--BorderWidth
3px
.pf-c-nav--pf-c-nav--m-tertiary__link--active--before--BorderWidth
3px
.pf-c-nav--pf-c-nav--m-tertiary__link--m-current--before--BorderWidth
3px
.pf-c-nav--pf-c-nav--m-tertiary__scroll-button--Color
#151515
.pf-c-nav--pf-c-nav--m-tertiary__scroll-button--hover--Color
#06c
.pf-c-nav--pf-c-nav--m-tertiary__scroll-button--focus--Color
#06c
.pf-c-nav--pf-c-nav--m-tertiary__scroll-button--active--Color
#06c
.pf-c-nav--pf-c-nav--m-tertiary__scroll-button--disabled--Color
#d2d2d2
.pf-c-nav--pf-c-nav--m-tertiary__scroll-button--before--BorderColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-tertiary__scroll-button--disabled--before--BorderColor
#f0f0f0
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--PaddingTop
0.5rem
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--PaddingRight
1rem
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--PaddingBottom
0.5rem
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--PaddingLeft
1rem
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--xl--PaddingTop
1rem
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--xl--PaddingRight
1.5rem
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--xl--PaddingBottom
1rem
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--xl--PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--FontSize
0.875rem
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--Color
#f0f0f0
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--hover--Color
#fff
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--focus--Color
#fff
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--active--Color
#fff
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--m-current--Color
#fff
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--BackgroundColor
transparent
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--hover--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--focus--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--active--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--m-current--BackgroundColor
#4f5255
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--before--BorderColor
transparent
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--after--BorderColor
#3c3f42
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--hover--after--BorderColor
#3c3f42
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--active--after--BorderColor
#3c3f42
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--m-current--after--BorderColor
#3c3f42
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--after--BorderLeftWidth
1px
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--hover--after--BorderLeftWidth
1px
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--active--after--BorderLeftWidth
1px
.pf-c-nav--pf-c-nav--m-horizontal-subnav__link--m-current--after--BorderLeftWidth
1px
.pf-c-nav--pf-c-nav__subnav--PaddingBottom
1rem
.pf-c-nav--pf-c-nav__subnav--xl--PaddingLeft
1rem
.pf-c-nav--pf-c-nav__subnav__link--MarginTop
0
.pf-c-nav--pf-c-nav__subnav__link--PaddingTop
0.5rem
.pf-c-nav--pf-c-nav__subnav__link--PaddingRight
1.5rem
.pf-c-nav--pf-c-nav__subnav__link--PaddingBottom
0.5rem
.pf-c-nav--pf-c-nav__subnav__link--PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav__subnav__link--FontSize
0.875rem
.pf-c-nav--pf-c-nav__subnav__link--hover--after--BorderColor
#8a8d90
.pf-c-nav--pf-c-nav__subnav__link--focus--after--BorderColor
#8a8d90
.pf-c-nav--pf-c-nav__subnav__link--active--after--BorderColor
#8a8d90
.pf-c-nav--pf-c-nav__subnav__link--m-current--after--BorderColor
#73bcf7
.pf-c-nav--pf-c-nav__subnav__link--hover--after--BorderWidth
1px
.pf-c-nav--pf-c-nav__subnav__link--focus--after--BorderWidth
1px
.pf-c-nav--pf-c-nav__subnav__link--active--after--BorderWidth
1px
.pf-c-nav--pf-c-nav__subnav__link--m-current--after--BorderWidth
4px
.pf-c-nav--pf-c-nav__subnav--MaxHeight
0
.pf-c-nav--pf-c-nav__subnav__subnav--PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav__subnav__subnav__link--PaddingLeft
1rem
.pf-c-nav--pf-c-nav__subnav__subnav__link--FontSize
0.75rem
.pf-c-nav--pf-c-nav__item--m-expanded__subnav--MaxHeight
100%
.pf-c-nav--pf-c-nav__subnav--c-divider--PaddingRight
1.5rem
.pf-c-nav--pf-c-nav__subnav--c-divider--PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav__section--MarginTop
0.5rem
.pf-c-nav--pf-c-nav__section__item--MarginTop
0.5rem
.pf-c-nav--pf-c-nav__section__link--PaddingTop
0.5rem
.pf-c-nav--pf-c-nav__section__link--PaddingRight
1rem
.pf-c-nav--pf-c-nav__section__link--PaddingBottom
0.5rem
.pf-c-nav--pf-c-nav__section__link--PaddingLeft
1rem
.pf-c-nav--pf-c-nav__section__link--xl--PaddingRight
1.5rem
.pf-c-nav--pf-c-nav__section__link--xl--PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav__section__link--FontSize
1rem
.pf-c-nav--pf-c-nav__section__link--before--BorderBottomWidth
0
.pf-c-nav--pf-c-nav__section__link--hover--after--BorderColor
transparent
.pf-c-nav--pf-c-nav__section__link--focus--after--BorderColor
transparent
.pf-c-nav--pf-c-nav__section__link--active--after--BorderColor
transparent
.pf-c-nav--pf-c-nav__section__link--m-current--after--BorderColor
#73bcf7
.pf-c-nav--pf-c-nav__section__link--hover--after--BorderWidth
0
.pf-c-nav--pf-c-nav__section__link--focus--after--BorderWidth
0
.pf-c-nav--pf-c-nav__section__link--active--after--BorderWidth
0
.pf-c-nav--pf-c-nav__section__link--m-current--after--BorderWidth
4px
.pf-c-nav--pf-c-nav__section--section--MarginTop
2rem
.pf-c-nav--pf-c-nav__section-title--PaddingTop
0.5rem
.pf-c-nav--pf-c-nav__section-title--PaddingRight
1rem
.pf-c-nav--pf-c-nav__section-title--PaddingBottom
0.5rem
.pf-c-nav--pf-c-nav__section-title--PaddingLeft
1rem
.pf-c-nav--pf-c-nav__section-title--xl--PaddingRight
1.5rem
.pf-c-nav--pf-c-nav__section-title--xl--PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav__section-title--FontSize
0.875rem
.pf-c-nav--pf-c-nav__section-title--Color
#fff
.pf-c-nav--pf-c-nav__section-title--BorderBottomColor
#3c3f42
.pf-c-nav--pf-c-nav__section-title--BorderBottomWidth
1px
.pf-c-nav--pf-c-nav__scroll-button--Color
#fff
.pf-c-nav--pf-c-nav__scroll-button--hover--Color
#73bcf7
.pf-c-nav--pf-c-nav__scroll-button--focus--Color
#73bcf7
.pf-c-nav--pf-c-nav__scroll-button--active--Color
#73bcf7
.pf-c-nav--pf-c-nav__scroll-button--disabled--Color
#6a6e73
.pf-c-nav--pf-c-nav__scroll-button--BackgroundColor
transparent
.pf-c-nav--pf-c-nav__scroll-button--Width
44px
.pf-c-nav--pf-c-nav__scroll-button--OutlineOffset
calc(-1 * 0.25rem)
.pf-c-nav--pf-c-nav__scroll-button--Transition
margin .125s, transform .125s, opacity .125s
.pf-c-nav--pf-c-nav__scroll-button--before--BorderColor
#3c3f42
.pf-c-nav--pf-c-nav__scroll-button--before--BorderWidth
1px
.pf-c-nav--pf-c-nav__scroll-button--before--BorderRightWidth
0
.pf-c-nav--pf-c-nav__scroll-button--before--BorderLeftWidth
0
.pf-c-nav--pf-c-nav__scroll-button--disabled--before--BorderColor
transparent
.pf-c-nav--pf-c-nav__toggle--PaddingRight
0.5rem
.pf-c-nav--pf-c-nav__toggle--PaddingLeft
0.5rem
.pf-c-nav--pf-c-nav__toggle--FontSize
1.125rem
.pf-c-nav--pf-c-nav__toggle-icon--Transition
250ms
.pf-c-nav--pf-c-nav--c-divider--MarginTop
0.5rem
.pf-c-nav--pf-c-nav--c-divider--MarginBottom
0.5rem
.pf-c-nav--pf-c-nav--c-divider--PaddingRight
0
.pf-c-nav--pf-c-nav--c-divider--PaddingLeft
0
.pf-c-nav--pf-c-nav--c-divider--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__list--ScrollSnapTypeAxis
x
.pf-c-nav--pf-c-nav__list--ScrollSnapTypeStrictness
proximity
.pf-c-nav--pf-c-nav__list--ScrollSnapType
x proximity
.pf-c-nav--pf-c-nav__item--ScrollSnapAlign
end
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu--top-offset
0px
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu--left-offset
0.25rem
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset
0px
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu--m-left--right-offset
0.25rem
.pf-c-nav--pf-c-nav__item--m-flyout--MarginTop
0
.pf-c-nav--pf-c-nav__item--m-flyout--hover__link--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__item--m-flyout--focus__link--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__item--m-flyout--active__link--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth
0
.pf-c-nav--pf-c-nav__item--m-flyout--focus__link--before--BorderWidth
0
.pf-c-nav--pf-c-nav__item--m-flyout--active__link--before--BorderWidth
0
.pf-c-nav--pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth
0
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu--Top
calc(0px + 0px)
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu--c-menu--Top
calc(calc(0px + 0px) - 1px)
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top
0
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu--Left
calc(100% - 0.25rem)
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu--m-left--Right
calc(100% - 0.25rem)
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom
calc(0 + 0px)
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu--BackgroundColor
#212427
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--Color
#fff
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--PaddingTop
0.5rem
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight
1.5rem
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--PaddingBottom
0.5rem
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item-description--Color
#f0f0f0
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--FontSize
0.875rem
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset
calc(0.25rem * -1)
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth
1px
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor
#3c3f42
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth
1px
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor
#8a8d90
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top
calc(-1 * 1px)
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top
0
.pf-c-nav--pf-c-nav__item--m-flyout--c-menu--BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-nav--pf-c-nav--c-menu--BackgroundColor
#212427
.pf-c-nav--pf-c-nav--c-menu__list--PaddingTop
0
.pf-c-nav--pf-c-nav--c-menu__list--PaddingBottom
0
.pf-c-nav--pf-c-nav--c-menu__list-item--Color
#fff
.pf-c-nav--pf-c-nav--c-menu__list-item--hover--Color
#fff
.pf-c-nav--pf-c-nav--c-menu__list-item--active--Color
#fff
.pf-c-nav--pf-c-nav--c-menu__list-item--focus-within--Color
#fff
.pf-c-nav--pf-c-nav--c-menu__list-item--hover--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav--c-menu__list-item--focus-within--BackgroundColor
#3c3f42
.pf-c-nav--pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth
3px
.pf-c-nav--pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight
700
.pf-c-nav--pf-c-nav--c-menu__item--PaddingTop
1rem
.pf-c-nav--pf-c-nav--c-menu__item--PaddingRight
1rem
.pf-c-nav--pf-c-nav--c-menu__item--PaddingBottom
1rem
.pf-c-nav--pf-c-nav--c-menu__item--PaddingLeft
1rem
.pf-c-nav--pf-c-nav--c-menu__item--xl--PaddingRight
1.5rem
.pf-c-nav--pf-c-nav--c-menu__item--xl--PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav--c-menu__item--FontSize
0.875rem
.pf-c-nav--pf-c-nav--c-menu__item--OutlineOffset
calc(0.25rem * -1)
.pf-c-nav--pf-c-nav--c-menu__item--before--BorderBottomWidth
1px
.pf-c-nav--pf-c-nav--c-menu__item--before--BorderBottomColor
#3c3f42
.pf-c-nav--pf-c-nav--c-menu__item--after--BorderLeftWidth
0
.pf-c-nav--pf-c-nav--c-menu__item--after--BorderLeftColor
transparent
.pf-c-nav--pf-c-nav--c-menu__item--m-current--BackgroundColor
#4f5255
.pf-c-nav--pf-c-nav--c-menu__item--m-current--after--BorderLeftWidth
4px
.pf-c-nav--pf-c-nav--c-menu__item--m-current--after--BorderColor
#73bcf7
.pf-c-nav--pf-c-nav--c-menu__item-description--Color
#8a8d90
.pf-c-nav--pf-c-nav--c-menu--m-flyout--left-offset
0.25rem
.pf-c-nav--pf-c-nav--c-menu--m-flyout--m-left--right-offset
0.25rem
.pf-c-nav--pf-c-nav--c-menu--m-flyout--Top
0
.pf-c-nav--pf-c-nav--c-menu--m-flyout--c-menu--Top
calc(0 * -1)
.pf-c-nav--pf-c-nav--c-menu--m-flyout--c-menu--Right
auto
.pf-c-nav--pf-c-nav--c-menu--m-flyout--c-menu--Bottom
auto
.pf-c-nav--pf-c-nav--c-menu--m-flyout--c-menu--Left
calc(100% - 0.25rem)
.pf-c-nav--pf-c-nav--c-menu--m-flyout--m-left--Right
calc(100% - 0.25rem)
.pf-c-nav--pf-c-nav--c-menu--m-flyout--m-top--Bottom
0
.pf-c-nav--pf-c-nav--c-menu--m-flyout--BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-nav--pf-c-nav--c-menu--m-flyout__item--PaddingTop
0.5rem
.pf-c-nav--pf-c-nav--c-menu--m-flyout__item--PaddingRight
1.5rem
.pf-c-nav--pf-c-nav--c-menu--m-flyout__item--PaddingBottom
0.5rem
.pf-c-nav--pf-c-nav--c-menu--m-flyout__item--PaddingLeft
1.5rem
.pf-c-nav--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftWidth
1px
.pf-c-nav--pf-c-nav--c-menu--m-flyout__item--hover--after--BorderLeftColor
#8a8d90
.pf-c-nav--pf-c-nav__toggle--m-start--MarginRight
0.5rem
.pf-c-nav .pf-c-menu--pf-c-menu--MinWidth
100%
.pf-c-nav .pf-c-menu--pf-c-menu--BackgroundColor
#212427
.pf-c-nav .pf-c-menu--pf-c-menu__list--PaddingTop
0
.pf-c-nav .pf-c-menu--pf-c-menu__list--PaddingBottom
0
.pf-c-nav .pf-c-menu--pf-c-menu__item--PaddingTop
1rem
.pf-c-nav .pf-c-menu--pf-c-menu__item--PaddingRight
1rem
.pf-c-nav .pf-c-menu--pf-c-menu__item--PaddingBottom
1rem
.pf-c-nav .pf-c-menu--pf-c-menu__item--PaddingLeft
1rem
.pf-c-nav .pf-c-menu--pf-c-menu__list-item--Color
#fff
.pf-c-nav .pf-c-menu--pf-c-menu__list-item--hover--Color
#fff
.pf-c-nav .pf-c-menu--pf-c-menu__list-item--active--Color
#fff
.pf-c-nav .pf-c-menu--pf-c-menu__list-item--focus-within--Color
#fff
.pf-c-nav .pf-c-menu--pf-c-menu__list-item--hover--BackgroundColor
#3c3f42
.pf-c-nav .pf-c-menu--pf-c-menu__list-item--focus-within--BackgroundColor
#3c3f42
.pf-c-nav .pf-c-menu--pf-c-menu__item-description--Color
#8a8d90
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu--BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__list--PaddingTop
0
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__list--PaddingBottom
0
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__item--FontSize
0.875rem
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__item--Color
undefined, inherit
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__item--PaddingTop
0.5rem
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__item--PaddingRight
1.5rem
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__item--PaddingBottom
0.5rem
.pf-c-nav .pf-c-menu.pf-m-flyout--pf-c-menu__item--PaddingLeft
1.5rem
.pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu__item:hover--pf-c-nav--c-menu__item--after--BorderLeftWidth
1px
.pf-c-nav .pf-c-menu.pf-m-flyout .pf-c-menu__item:hover--pf-c-nav--c-menu__item--after--BorderLeftColor
#8a8d90
.pf-c-nav .pf-c-menu.pf-m-top--pf-c-nav--c-menu--m-flyout--c-menu--Top
auto
.pf-c-nav .pf-c-menu.pf-m-top--pf-c-nav--c-menu--m-flyout--c-menu--Bottom
0
.pf-c-nav .pf-c-menu.pf-m-left--pf-c-nav--c-menu--m-flyout--c-menu--Right
calc(100% - 0.25rem)
.pf-c-nav .pf-c-menu.pf-m-left--pf-c-nav--c-menu--m-flyout--c-menu--Left
auto
.pf-c-nav .pf-c-menu__item.pf-m-current--pf-c-nav--c-menu__item--after--BorderLeftWidth
4px
.pf-c-nav .pf-c-menu__item.pf-m-current--pf-c-nav--c-menu__item--after--BorderLeftColor
#73bcf7
.pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up)--pf-c-nav--c-menu__item--before--BorderBottomWidth
3px
.pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) > .pf-c-menu__item--pf-c-menu__item--FontWeight
700
.pf-c-nav.pf-m-light--pf-c-nav__item--before--BorderColor
#f0f0f0
.pf-c-nav.pf-m-light--pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor
#f0f0f0
.pf-c-nav.pf-m-light--pf-c-nav__link--Color
#151515
.pf-c-nav.pf-m-light--pf-c-nav__link--hover--Color
#151515
.pf-c-nav.pf-m-light--pf-c-nav__link--focus--Color
#151515
.pf-c-nav.pf-m-light--pf-c-nav__link--active--Color
#151515
.pf-c-nav.pf-m-light--pf-c-nav__link--m-current--Color
#151515
.pf-c-nav.pf-m-light--pf-c-nav__link--hover--BackgroundColor
#f0f0f0
.pf-c-nav.pf-m-light--pf-c-nav__link--focus--BackgroundColor
#f0f0f0
.pf-c-nav.pf-m-light--pf-c-nav__link--active--BackgroundColor
#f0f0f0
.pf-c-nav.pf-m-light--pf-c-nav__link--m-current--BackgroundColor
#f0f0f0
.pf-c-nav.pf-m-light--pf-c-nav__link--before--BorderColor
#f0f0f0
.pf-c-nav.pf-m-light--pf-c-nav__link--after--BorderColor
#06c
.pf-c-nav.pf-m-light--pf-c-nav__link--m-current--after--BorderColor
#06c
.pf-c-nav.pf-m-light--pf-c-nav__subnav__link--hover--after--BorderColor
#d2d2d2
.pf-c-nav.pf-m-light--pf-c-nav__subnav__link--focus--after--BorderColor
#d2d2d2
.pf-c-nav.pf-m-light--pf-c-nav__subnav__link--active--after--BorderColor
#d2d2d2
.pf-c-nav.pf-m-light--pf-c-nav__subnav__link--m-current--after--BorderColor
#06c
.pf-c-nav.pf-m-light--pf-c-nav__section-title--Color
#6a6e73
.pf-c-nav.pf-m-light--pf-c-nav__section-title--BorderBottomColor
#f0f0f0
.pf-c-nav.pf-m-light .pf-c-divider--pf-c-divider--after--BackgroundColor
#f0f0f0
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--PaddingTop
0.5rem
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--PaddingRight
1rem
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--PaddingBottom
0.5rem
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--PaddingLeft
1rem
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--Right
1rem
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--Left
1rem
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--Color
#d2d2d2
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--hover--Color
#73bcf7
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--active--Color
#73bcf7
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--focus--Color
#73bcf7
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--m-current--Color
#73bcf7
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--BackgroundColor
transparent
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--hover--BackgroundColor
transparent
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--focus--BackgroundColor
transparent
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--active--BackgroundColor
transparent
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--m-current--BackgroundColor
transparent
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--before--BorderColor
#73bcf7
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--before--BorderBottomWidth
0
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--hover--before--BorderBottomWidth
3px
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--focus--before--BorderBottomWidth
3px
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--active--before--BorderBottomWidth
3px
.pf-c-nav.pf-m-horizontal--pf-c-nav__link--m-current--before--BorderBottomWidth
3px
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--PaddingTop
0.5rem
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--PaddingRight
1rem
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--PaddingBottom
0.5rem
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--PaddingLeft
1rem
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--Right
1rem
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--Left
1rem
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--Color
#151515
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--hover--Color
#06c
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--active--Color
#06c
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--focus--Color
#06c
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--m-current--Color
#06c
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--BackgroundColor
transparent
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--hover--BackgroundColor
transparent
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--focus--BackgroundColor
transparent
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--active--BackgroundColor
transparent
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--m-current--BackgroundColor
transparent
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--before--BorderColor
#06c
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--before--BorderBottomWidth
0
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--hover--before--BorderBottomWidth
3px
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--focus--before--BorderBottomWidth
3px
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--active--before--BorderBottomWidth
3px
.pf-c-nav.pf-m-tertiary--pf-c-nav__link--m-current--before--BorderBottomWidth
3px
.pf-c-nav.pf-m-tertiary--pf-c-nav__scroll-button--Color
#151515
.pf-c-nav.pf-m-tertiary--pf-c-nav__scroll-button--hover--Color
#06c
.pf-c-nav.pf-m-tertiary--pf-c-nav__scroll-button--focus--Color
#06c
.pf-c-nav.pf-m-tertiary--pf-c-nav__scroll-button--active--Color
#06c
.pf-c-nav.pf-m-tertiary--pf-c-nav__scroll-button--disabled--Color
#d2d2d2
.pf-c-nav.pf-m-tertiary--pf-c-nav__scroll-button--before--BorderColor
#f0f0f0
.pf-c-nav.pf-m-tertiary--pf-c-nav__scroll-button--disabled--before--BorderColor
#f0f0f0
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--FontSize
0.875rem
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--PaddingTop
0.5rem
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--PaddingRight
1rem
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--PaddingBottom
0.5rem
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--PaddingLeft
1rem
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--Color
#f0f0f0
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--Right
undefined
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--Left
undefined
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--hover--Color
#fff
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--active--Color
#fff
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--focus--Color
#fff
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--m-current--Color
#fff
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--BackgroundColor
transparent
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--hover--BackgroundColor
#3c3f42
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--focus--BackgroundColor
#3c3f42
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--active--BackgroundColor
#3c3f42
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--m-current--BackgroundColor
#4f5255
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--before--BorderColor
transparent
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--after--BorderColor
#3c3f42
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--hover--after--BorderColor
#3c3f42
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--active--after--BorderColor
#3c3f42
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--m-current--after--BorderColor
#3c3f42
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--after--BorderLeftWidth
1px
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--hover--after--BorderLeftWidth
1px
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--active--after--BorderLeftWidth
1px
.pf-c-nav.pf-m-horizontal-subnav--pf-c-nav__link--m-current--after--BorderLeftWidth
1px
.pf-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-c-nav__item:first-child--pf-c-nav__link--after--BorderLeftWidth
0
.pf-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-c-nav__item:first-child--pf-c-nav__link--hover--after--BorderLeftWidth
0
.pf-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-c-nav__item:first-child--pf-c-nav__link--active--after--BorderLeftWidth
0
.pf-c-nav.pf-m-horizontal-subnav.pf-m-scrollable .pf-c-nav__item:first-child--pf-c-nav__link--m-current--after--BorderLeftWidth
0
.pf-c-nav .pf-c-divider--pf-c-divider--after--BackgroundColor
#3c3f42
.pf-c-nav__item.pf-m-expandable--pf-c-nav__link--before--BorderBottomWidth
0
.pf-c-nav__item .pf-c-nav__item.pf-m-expandable--pf-c-nav__toggle--FontSize
0.875rem
.pf-c-nav__item .pf-c-nav__item.pf-m-expandable--pf-c-nav__link--PaddingRight
2rem
.pf-c-nav__item.pf-m-flyout:hover--pf-c-nav__link--BackgroundColor
#3c3f42
.pf-c-nav__item.pf-m-flyout:hover--pf-c-nav__link--before--BorderBottomWidth
0
.pf-c-nav__item.pf-m-flyout:focus--pf-c-nav__link--BackgroundColor
#3c3f42
.pf-c-nav__item.pf-m-flyout:focus--pf-c-nav__link--before--BorderBottomWidth
0
.pf-c-nav__item.pf-m-flyout:active--pf-c-nav__link--BackgroundColor
#3c3f42
.pf-c-nav__item.pf-m-flyout:active--pf-c-nav__link--before--BorderBottomWidth
0
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu--MinWidth
100%
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu--BoxShadow
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu--BackgroundColor
#212427
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__list--PaddingTop
0
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__list--PaddingBottom
0
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__list-item--hover--BackgroundColor
#3c3f42
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__list-item--focus-within--BackgroundColor
#3c3f42
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__list-item--active--BackgroundColor
#3c3f42
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__item--FontSize
0.875rem
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__item--Color
#fff
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__item--PaddingTop
0.5rem
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__item--PaddingRight
1.5rem
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__item--PaddingBottom
0.5rem
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__item--PaddingLeft
1.5rem
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-menu__item-description--Color
#f0f0f0
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-nav--c-menu--m-flyout--c-menu--Bottom
calc(0 + 0px)
.pf-c-nav__item.pf-m-flyout .pf-c-menu--pf-c-nav--c-menu--m-flyout--c-menu--Right
calc(100% - 0.25rem)
.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child--pf-c-nav__item--m-flyout--c-menu--c-menu--Top
0
.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top
0
.pf-c-nav__subnav--pf-c-nav__link--PaddingTop
0.5rem
.pf-c-nav__subnav--pf-c-nav__link--PaddingRight
1.5rem
.pf-c-nav__subnav--pf-c-nav__link--PaddingBottom
0.5rem
.pf-c-nav__subnav--pf-c-nav__link--PaddingLeft
1.5rem
.pf-c-nav__subnav--pf-c-nav__link--FontSize
0.875rem
.pf-c-nav__subnav--pf-c-nav__link--hover--after--BorderColor
#8a8d90
.pf-c-nav__subnav--pf-c-nav__link--focus--after--BorderColor
#8a8d90
.pf-c-nav__subnav--pf-c-nav__link--active--after--BorderColor
#8a8d90
.pf-c-nav__subnav--pf-c-nav__link--m-current--after--BorderColor
#73bcf7
.pf-c-nav__subnav--pf-c-nav__link--hover--after--BorderLeftWidth
1px
.pf-c-nav__subnav--pf-c-nav__link--focus--after--BorderLeftWidth
1px
.pf-c-nav__subnav--pf-c-nav__link--active--after--BorderLeftWidth
1px
.pf-c-nav__subnav--pf-c-nav__link--m-current--after--BorderLeftWidth
4px
.pf-c-nav__subnav--pf-c-nav--c-divider--PaddingRight
1.5rem
.pf-c-nav__subnav--pf-c-nav--c-divider--PaddingLeft
1.5rem
.pf-c-nav__subnav .pf-c-nav__subnav--pf-c-nav__link--FontSize
0.75rem
.pf-c-nav__subnav .pf-c-nav__subnav--pf-c-nav__link--PaddingLeft
1rem
.pf-c-nav__subnav .pf-c-nav__subnav--pf-c-nav__subnav--PaddingLeft
1.5rem
.pf-c-nav__item.pf-m-expanded .pf-c-nav__subnav--pf-c-nav__subnav--MaxHeight
100%
.pf-c-nav__section--pf-c-nav__item--MarginTop
0.5rem
.pf-c-nav__section--pf-c-nav__link--PaddingTop
0.5rem
.pf-c-nav__section--pf-c-nav__link--PaddingRight
1rem
.pf-c-nav__section--pf-c-nav__link--PaddingBottom
0.5rem
.pf-c-nav__section--pf-c-nav__link--PaddingLeft
1rem
.pf-c-nav__section--pf-c-nav__link--FontSize
1rem
.pf-c-nav__section--pf-c-nav__link--before--BorderBottomWidth
0
.pf-c-nav__section--pf-c-nav__link--hover--after--BorderColor
transparent
.pf-c-nav__section--pf-c-nav__link--focus--after--BorderColor
transparent
.pf-c-nav__section--pf-c-nav__link--active--after--BorderColor
transparent
.pf-c-nav__section--pf-c-nav__link--m-current--after--BorderColor
#73bcf7
.pf-c-nav__section--pf-c-nav__link--hover--after--BorderLeftWidth
0
.pf-c-nav__section--pf-c-nav__link--focus--after--BorderLeftWidth
0
.pf-c-nav__section--pf-c-nav__link--active--after--BorderLeftWidth
0
.pf-c-nav__section--pf-c-nav__link--m-current--after--BorderLeftWidth
4px
.pf-c-nav__section--pf-c-nav--c-divider--MarginBottom
0
.pf-c-nav__section + .pf-c-nav__section--pf-c-nav__section--MarginTop
2rem
.pf-c-nav__section.pf-m-no-title--pf-c-nav__section--MarginTop
0
.pf-c-nav__scroll-button:nth-of-type(1)--pf-c-nav__scroll-button--before--BorderRightWidth
1px
.pf-c-nav__scroll-button:nth-of-type(2)--pf-c-nav__scroll-button--before--BorderLeftWidth
1px

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

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 logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines