Navigation

A navigation component organizes and communicates an application's structure and content in a central location, making it easy to find information and accomplish tasks.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-nav	--pf-v6-c-nav__link--PaddingBlockStart	0.5rem
--pf-v6-c-nav__link--PaddingBlockStart --pf-t--global--spacer--control--vertical--plain --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-nav	--pf-v6-c-nav__link--PaddingBlockEnd	0.5rem
--pf-v6-c-nav__link--PaddingBlockEnd --pf-t--global--spacer--control--vertical--plain --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-nav	--pf-v6-c-nav__link--PaddingInlineStart	1rem
--pf-v6-c-nav__link--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-nav	--pf-v6-c-nav__link--PaddingInlineEnd	1rem
--pf-v6-c-nav__link--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-nav	--pf-v6-c-nav__list--RowGap	0.5rem
--pf-v6-c-nav__list--RowGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-nav	--pf-v6-c-nav__list--ColumnGap	0.25rem
--pf-v6-c-nav__list--ColumnGap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav	--pf-v6-c-nav--PaddingBlockStart	1rem
--pf-v6-c-nav--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-nav	--pf-v6-c-nav--PaddingBlockEnd	1rem
--pf-v6-c-nav--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-nav	--pf-v6-c-nav--PaddingInlineStart	0
	.pf-v6-c-nav	--pf-v6-c-nav--PaddingInlineEnd	0
	.pf-v6-c-nav	--pf-v6-c-nav--RowGap	1.5rem
--pf-v6-c-nav--RowGap --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-nav	--pf-v6-c-nav--ColumnGap	0
	.pf-v6-c-nav	--pf-v6-c-nav--AlignItems	baseline
	.pf-v6-c-nav	--pf-v6-c-nav--FontSize	0.875rem
--pf-v6-c-nav--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-nav	--pf-v6-c-nav--FontWeight	400
--pf-v6-c-nav--FontWeight --pf-t--global--font--weight--body--default --pf-t--global--font--weight--100 400
	.pf-v6-c-nav	--pf-v6-c-nav--LineHeight	1.5
--pf-v6-c-nav--LineHeight --pf-t--global--font--line-height--body --pf-t--global--font--line-height--200 1.5
	.pf-v6-c-nav	--pf-v6-c-nav--OutlineOffset	calc(0.25rem * -1)
--pf-v6-c-nav--OutlineOffset calc(--pf-t--global--spacer--xs * -1) calc(--pf-t--global--spacer--100 * -1) calc(0.25rem * -1)
	.pf-v6-c-nav	--pf-v6-c-nav--BackgroundColor	transparent
	.pf-v6-c-nav	--pf-v6-c-nav__list--ScrollSnapTypeAxis	x
	.pf-v6-c-nav	--pf-v6-c-nav__list--ScrollSnapTypeStrictness	proximity
	.pf-v6-c-nav	--pf-v6-c-nav__list--ScrollSnapType	x proximity
--pf-v6-c-nav__list--ScrollSnapType --pf-v6-c-nav__list--ScrollSnapTypeAxis --pf-v6-c-nav__list--ScrollSnapTypeStrictness x proximity
	.pf-v6-c-nav	--pf-v6-c-nav__item--ScrollSnapAlign	end
	.pf-v6-c-nav	--pf-v6-c-nav__section-title--FontWeight	600
--pf-v6-c-nav__section-title--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-nav	--pf-v6-c-nav__section-title--Color	(In light theme) #151515
--pf-v6-c-nav__section-title--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-nav	--pf-v6-c-nav__section-title--PaddingBlockStart	0
	.pf-v6-c-nav	--pf-v6-c-nav__section-title--PaddingBlockEnd	0
	.pf-v6-c-nav	--pf-v6-c-nav__section-title--PaddingInlineStart	1rem
--pf-v6-c-nav__section-title--PaddingInlineStart --pf-v6-c-nav__link--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-nav	--pf-v6-c-nav__section-title--PaddingInlineEnd	1rem
--pf-v6-c-nav__section-title--PaddingInlineEnd --pf-v6-c-nav__link--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-nav	--pf-v6-c-nav__item--RowGap	0.5rem
--pf-v6-c-nav__item--RowGap --pf-v6-c-nav__list--RowGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-nav	--pf-v6-c-nav__item--accent--size	3px
--pf-v6-c-nav__item--accent--size --pf-t--global--border--width--extra-strong --pf-t--global--border--width--300 3px
	.pf-v6-c-nav	--pf-v6-c-nav__item--accent--color	(In light theme) #0066cc
--pf-v6-c-nav__item--accent--color --pf-t--global--color--brand--accent--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-nav	--pf-v6-c-nav__item--accent--offset	calc(0.5rem * -1)
--pf-v6-c-nav__item--accent--offset calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-nav	--pf-v6-c-nav__item--accent--BorderRadius	6px
--pf-v6-c-nav__item--accent--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-nav	--pf-v6-c-nav__item--accent--ScaleY	0
	.pf-v6-c-nav	--pf-v6-c-nav__item--current--accent--ScaleY	1
	.pf-v6-c-nav	--pf-v6-c-nav__item--accent--TransitionDuration	0
	.pf-v6-c-nav	--pf-v6-c-nav__item--current--accent--TransitionDuration	200ms
--pf-v6-c-nav__item--current--accent--TransitionDuration --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-nav	--pf-v6-c-nav__item--accent--TransitionTimingFunction	cubic-bezier(0, 0, .2, 1)
--pf-v6-c-nav__item--accent--TransitionTimingFunction --pf-t--global--motion--timing-function--decelerate --pf-t--global--timing-function--300 cubic-bezier(0, 0, .2, 1)
	.pf-v6-c-nav	--pf-v6-c-nav__item__toggle-icon--Rotate	0
	.pf-v6-c-nav	--pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate	-180deg
	.pf-v6-c-nav	--pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform	100ms
--pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform --pf-t--global--motion--duration--icon--default --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-nav	--pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-nav	--pf-v6-c-nav__link--ColumnGap	0.5rem
--pf-v6-c-nav__link--ColumnGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-nav	--pf-v6-c-nav__link--AlignItems	baseline
	.pf-v6-c-nav	--pf-v6-c-nav__link--BorderRadius	6px
--pf-v6-c-nav__link--BorderRadius --pf-t--global--border--radius--action--plain--default --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-nav	--pf-v6-c-nav__link--BackgroundColor	(In light theme) rgb(255, 255, 255, 0.0000)
--pf-v6-c-nav__link--BackgroundColor --pf-t--global--background--color--action--plain--default rgb(255, 255, 255, 0.0000)
	.pf-v6-c-nav	--pf-v6-c-nav__link--WhiteSpace	normal
	.pf-v6-c-nav	--pf-v6-c-nav__link--Color	(In light theme) #4d4d4d
--pf-v6-c-nav__link--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-nav	--pf-v6-c-nav__link--hover--Color	(In light theme) #151515
--pf-v6-c-nav__link--hover--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-nav	--pf-v6-c-nav__link--hover--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-nav__link--hover--BackgroundColor --pf-t--global--background--color--action--plain--alt--hover --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-nav	--pf-v6-c-nav__link--m-current--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-nav__link--m-current--BackgroundColor --pf-t--global--background--color--action--plain--alt--clicked --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-nav	--pf-v6-c-nav__link--m-current--Color	(In light theme) #151515
--pf-v6-c-nav__link--m-current--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-nav	--pf-v6-c-nav__link--BorderColor	(In light theme) rgb(255, 255, 255, 0.0000)
--pf-v6-c-nav__link--BorderColor --pf-t--global--border--color--high-contrast rgb(255, 255, 255, 0.0000)
	.pf-v6-c-nav	--pf-v6-c-nav__link--BorderWidth	0px
--pf-v6-c-nav__link--BorderWidth --pf-t--global--border--width--action--plain--default 0px
	.pf-v6-c-nav	--pf-v6-c-nav__link--hover--BorderWidth	0px
--pf-v6-c-nav__link--hover--BorderWidth --pf-t--global--border--width--action--plain--hover 0px
	.pf-v6-c-nav	--pf-v6-c-nav__link--m-current--BorderWidth	0px
--pf-v6-c-nav__link--m-current--BorderWidth --pf-t--global--border--width--action--plain--clicked 0px
	.pf-v6-c-nav	--pf-v6-c-nav__link--TransitionDuration--background-color	200ms
--pf-v6-c-nav__link--TransitionDuration--background-color --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-nav	--pf-v6-c-nav__link--TransitionTimingFunction--background-color	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-nav__link--TransitionTimingFunction--background-color --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-nav	--pf-v6-c-nav__link--m-current--TransitionDuration--color	100ms
--pf-v6-c-nav__link--m-current--TransitionDuration--color --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-nav	--pf-v6-c-nav__link--m-current--TransitionTimingFunction--color	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-nav__link--m-current--TransitionTimingFunction--color --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-nav	--pf-v6-c-nav__link-icon--Color	(In light theme) #707070
--pf-v6-c-nav__link-icon--Color --pf-t--global--icon--color--subtle --pf-t--global--icon--color--200 --pf-t--color--gray--50 #707070
	.pf-v6-c-nav	--pf-v6-c-nav__link--m-current__link-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-nav__link--m-current__link-icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-nav	--pf-v6-c-nav__link-text--FontSize	initial
	.pf-v6-c-nav	--pf-v6-c-nav__subnav--RowGap	3px
--pf-v6-c-nav__subnav--RowGap --pf-t--global--border--width--extra-strong --pf-t--global--border--width--300 3px
	.pf-v6-c-nav	--pf-v6-c-nav__subnav--PaddingBlockStart	0.5rem
--pf-v6-c-nav__subnav--PaddingBlockStart --pf-v6-c-nav__item--RowGap --pf-v6-c-nav__list--RowGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-nav	--pf-v6-c-nav__subnav--PaddingBlockEnd	0.5rem
--pf-v6-c-nav__subnav--PaddingBlockEnd --pf-v6-c-nav__item--RowGap --pf-v6-c-nav__list--RowGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-nav	--pf-v6-c-nav__subnav--PaddingInlineStart	1rem
--pf-v6-c-nav__subnav--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-nav	--pf-v6-c-nav__subnav--TransitionDuration--expand	200ms
--pf-v6-c-nav__subnav--TransitionDuration--expand --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-nav	--pf-v6-c-nav__subnav--TransitionDuration--expand--slide	0s
	.pf-v6-c-nav	--pf-v6-c-nav__subnav--TransitionDuration--collapse	100ms
--pf-v6-c-nav__subnav--TransitionDuration--collapse --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-nav	--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide	0s
	.pf-v6-c-nav	--pf-v6-c-nav__subnav--TransitionTimingFunction--expand	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-nav__subnav--TransitionTimingFunction--expand --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-nav	--pf-v6-c-nav__subnav--TranslateY	0
	.pf-v6-c-nav	--pf-v6-c-nav__subnav--hidden--TranslateY	0
	.pf-v6-c-nav	--pf-v6-c-nav__scroll-button--BorderColor	(In light theme) #e0e0e0
--pf-v6-c-nav__scroll-button--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-nav	--pf-v6-c-nav__scroll-button--BorderWidth	1px
--pf-v6-c-nav__scroll-button--BorderWidth --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 1px
	.pf-v6-c-nav	--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius	999px
--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-nav	--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderEndStartRadius	999px
--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderEndStartRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-nav	--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderStartEndRadius	999px
--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderStartEndRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-nav	--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderEndEndRadius	999px
--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderEndEndRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-nav	--pf-v6-c-nav__toggle--PaddingInlineStart	0.5rem
--pf-v6-c-nav__toggle--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-nav	--pf-v6-c-nav__toggle--PaddingInlineEnd	0.5rem
--pf-v6-c-nav__toggle--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-nav	--pf-v6-c-nav__toggle--TranslateY	calc((1.5 * 0.875rem / 2) - 50%)
--pf-v6-c-nav__toggle--TranslateY calc((--pf-v6-c-nav--LineHeight * --pf-v6-c-nav--FontSize / 2) - 50%) calc((--pf-t--global--font--line-height--body * --pf-t--global--font--size--body--default / 2) - 50%) calc((--pf-t--global--font--line-height--200 * --pf-t--global--font--size--sm / 2) - 50%) calc((1.5 * --pf-t--global--font--size--200 / 2) - 50%) calc((1.5 * 0.875rem / 2) - 50%)
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal__list--PaddingBlockStart	0
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd	0
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal__list--PaddingInlineStart	0
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd	0
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart	0.25rem
--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart --pf-v6-c-nav__list--ColumnGap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd	0.25rem
--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd --pf-v6-c-nav__list--ColumnGap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-subnav--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-nav--m-horizontal--m-subnav--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius	999px
--pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-subnav--BorderWidth	0px
--pf-v6-c-nav--m-horizontal--m-subnav--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-subnav--BorderColor	(In light theme) rgb(255, 255, 255, 0.0000)
--pf-v6-c-nav--m-horizontal--m-subnav--BorderColor --pf-t--global--border--color--high-contrast rgb(255, 255, 255, 0.0000)
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart	0.25rem
--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd	0.25rem
--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart	1rem
--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd	1rem
--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineStart	0.25rem
--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineStart --pf-v6-c-nav__list--ColumnGap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd	0.25rem
--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd --pf-v6-c-nav__list--ColumnGap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart	0.25rem
--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd	0.25rem
--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart	1rem
--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-nav	--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd	1rem
--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-nav	--pf-v6-c-nav--m-docked__list--RowGap	0.25rem
--pf-v6-c-nav--m-docked__list--RowGap --pf-t--global--spacer--gap--action-to-action--plain --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav	--pf-v6-c-nav--m-docked__link--PaddingInlineStart	0.5rem
--pf-v6-c-nav--m-docked__link--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-nav	--pf-v6-c-nav--m-docked__link--PaddingInlineEnd	0.5rem
--pf-v6-c-nav--m-docked__link--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-nav	--pf-v6-c-nav--m-docked__link--hover--BackgroundColor	(In light theme) rgb(199, 199, 199, 0.2500)
--pf-v6-c-nav--m-docked__link--hover--BackgroundColor --pf-t--global--background--color--action--plain--hover --pf-t--global--background--color--600 rgb(199, 199, 199, 0.2500)
	.pf-v6-c-nav	--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor	(In light theme) rgb(199, 199, 199, 0.2500)
--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor --pf-t--global--background--color--action--plain--clicked --pf-t--global--background--color--600 rgb(199, 199, 199, 0.2500)
	.pf-v6-c-nav.pf-m-inset	--pf-v6-c-nav--PaddingInlineStart	1rem
--pf-v6-c-nav--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-nav.pf-m-inset	--pf-v6-c-nav--PaddingInlineEnd	1rem
--pf-v6-c-nav--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-nav.pf-m-docked	--pf-v6-c-nav--PaddingBlockStart	0
	.pf-v6-c-nav.pf-m-docked	--pf-v6-c-nav--PaddingBlockEnd	0
	.pf-v6-c-nav.pf-m-docked	--pf-v6-c-nav__list--RowGap	0.25rem
--pf-v6-c-nav__list--RowGap --pf-v6-c-nav--m-docked__list--RowGap --pf-t--global--spacer--gap--action-to-action--plain --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav.pf-m-docked	--pf-v6-c-nav__link--PaddingInlineStart	0.5rem
--pf-v6-c-nav__link--PaddingInlineStart --pf-v6-c-nav--m-docked__link--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-nav.pf-m-docked	--pf-v6-c-nav__link--PaddingInlineEnd	0.5rem
--pf-v6-c-nav__link--PaddingInlineEnd --pf-v6-c-nav--m-docked__link--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-nav.pf-m-docked	--pf-v6-c-nav__link--hover--BackgroundColor	(In light theme) rgb(199, 199, 199, 0.2500)
--pf-v6-c-nav__link--hover--BackgroundColor --pf-v6-c-nav--m-docked__link--hover--BackgroundColor --pf-t--global--background--color--action--plain--hover --pf-t--global--background--color--600 rgb(199, 199, 199, 0.2500)
	.pf-v6-c-nav.pf-m-docked	--pf-v6-c-nav__link--m-current--BackgroundColor	(In light theme) rgb(199, 199, 199, 0.2500)
--pf-v6-c-nav__link--m-current--BackgroundColor --pf-v6-c-nav--m-docked__link--m-current--BackgroundColor --pf-t--global--background--color--action--plain--clicked --pf-t--global--background--color--600 rgb(199, 199, 199, 0.2500)
	.pf-v6-c-nav .pf-v6-c-menu	--pf-v6-c-menu--MinWidth	100%
	.pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown	--pf-v6-c-menu--PaddingBlockStart	0
	.pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown	--pf-v6-c-menu--PaddingBlockEnd	0
	.pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown	--pf-v6-c-menu--BackgroundColor	transparent
--pf-v6-c-menu--BackgroundColor --pf-v6-c-nav--BackgroundColor transparent
	.pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown	--pf-v6-c-menu--BoxShadow	none
	.pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown	--pf-v6-c-menu__list-item--hover--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-menu__list-item--hover--BackgroundColor --pf-v6-c-nav__link--hover--BackgroundColor --pf-t--global--background--color--action--plain--alt--hover --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-nav__nav	--pf-v6-c-nav__item--RowGap--row-offset	calc(0.5rem / 2 * -1)
--pf-v6-c-nav__item--RowGap--row-offset calc(--pf-v6-c-nav__list--RowGap / 2 * -1) calc(--pf-t--global--spacer--sm / 2 * -1) calc(--pf-t--global--spacer--200 / 2 * -1) calc(0.5rem / 2 * -1)
	.pf-v6-c-nav__nav	--pf-v6-c-nav__link--clickable-inset--Block	calc(0.5rem / 2 * -1)
--pf-v6-c-nav__link--clickable-inset--Block --pf-v6-c-nav__item--RowGap--row-offset calc(--pf-v6-c-nav__list--RowGap / 2 * -1) calc(--pf-t--global--spacer--sm / 2 * -1) calc(--pf-t--global--spacer--200 / 2 * -1) calc(0.5rem / 2 * -1)
	.pf-v6-c-nav__nav	--pf-v6-c-nav__button--RowGap--row-offset	calc(0.5rem * -1)
--pf-v6-c-nav__button--RowGap--row-offset calc(--pf-v6-c-nav__item--RowGap * -1) calc(--pf-v6-c-nav__list--RowGap * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-nav__subnav	--pf-v6-c-nav__list--RowGap	3px
--pf-v6-c-nav__list--RowGap --pf-v6-c-nav__subnav--RowGap --pf-t--global--border--width--extra-strong --pf-t--global--border--width--300 3px
	.pf-v6-c-nav__subnav[hidden]	--pf-v6-c-nav__subnav--TransitionDelay--expand--focus	200ms
--pf-v6-c-nav__subnav--TransitionDelay--expand--focus --pf-v6-c-nav__subnav--TransitionDuration--expand --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-nav__subnav[hidden]	--pf-v6-c-nav__subnav--TransitionDuration--expand	100ms
--pf-v6-c-nav__subnav--TransitionDuration--expand --pf-v6-c-nav__subnav--TransitionDuration--collapse --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-nav__subnav[hidden]	--pf-v6-c-nav__subnav--TransitionDuration--expand--slide	0s
--pf-v6-c-nav__subnav--TransitionDuration--expand--slide --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide 0s
	.pf-v6-c-nav__subnav[hidden]	--pf-v6-c-nav__subnav--PaddingBlockStart	0
	.pf-v6-c-nav__subnav[hidden]	--pf-v6-c-nav__subnav--PaddingBlockEnd	0
	.pf-v6-c-nav__subnav[hidden]	--pf-v6-c-nav__subnav--TranslateY	0
--pf-v6-c-nav__subnav--TranslateY --pf-v6-c-nav__subnav--hidden--TranslateY 0
	.pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current)	--pf-v6-c-nav__item--accent--ScaleY	1
--pf-v6-c-nav__item--accent--ScaleY --pf-v6-c-nav__item--current--accent--ScaleY 1
	.pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current)	--pf-v6-c-nav__item--accent--TransitionDuration	200ms
--pf-v6-c-nav__item--accent--TransitionDuration --pf-v6-c-nav__item--current--accent--TransitionDuration --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-nav__link:hover	--pf-v6-c-nav__link--BorderWidth	0px
--pf-v6-c-nav__link--BorderWidth --pf-v6-c-nav__link--hover--BorderWidth --pf-t--global--border--width--action--plain--hover 0px
	.pf-v6-c-nav__link.pf-m-current	--pf-v6-c-nav__link-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-nav__link-icon--Color --pf-v6-c-nav__link--m-current__link-icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-nav__link.pf-m-current	--pf-v6-c-nav__link--BorderWidth	0px
--pf-v6-c-nav__link--BorderWidth --pf-v6-c-nav__link--m-current--BorderWidth --pf-t--global--border--width--action--plain--clicked 0px
	.pf-v6-c-nav__item:where(.pf-m-flyout) .pf-v6-c-nav__toggle-icon	--pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate	0
	.pf-v6-c-nav__scroll-button:first-of-type .pf-v6-c-button	--pf-v6-c-button--BorderStartStartRadius	999px
--pf-v6-c-button--BorderStartStartRadius --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-nav__scroll-button:first-of-type .pf-v6-c-button	--pf-v6-c-button--BorderEndStartRadius	999px
--pf-v6-c-button--BorderEndStartRadius --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderEndStartRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-nav__scroll-button:last-of-type .pf-v6-c-button	--pf-v6-c-button--BorderStartEndRadius	999px
--pf-v6-c-button--BorderStartEndRadius --pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderStartEndRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-nav__scroll-button:last-of-type .pf-v6-c-button	--pf-v6-c-button--BorderEndEndRadius	999px
--pf-v6-c-button--BorderEndEndRadius --pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderEndEndRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-nav:where(.pf-m-horizontal)	--pf-v6-c-nav__item--accent--content	none
	.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav	--pf-v6-c-nav--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-nav--BackgroundColor --pf-v6-c-nav--m-horizontal--m-subnav--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav	--pf-v6-c-nav--m-horizontal__list--PaddingBlockStart	0.25rem
--pf-v6-c-nav--m-horizontal__list--PaddingBlockStart --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav	--pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd	0.25rem
--pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav	--pf-v6-c-nav--m-horizontal__list--PaddingInlineStart	1rem
--pf-v6-c-nav--m-horizontal__list--PaddingInlineStart --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav	--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd	1rem
--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav	--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart	0.25rem
--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart --pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineStart --pf-v6-c-nav__list--ColumnGap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav	--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd	0.25rem
--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd --pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd --pf-v6-c-nav__list--ColumnGap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav	--pf-v6-c-nav__link--PaddingBlockStart	0.25rem
--pf-v6-c-nav__link--PaddingBlockStart --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav	--pf-v6-c-nav__link--PaddingBlockEnd	0.25rem
--pf-v6-c-nav__link--PaddingBlockEnd --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-scrollable	--pf-v6-c-nav--m-horizontal__list--PaddingInlineStart	0.25rem
--pf-v6-c-nav--m-horizontal__list--PaddingInlineStart --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart --pf-v6-c-nav__list--ColumnGap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-scrollable	--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd	0.25rem
--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd --pf-v6-c-nav__list--ColumnGap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem