| .pf-v6-c-nav | --pf-v6-c-nav__link--PaddingBlockStart | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
| .pf-v6-c-nav | --pf-v6-c-nav--PaddingInlineEnd | |
| .pf-v6-c-nav | --pf-v6-c-nav--RowGap | |
- --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--AlignItems | |
| .pf-v6-c-nav | --pf-v6-c-nav--FontSize | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
| .pf-v6-c-nav | --pf-v6-c-nav__list--ScrollSnapTypeAxis | |
| .pf-v6-c-nav | --pf-v6-c-nav__list--ScrollSnapTypeStrictness | |
| .pf-v6-c-nav | --pf-v6-c-nav__list--ScrollSnapType | |
- --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 | |
| .pf-v6-c-nav | --pf-v6-c-nav__section-title--FontWeight | |
- --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 | |
- --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 | |
| .pf-v6-c-nav | --pf-v6-c-nav__section-title--PaddingBlockEnd | |
| .pf-v6-c-nav | --pf-v6-c-nav__section-title--PaddingInlineStart | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
| .pf-v6-c-nav | --pf-v6-c-nav__item--current--accent--ScaleY | |
| .pf-v6-c-nav | --pf-v6-c-nav__item--accent--TransitionDuration | |
| .pf-v6-c-nav | --pf-v6-c-nav__item--current--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 | --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 | |
| .pf-v6-c-nav | --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate | |
| .pf-v6-c-nav | --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform | |
- --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 | |
- --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 | |
| .pf-v6-c-nav | --pf-v6-c-nav__link--BorderRadius | |
- --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 | |
| .pf-v6-c-nav | --pf-v6-c-nav__link--Color | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
| .pf-v6-c-nav | --pf-v6-c-nav__subnav--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 | --pf-v6-c-nav__subnav--PaddingBlockStart | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
| .pf-v6-c-nav | --pf-v6-c-nav__subnav--TransitionDuration--collapse | |
- --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 | |
| .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 | |
| .pf-v6-c-nav | --pf-v6-c-nav__subnav--hidden--TranslateY | |
| .pf-v6-c-nav | --pf-v6-c-nav__scroll-button--BorderColor | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
| .pf-v6-c-nav | --pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd | |
| .pf-v6-c-nav | --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart | |
| .pf-v6-c-nav | --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd | |
| .pf-v6-c-nav | --pf-v6-c-nav--m-horizontal--m-scrollable__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 | --pf-v6-c-nav--m-horizontal--m-scrollable__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
|
| .pf-v6-c-nav | --pf-v6-c-nav--m-horizontal--m-subnav--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 | --pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
| .pf-v6-c-nav.pf-m-docked | --pf-v6-c-nav--PaddingBlockEnd | |
| .pf-v6-c-nav.pf-m-docked | --pf-v6-c-nav__list--RowGap | |
- --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 | |
- --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 | |
- --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 | |
| .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown | --pf-v6-c-menu--PaddingBlockStart | |
| .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown | --pf-v6-c-menu--PaddingBlockEnd | |
| .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown | --pf-v6-c-menu--BackgroundColor | |
- --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 | |
| .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown | --pf-v6-c-menu__list-item--hover--BackgroundColor | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
| .pf-v6-c-nav__subnav[hidden] | --pf-v6-c-nav__subnav--PaddingBlockEnd | |
| .pf-v6-c-nav__subnav[hidden] | --pf-v6-c-nav__subnav--TranslateY | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
| .pf-v6-c-nav__scroll-button:first-of-type .pf-v6-c-button | --pf-v6-c-button--BorderStartStartRadius | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
| .pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav | --pf-v6-c-nav--BackgroundColor | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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 | |
- --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
|