Navigation

Examples

Default

Grouped

Expandable

Expandable (w/subnavigation titles)

Mixed

Horizontal (only in PageHeader)

Tertiary

Props

Nav

Name	Type	Required	Default	Description
aria-label	string	No		Accessibility label
children	React.ReactNode	No		Anything that can be rendered inside of the nav
className	string	No		Additional classes added to the container
onSelect	(selectedItem: { groupId: number \| string; itemId: number \| string; to: string; event: React.FormEvent<HTMLInputElement>; }) => void	No	() => undefined	Callback for updating when item selection changes
onToggle	(toggledItem: { groupId: number \| string; isExpanded: boolean; event: React.MouseEvent<HTMLButtonElement>; }) => void	No	() => undefined	Callback for when a list is expanded or collapsed
ouiaSafe	No type info	No	true
theme	'dark' \| 'light'	No	'dark'	Indicates which theme color to use
variant	'default' \| 'horizontal' \| 'tertiary'	No		For horizontal navs

NavList

Name	Type	Required	Default	Description
ariaLeftScroll	string	No	'Scroll left'	Aria-label for the left scroll button
ariaRightScroll	string	No	'Scroll right'	Aria-label for the right scroll button
children	React.ReactNode	No		Children nodes
className	string	No		Additional classes added to the list

NavGroup

Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Anything that can be rendered inside of the group
className	string	No	''	Additional classes added to the container
id	string	No	getUniqueId()	Identifier to use for the section aria label
title	string	Yes		Title shown for the group

NavItem

Name	Type	Required	Default	Description
children	React.ReactNode	No		Content rendered inside the nav item. If React.isValidElement(children) props onClick, className and aria-current will be injected.
className	string	No		Additional classes added to the nav item
component	React.ReactNode	No	'a'	Component used to render NavItems
groupId	string \| number \| null	No	null	Group identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
isActive	boolean	No	false	Flag indicating whether the item is active
itemId	string \| number \| null	No	null	Item identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
onClick	NavSelectClickHandler	No	null	Callback for item click
preventDefault	boolean	No	false	If true prevents the default anchor link action to occur. Set to true if you want to handle navigation yourself.
styleChildren	boolean	No	true	Whether to set className on children when React.isValidElement(children)
to	string	No		Target navigation link

NavItemSeparator

Name	Type	Required	Default	Description
component	No type info	No	'li'

NavExpandable

Name	Type	Required	Default	Description
buttonProps	any	No		Additional props added to the NavExpandable <button>
children	React.ReactNode	No	''	Anything that can be rendered inside of the expandable list
className	string	No	''	Additional classes added to the container
groupId	string \| number	No	null	Group identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
id	string	No	''	Identifier to use for the section aria label
isActive	boolean	No	false	If true makes the expandable list title active
isExpanded	boolean	No	false	Boolean to programatically expand or collapse section
onExpand	(e: React.MouseEvent<HTMLButtonElement, MouseEvent>, val: boolean) => void	No		allow consumer to optionally override this callback and manage expand state externally. if passed will not call Nav's onToggle.
srText	string	No	''	If defined, screen readers will read this text instead of the list title
title	string	Yes		Title shown for the expandable list

CSS variables


	.pf-c-nav	--pf-c-nav--Transition	all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-nav--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-nav	--pf-c-nav__item--m-expanded__toggle-icon--Rotate	90deg
	.pf-c-nav	--pf-c-nav--m-light__item--before--BorderColor	#f0f0f0
--pf-c-nav--m-light__item--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-nav	--pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor	#f0f0f0
--pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-nav	--pf-c-nav--m-light__link--Color	#151515
--pf-c-nav--m-light__link--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-nav	--pf-c-nav--m-light__link--hover--Color	#151515
--pf-c-nav--m-light__link--hover--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-nav	--pf-c-nav--m-light__link--focus--Color	#151515
--pf-c-nav--m-light__link--focus--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-nav	--pf-c-nav--m-light__link--active--Color	#151515
--pf-c-nav--m-light__link--active--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-nav	--pf-c-nav--m-light__link--m-current--Color	#151515
--pf-c-nav--m-light__link--m-current--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-nav	--pf-c-nav--m-light__link--hover--BackgroundColor	#f0f0f0
--pf-c-nav--m-light__link--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-nav	--pf-c-nav--m-light__link--focus--BackgroundColor	#f0f0f0
--pf-c-nav--m-light__link--focus--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-nav	--pf-c-nav--m-light__link--active--BackgroundColor	#f0f0f0
--pf-c-nav--m-light__link--active--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-nav	--pf-c-nav--m-light__link--m-current--BackgroundColor	#f0f0f0
--pf-c-nav--m-light__link--m-current--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-nav	--pf-c-nav--m-light__link--before--BorderColor	#f0f0f0
--pf-c-nav--m-light__link--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-nav	--pf-c-nav--m-light__link--after--BorderColor	#06c
--pf-c-nav--m-light__link--after--BorderColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav	--pf-c-nav--m-light__link--m-current--after--BorderColor	#06c
--pf-c-nav--m-light__link--m-current--after--BorderColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav	--pf-c-nav--m-light__section-title--Color	#6a6e73
--pf-c-nav--m-light__section-title--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-nav	--pf-c-nav--m-light__section-title--BorderBottomColor	#f0f0f0
--pf-c-nav--m-light__section-title--BorderBottomColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-nav	--pf-c-nav--m-light--c-divider--BackgroundColor	#f0f0f0
--pf-c-nav--m-light--c-divider--BackgroundColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-nav	--pf-c-nav--m-light__subnav__link--hover--after--BorderColor	#d2d2d2
--pf-c-nav--m-light__subnav__link--hover--after--BorderColor --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-nav	--pf-c-nav--m-light__subnav__link--focus--after--BorderColor	#d2d2d2
--pf-c-nav--m-light__subnav__link--focus--after--BorderColor --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-nav	--pf-c-nav--m-light__subnav__link--active--after--BorderColor	#d2d2d2
--pf-c-nav--m-light__subnav__link--active--after--BorderColor --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-nav	--pf-c-nav--m-light__subnav__link--m-current--after--BorderColor	#06c
--pf-c-nav--m-light__subnav__link--m-current--after--BorderColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #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__item--m-current--not--m-expanded__link--BackgroundColor --pf-global--BackgroundColor--dark-400 $pf-global--BackgroundColor--dark-400 $pf-color-black-700 #4f5255
	.pf-c-nav	--pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth	4px
--pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-nav	--pf-c-nav__item--before--BorderColor	#3c3f42
--pf-c-nav__item--before--BorderColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-nav	--pf-c-nav__item--before--BorderWidth	1px
--pf-c-nav__item--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-nav	--pf-c-nav__link--FontSize	1rem
--pf-c-nav__link--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav__link--FontWeight	400
--pf-c-nav__link--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-nav	--pf-c-nav__link--PaddingTop	1rem
--pf-c-nav__link--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav__link--PaddingRight	1rem
--pf-c-nav__link--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav__link--PaddingBottom	1rem
--pf-c-nav__link--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav__link--PaddingLeft	1rem
--pf-c-nav__link--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav__link--xl--PaddingRight	1.5rem
--pf-c-nav__link--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-nav	--pf-c-nav__link--xl--PaddingLeft	1.5rem
--pf-c-nav__link--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-nav	--pf-c-nav__link--Color	#fff
--pf-c-nav__link--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-nav	--pf-c-nav__link--hover--Color	#fff
--pf-c-nav__link--hover--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-nav	--pf-c-nav__link--focus--Color	#fff
--pf-c-nav__link--focus--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-nav	--pf-c-nav__link--active--Color	#fff
--pf-c-nav__link--active--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-nav	--pf-c-nav__link--m-current--Color	#fff
--pf-c-nav__link--m-current--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-nav	--pf-c-nav__link--BackgroundColor	transparent
	.pf-c-nav	--pf-c-nav__link--hover--BackgroundColor	#3c3f42
--pf-c-nav__link--hover--BackgroundColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-nav	--pf-c-nav__link--focus--BackgroundColor	#3c3f42
--pf-c-nav__link--focus--BackgroundColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-nav	--pf-c-nav__link--active--BackgroundColor	#3c3f42
--pf-c-nav__link--active--BackgroundColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-nav	--pf-c-nav__link--m-current--BackgroundColor	#4f5255
--pf-c-nav__link--m-current--BackgroundColor --pf-global--BackgroundColor--dark-400 $pf-global--BackgroundColor--dark-400 $pf-color-black-700 #4f5255
	.pf-c-nav	--pf-c-nav__link--OutlineOffset	calc(0.25rem * -1)
--pf-c-nav__link--OutlineOffset calc(--pf-global--spacer--xs * -1) calc($pf-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1)
	.pf-c-nav	--pf-c-nav__link--before--BorderColor	#3c3f42
--pf-c-nav__link--before--BorderColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-nav	--pf-c-nav__link--before--BorderBottomWidth	1px
--pf-c-nav__link--before--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 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__link--after--BorderColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav	--pf-c-nav__link--hover--after--BorderColor	#73bcf7
--pf-c-nav__link--hover--after--BorderColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav	--pf-c-nav__link--focus--after--BorderColor	#73bcf7
--pf-c-nav__link--focus--after--BorderColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav	--pf-c-nav__link--active--after--BorderColor	#73bcf7
--pf-c-nav__link--active--after--BorderColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav	--pf-c-nav__link--m-current--after--BorderColor	#73bcf7
--pf-c-nav__link--m-current--after--BorderColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #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__link--m-current--after--BorderLeftWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-nav	--pf-c-nav--m-horizontal__link--PaddingTop	0.5rem
--pf-c-nav--m-horizontal__link--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav	--pf-c-nav--m-horizontal__link--PaddingRight	1rem
--pf-c-nav--m-horizontal__link--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav--m-horizontal__link--PaddingBottom	0.5rem
--pf-c-nav--m-horizontal__link--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav	--pf-c-nav--m-horizontal__link--PaddingLeft	1rem
--pf-c-nav--m-horizontal__link--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav--m-horizontal__link--lg--PaddingTop	1.5rem
--pf-c-nav--m-horizontal__link--lg--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-nav	--pf-c-nav--m-horizontal__link--lg--PaddingBottom	1.5rem
--pf-c-nav--m-horizontal__link--lg--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-nav	--pf-c-nav--m-horizontal__link--Right	1rem
--pf-c-nav--m-horizontal__link--Right --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav--m-horizontal__link--Left	1rem
--pf-c-nav--m-horizontal__link--Left --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav--m-horizontal__link--Color	#d2d2d2
--pf-c-nav--m-horizontal__link--Color --pf-global--Color--light-300 $pf-global--Color--light-300 $pf-color-black-300 #d2d2d2
	.pf-c-nav	--pf-c-nav--m-horizontal__link--hover--Color	#73bcf7
--pf-c-nav--m-horizontal__link--hover--Color --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav	--pf-c-nav--m-horizontal__link--focus--Color	#73bcf7
--pf-c-nav--m-horizontal__link--focus--Color --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav	--pf-c-nav--m-horizontal__link--active--Color	#73bcf7
--pf-c-nav--m-horizontal__link--active--Color --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav	--pf-c-nav--m-horizontal__link--m-current--Color	#73bcf7
--pf-c-nav--m-horizontal__link--m-current--Color --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #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--m-horizontal__link--before--BorderColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #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--m-horizontal__link--hover--before--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-nav	--pf-c-nav--m-horizontal__link--focus--before--BorderWidth	3px
--pf-c-nav--m-horizontal__link--focus--before--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-nav	--pf-c-nav--m-horizontal__link--active--before--BorderWidth	3px
--pf-c-nav--m-horizontal__link--active--before--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-nav	--pf-c-nav--m-horizontal__link--m-current--before--BorderWidth	3px
--pf-c-nav--m-horizontal__link--m-current--before--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-nav	--pf-c-nav--m-tertiary__link--PaddingTop	0.5rem
--pf-c-nav--m-tertiary__link--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav	--pf-c-nav--m-tertiary__link--PaddingRight	1rem
--pf-c-nav--m-tertiary__link--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav--m-tertiary__link--PaddingBottom	0.5rem
--pf-c-nav--m-tertiary__link--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav	--pf-c-nav--m-tertiary__link--PaddingLeft	1rem
--pf-c-nav--m-tertiary__link--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav--m-tertiary__link--Right	1rem
--pf-c-nav--m-tertiary__link--Right --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav--m-tertiary__link--Left	1rem
--pf-c-nav--m-tertiary__link--Left --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav--m-tertiary__link--Color	#151515
--pf-c-nav--m-tertiary__link--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-nav	--pf-c-nav--m-tertiary__link--hover--Color	#06c
--pf-c-nav--m-tertiary__link--hover--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav	--pf-c-nav--m-tertiary__link--focus--Color	#06c
--pf-c-nav--m-tertiary__link--focus--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav	--pf-c-nav--m-tertiary__link--active--Color	#06c
--pf-c-nav--m-tertiary__link--active--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav	--pf-c-nav--m-tertiary__link--m-current--Color	#06c
--pf-c-nav--m-tertiary__link--m-current--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #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--m-tertiary__link--before--BorderColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #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--m-tertiary__link--hover--before--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-nav	--pf-c-nav--m-tertiary__link--focus--before--BorderWidth	3px
--pf-c-nav--m-tertiary__link--focus--before--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-nav	--pf-c-nav--m-tertiary__link--active--before--BorderWidth	3px
--pf-c-nav--m-tertiary__link--active--before--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-nav	--pf-c-nav--m-tertiary__link--m-current--before--BorderWidth	3px
--pf-c-nav--m-tertiary__link--m-current--before--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-nav	--pf-c-nav--m-tertiary__scroll-button--Color	#151515
--pf-c-nav--m-tertiary__scroll-button--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-nav	--pf-c-nav--m-tertiary__scroll-button--hover--Color	#06c
--pf-c-nav--m-tertiary__scroll-button--hover--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav	--pf-c-nav--m-tertiary__scroll-button--focus--Color	#06c
--pf-c-nav--m-tertiary__scroll-button--focus--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav	--pf-c-nav--m-tertiary__scroll-button--active--Color	#06c
--pf-c-nav--m-tertiary__scroll-button--active--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav	--pf-c-nav--m-tertiary__scroll-button--disabled--Color	#d2d2d2
--pf-c-nav--m-tertiary__scroll-button--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-nav	--pf-c-nav--m-tertiary__scroll-button--before--BorderColor	#f0f0f0
--pf-c-nav--m-tertiary__scroll-button--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-nav	--pf-c-nav--m-tertiary__scroll-button--disabled--before--BorderColor	#f0f0f0
--pf-c-nav--m-tertiary__scroll-button--disabled--before--BorderColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-nav	--pf-c-nav__subnav--PaddingBottom	1rem
--pf-c-nav__subnav--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav__subnav--xl--PaddingLeft	1rem
--pf-c-nav__subnav--xl--PaddingLeft --pf-c-nav__link--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 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__subnav__link--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav	--pf-c-nav__subnav__link--PaddingRight	1.5rem
--pf-c-nav__subnav__link--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-nav	--pf-c-nav__subnav__link--PaddingBottom	0.5rem
--pf-c-nav__subnav__link--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav	--pf-c-nav__subnav__link--PaddingLeft	1.5rem
--pf-c-nav__subnav__link--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-nav	--pf-c-nav__subnav__link--FontSize	0.875rem
--pf-c-nav__subnav__link--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-nav	--pf-c-nav__subnav__link--hover--after--BorderColor	#8a8d90
--pf-c-nav__subnav__link--hover--after--BorderColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-nav	--pf-c-nav__subnav__link--focus--after--BorderColor	#8a8d90
--pf-c-nav__subnav__link--focus--after--BorderColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-nav	--pf-c-nav__subnav__link--active--after--BorderColor	#8a8d90
--pf-c-nav__subnav__link--active--after--BorderColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-nav	--pf-c-nav__subnav__link--m-current--after--BorderColor	#73bcf7
--pf-c-nav__subnav__link--m-current--after--BorderColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav	--pf-c-nav__subnav__link--hover--after--BorderWidth	1px
--pf-c-nav__subnav__link--hover--after--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-nav	--pf-c-nav__subnav__link--focus--after--BorderWidth	1px
--pf-c-nav__subnav__link--focus--after--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-nav	--pf-c-nav__subnav__link--active--after--BorderWidth	1px
--pf-c-nav__subnav__link--active--after--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-nav	--pf-c-nav__subnav__link--m-current--after--BorderWidth	4px
--pf-c-nav__subnav__link--m-current--after--BorderWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-nav	--pf-c-nav__subnav--MaxHeight	0
	.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__subnav--c-divider--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-nav	--pf-c-nav__subnav--c-divider--PaddingLeft	1.5rem
--pf-c-nav__subnav--c-divider--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-nav	--pf-c-nav__section--MarginTop	0.5rem
--pf-c-nav__section--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav	--pf-c-nav__section__item--MarginTop	0.5rem
--pf-c-nav__section__item--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav	--pf-c-nav__section__link--PaddingTop	0.5rem
--pf-c-nav__section__link--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav	--pf-c-nav__section__link--PaddingRight	1rem
--pf-c-nav__section__link--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav__section__link--PaddingBottom	0.5rem
--pf-c-nav__section__link--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav	--pf-c-nav__section__link--PaddingLeft	1rem
--pf-c-nav__section__link--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav__section__link--xl--PaddingRight	1.5rem
--pf-c-nav__section__link--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-nav	--pf-c-nav__section__link--xl--PaddingLeft	1.5rem
--pf-c-nav__section__link--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-nav	--pf-c-nav__section__link--FontSize	1rem
--pf-c-nav__section__link--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 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__section__link--m-current--after--BorderColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #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__section__link--m-current--after--BorderWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-nav	--pf-c-nav__section--section--MarginTop	2rem
--pf-c-nav__section--section--MarginTop --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-nav	--pf-c-nav__section-title--PaddingTop	0.5rem
--pf-c-nav__section-title--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav	--pf-c-nav__section-title--PaddingRight	1rem
--pf-c-nav__section-title--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav__section-title--PaddingBottom	0.5rem
--pf-c-nav__section-title--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav	--pf-c-nav__section-title--PaddingLeft	1rem
--pf-c-nav__section-title--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav	--pf-c-nav__section-title--xl--PaddingRight	1.5rem
--pf-c-nav__section-title--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-nav	--pf-c-nav__section-title--xl--PaddingLeft	1.5rem
--pf-c-nav__section-title--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-nav	--pf-c-nav__section-title--FontSize	0.875rem
--pf-c-nav__section-title--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-nav	--pf-c-nav__section-title--Color	#fff
--pf-c-nav__section-title--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-nav	--pf-c-nav__section-title--BorderBottomColor	#3c3f42
--pf-c-nav__section-title--BorderBottomColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-nav	--pf-c-nav__section-title--BorderBottomWidth	1px
--pf-c-nav__section-title--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-nav	--pf-c-nav__scroll-button--Color	#fff
--pf-c-nav__scroll-button--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-nav	--pf-c-nav__scroll-button--hover--Color	#73bcf7
--pf-c-nav__scroll-button--hover--Color --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav	--pf-c-nav__scroll-button--focus--Color	#73bcf7
--pf-c-nav__scroll-button--focus--Color --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav	--pf-c-nav__scroll-button--active--Color	#73bcf7
--pf-c-nav__scroll-button--active--Color --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav	--pf-c-nav__scroll-button--disabled--Color	#6a6e73
--pf-c-nav__scroll-button--disabled--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-nav	--pf-c-nav__scroll-button--BackgroundColor	transparent
	.pf-c-nav	--pf-c-nav__scroll-button--Width	44px
--pf-c-nav__scroll-button--Width --pf-global--target-size--MinWidth $pf-global--target-size--MinWidth 44px
	.pf-c-nav	--pf-c-nav__scroll-button--OutlineOffset	calc(-1 * 0.25rem)
--pf-c-nav__scroll-button--OutlineOffset calc(-1 * --pf-global--spacer--xs) calc(-1 * $pf-global--spacer--xs) calc(-1 * pf-size-prem(4px)) 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__scroll-button--before--BorderColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #3c3f42
	.pf-c-nav	--pf-c-nav__scroll-button--before--BorderWidth	1px
--pf-c-nav__scroll-button--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 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__toggle--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav	--pf-c-nav__toggle--PaddingLeft	0.5rem
--pf-c-nav__toggle--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav	--pf-c-nav__toggle--FontSize	1.125rem
--pf-c-nav__toggle--FontSize --pf-global--icon--FontSize--md $pf-global--icon--FontSize--md pf-font-prem(18px) 1.125rem
	.pf-c-nav	--pf-c-nav__toggle-icon--Transition	250ms
--pf-c-nav__toggle-icon--Transition --pf-global--TransitionDuration $pf-global--TransitionDuration 250ms
	.pf-c-nav	--pf-c-nav--c-divider--MarginTop	0.5rem
--pf-c-nav--c-divider--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav	--pf-c-nav--c-divider--MarginBottom	0.5rem
--pf-c-nav--c-divider--MarginBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 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--c-divider--BackgroundColor --pf-global--BackgroundColor--dark-200 $pf-global--BackgroundColor--dark-200 $pf-color-black-800 #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__list--ScrollSnapType --pf-c-nav__list--ScrollSnapTypeAxis --pf-c-nav__list--ScrollSnapTypeStrictness x proximity
	.pf-c-nav	--pf-c-nav__item--ScrollSnapAlign	end
	.pf-c-nav.pf-m-light	--pf-c-nav__item--before--BorderColor	#f0f0f0
--pf-c-nav__item--before--BorderColor --pf-c-nav--m-light__item--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-nav.pf-m-light	--pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor	#f0f0f0
--pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor --pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-nav.pf-m-light	--pf-c-nav__link--Color	#151515
--pf-c-nav__link--Color --pf-c-nav--m-light__link--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-nav.pf-m-light	--pf-c-nav__link--hover--Color	#151515
--pf-c-nav__link--hover--Color --pf-c-nav--m-light__link--hover--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-nav.pf-m-light	--pf-c-nav__link--focus--Color	#151515
--pf-c-nav__link--focus--Color --pf-c-nav--m-light__link--focus--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-nav.pf-m-light	--pf-c-nav__link--active--Color	#151515
--pf-c-nav__link--active--Color --pf-c-nav--m-light__link--active--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-nav.pf-m-light	--pf-c-nav__link--m-current--Color	#151515
--pf-c-nav__link--m-current--Color --pf-c-nav--m-light__link--m-current--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-nav.pf-m-light	--pf-c-nav__link--hover--BackgroundColor	#f0f0f0
--pf-c-nav__link--hover--BackgroundColor --pf-c-nav--m-light__link--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-nav.pf-m-light	--pf-c-nav__link--focus--BackgroundColor	#f0f0f0
--pf-c-nav__link--focus--BackgroundColor --pf-c-nav--m-light__link--focus--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-nav.pf-m-light	--pf-c-nav__link--active--BackgroundColor	#f0f0f0
--pf-c-nav__link--active--BackgroundColor --pf-c-nav--m-light__link--active--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-nav.pf-m-light	--pf-c-nav__link--m-current--BackgroundColor	#f0f0f0
--pf-c-nav__link--m-current--BackgroundColor --pf-c-nav--m-light__link--m-current--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-nav.pf-m-light	--pf-c-nav__link--before--BorderColor	#f0f0f0
--pf-c-nav__link--before--BorderColor --pf-c-nav--m-light__link--before--BorderColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-nav.pf-m-light	--pf-c-nav__link--after--BorderColor	#06c
--pf-c-nav__link--after--BorderColor --pf-c-nav--m-light__link--after--BorderColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav.pf-m-light	--pf-c-nav__link--m-current--after--BorderColor	#06c
--pf-c-nav__link--m-current--after--BorderColor --pf-c-nav--m-light__link--m-current--after--BorderColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav.pf-m-light	--pf-c-nav__subnav__link--hover--after--BorderColor	#d2d2d2
--pf-c-nav__subnav__link--hover--after--BorderColor --pf-c-nav--m-light__subnav__link--hover--after--BorderColor --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-nav.pf-m-light	--pf-c-nav__subnav__link--focus--after--BorderColor	#d2d2d2
--pf-c-nav__subnav__link--focus--after--BorderColor --pf-c-nav--m-light__subnav__link--focus--after--BorderColor --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-nav.pf-m-light	--pf-c-nav__subnav__link--active--after--BorderColor	#d2d2d2
--pf-c-nav__subnav__link--active--after--BorderColor --pf-c-nav--m-light__subnav__link--active--after--BorderColor --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-nav.pf-m-light	--pf-c-nav__subnav__link--m-current--after--BorderColor	#06c
--pf-c-nav__subnav__link--m-current--after--BorderColor --pf-c-nav--m-light__subnav__link--m-current--after--BorderColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav.pf-m-light	--pf-c-nav__section-title--Color	#6a6e73
--pf-c-nav__section-title--Color --pf-c-nav--m-light__section-title--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-nav.pf-m-light	--pf-c-nav__section-title--BorderBottomColor	#f0f0f0
--pf-c-nav__section-title--BorderBottomColor --pf-c-nav--m-light__section-title--BorderBottomColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-nav.pf-m-light .pf-c-divider	--pf-c-divider--after--BackgroundColor	#f0f0f0
--pf-c-divider--after--BackgroundColor --pf-c-nav--m-light--c-divider--BackgroundColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--PaddingTop	0.5rem
--pf-c-nav__link--PaddingTop --pf-c-nav--m-horizontal__link--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--PaddingRight	1rem
--pf-c-nav__link--PaddingRight --pf-c-nav--m-horizontal__link--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--PaddingBottom	0.5rem
--pf-c-nav__link--PaddingBottom --pf-c-nav--m-horizontal__link--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--PaddingLeft	1rem
--pf-c-nav__link--PaddingLeft --pf-c-nav--m-horizontal__link--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--Right	1rem
--pf-c-nav__link--Right --pf-c-nav--m-horizontal__link--Right --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--Left	1rem
--pf-c-nav__link--Left --pf-c-nav--m-horizontal__link--Left --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--Color	#d2d2d2
--pf-c-nav__link--Color --pf-c-nav--m-horizontal__link--Color --pf-global--Color--light-300 $pf-global--Color--light-300 $pf-color-black-300 #d2d2d2
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--hover--Color	#73bcf7
--pf-c-nav__link--hover--Color --pf-c-nav--m-horizontal__link--hover--Color --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--active--Color	#73bcf7
--pf-c-nav__link--active--Color --pf-c-nav--m-horizontal__link--active--Color --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--focus--Color	#73bcf7
--pf-c-nav__link--focus--Color --pf-c-nav--m-horizontal__link--focus--Color --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--m-current--Color	#73bcf7
--pf-c-nav__link--m-current--Color --pf-c-nav--m-horizontal__link--m-current--Color --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--BackgroundColor	transparent
--pf-c-nav__link--BackgroundColor --pf-c-nav--m-horizontal__link--BackgroundColor transparent
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--hover--BackgroundColor	transparent
--pf-c-nav__link--hover--BackgroundColor --pf-c-nav--m-horizontal__link--hover--BackgroundColor transparent
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--focus--BackgroundColor	transparent
--pf-c-nav__link--focus--BackgroundColor --pf-c-nav--m-horizontal__link--focus--BackgroundColor transparent
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--active--BackgroundColor	transparent
--pf-c-nav__link--active--BackgroundColor --pf-c-nav--m-horizontal__link--active--BackgroundColor transparent
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--m-current--BackgroundColor	transparent
--pf-c-nav__link--m-current--BackgroundColor --pf-c-nav--m-horizontal__link--m-current--BackgroundColor transparent
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--before--BorderColor	#73bcf7
--pf-c-nav__link--before--BorderColor --pf-c-nav--m-horizontal__link--before--BorderColor --pf-global--active-color--400 $pf-global--active-color--400 $pf-color-blue-200 #73bcf7
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--before--BorderBottomWidth	0
--pf-c-nav__link--before--BorderBottomWidth --pf-c-nav--m-horizontal__link--before--BorderWidth 0
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--hover--before--BorderBottomWidth	3px
--pf-c-nav__link--hover--before--BorderBottomWidth --pf-c-nav--m-horizontal__link--hover--before--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--focus--before--BorderBottomWidth	3px
--pf-c-nav__link--focus--before--BorderBottomWidth --pf-c-nav--m-horizontal__link--focus--before--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--active--before--BorderBottomWidth	3px
--pf-c-nav__link--active--before--BorderBottomWidth --pf-c-nav--m-horizontal__link--active--before--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-nav.pf-m-horizontal	--pf-c-nav__link--m-current--before--BorderBottomWidth	3px
--pf-c-nav__link--m-current--before--BorderBottomWidth --pf-c-nav--m-horizontal__link--m-current--before--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--PaddingTop	0.5rem
--pf-c-nav__link--PaddingTop --pf-c-nav--m-tertiary__link--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--PaddingRight	1rem
--pf-c-nav__link--PaddingRight --pf-c-nav--m-tertiary__link--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--PaddingBottom	0.5rem
--pf-c-nav__link--PaddingBottom --pf-c-nav--m-tertiary__link--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--PaddingLeft	1rem
--pf-c-nav__link--PaddingLeft --pf-c-nav--m-tertiary__link--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--Right	1rem
--pf-c-nav__link--Right --pf-c-nav--m-tertiary__link--Right --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--Left	1rem
--pf-c-nav__link--Left --pf-c-nav--m-tertiary__link--Left --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--Color	#151515
--pf-c-nav__link--Color --pf-c-nav--m-tertiary__link--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--hover--Color	#06c
--pf-c-nav__link--hover--Color --pf-c-nav--m-tertiary__link--hover--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--active--Color	#06c
--pf-c-nav__link--active--Color --pf-c-nav--m-tertiary__link--active--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--focus--Color	#06c
--pf-c-nav__link--focus--Color --pf-c-nav--m-tertiary__link--focus--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--m-current--Color	#06c
--pf-c-nav__link--m-current--Color --pf-c-nav--m-tertiary__link--m-current--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--BackgroundColor	transparent
--pf-c-nav__link--BackgroundColor --pf-c-nav--m-tertiary__link--BackgroundColor transparent
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--hover--BackgroundColor	transparent
--pf-c-nav__link--hover--BackgroundColor --pf-c-nav--m-tertiary__link--hover--BackgroundColor transparent
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--focus--BackgroundColor	transparent
--pf-c-nav__link--focus--BackgroundColor --pf-c-nav--m-tertiary__link--focus--BackgroundColor transparent
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--active--BackgroundColor	transparent
--pf-c-nav__link--active--BackgroundColor --pf-c-nav--m-tertiary__link--active--BackgroundColor transparent
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--m-current--BackgroundColor	transparent
--pf-c-nav__link--m-current--BackgroundColor --pf-c-nav--m-tertiary__link--m-current--BackgroundColor transparent
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--before--BorderColor	#06c
--pf-c-nav__link--before--BorderColor --pf-c-nav--m-tertiary__link--before--BorderColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--before--BorderBottomWidth	0
--pf-c-nav__link--before--BorderBottomWidth --pf-c-nav--m-tertiary__link--before--BorderWidth 0
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--hover--before--BorderBottomWidth	3px
--pf-c-nav__link--hover--before--BorderBottomWidth --pf-c-nav--m-tertiary__link--hover--before--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--focus--before--BorderBottomWidth	3px
--pf-c-nav__link--focus--before--BorderBottomWidth --pf-c-nav--m-tertiary__link--focus--before--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--active--before--BorderBottomWidth	3px
--pf-c-nav__link--active--before--BorderBottomWidth --pf-c-nav--m-tertiary__link--active--before--BorderWidth --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-nav.pf-m-tertiary	--pf-c-nav__link--m-current--before--BorderBottomWidth	3px
--pf-c-nav__link--m-current--before--BorderBottomWidth