Navigation

Examples

Default

Grouped

The following example shows two navigation groups, each with a title prop passed into the nav group component. To keep nav groups accessible an aria-label must be passed in if the title prop is not passed in.

Expandable

Expandable third level

Mixed

Horizontal subnav

A flyout should be a Menu component. Press space or right arrow to open a flyout using the keyboard, use the arrow keys to navigate between flyout items, and press escape or left arrow to close a flyout.

Drilldown

With icons

Docked

The docked variant of Navigation displays only icons passed to child NavItems or NavExpandable. Text becomes visible when isDockTextExpanded or isDockExpandableExpanded are applied to an outer page or compass dock.

NavExpandable items should include the hasExpandableIcon prop to indicate their expandable nature while in the collapsed state of the docked nav as the caret will not be rendered.

See the docked nav demo for a fully functional example.

Types

NavSelectClickHandler

The NavItem onClick prop accepts the NavSelectClickHandler type, which is made up of the following argument and return types:

(
  event: React.FormEvent<HTMLInputElement>,
  itemId: number | string,
  groupId: number | string,
  to: string
) => void;

Props

Nav

*required
Name	Type	Default	Description
aria-label	string		Accessible label for the nav when there are multiple navs on the page
children	React.ReactNode		Anything that can be rendered inside of the nav
className	string		Additional classes added to the container
isTextExpanded Beta	boolean		Flag indicating the docked nav should display text. Only applies when variant is docked.
onSelect	( event: React.FormEvent<HTMLInputElement>, selectedItem: { groupId: number \| string; itemId: number \| string; to: string; } ) => void	() => undefined	Callback for updating when item selection changes
onToggle	( event: React.MouseEvent<HTMLButtonElement>, toggledItem: { groupId: number \| string; isExpanded: boolean; } ) => void	() => undefined	Callback for when a list is expanded or collapsed
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean	true	Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
variant	'default' \| 'horizontal' \| 'horizontal-subnav' \| 'docked'		The nav variant to use. Docked is in beta.

NavList

*required
Name	Type	Default	Description
backScrollAriaLabel	string	'Scroll back'	Aria-label for the back scroll button
children	React.ReactNode		Children nodes
className	string		Additional classes added to the list
forwardScrollAriaLabel	string	'Scroll foward'	Aria-label for the forward scroll button

NavGroup

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

NavItem

*required
Name	Type	Default	Description

NavItemSeparator

*required
Name	Type	Default	Description
className	string		Additional classes added to the divider
component	'hr' \| 'li' \| 'div'	'li'	The component type to use
inset	{ default?: 'insetNone' \| 'insetXs' \| 'insetSm' \| 'insetMd' \| 'insetLg' \| 'insetXl' \| 'inset2xl' \| 'inset3xl'; sm?: 'insetNone' \| 'insetXs' \| 'insetSm' \| 'insetMd' \| 'insetLg' \| 'insetXl' \| 'inset2xl' \| 'inset3xl'; md?: 'insetNone' \| 'insetXs' \| 'insetSm' \| 'insetMd' \| 'insetLg' \| 'insetXl' \| 'inset2xl' \| 'inset3xl'; lg?: 'insetNone' \| 'insetXs' \| 'insetSm' \| 'insetMd' \| 'insetLg' \| 'insetXl' \| 'inset2xl' \| 'inset3xl'; xl?: 'insetNone' \| 'insetXs' \| 'insetSm' \| 'insetMd' \| 'insetLg' \| 'insetXl' \| 'inset2xl' \| 'inset3xl'; '2xl'?: 'insetNone' \| 'insetXs' \| 'insetSm' \| 'insetMd' \| 'insetLg' \| 'insetXl' \| 'inset2xl' \| 'inset3xl'; }		Insets at various breakpoints.
orientation	{ default?: 'vertical' \| 'horizontal'; sm?: 'vertical' \| 'horizontal'; md?: 'vertical' \| 'horizontal'; lg?: 'vertical' \| 'horizontal'; xl?: 'vertical' \| 'horizontal'; '2xl'?: 'vertical' \| 'horizontal'; }		Indicates how the divider will display at various breakpoints. Vertical divider must be in a flex layout.
role	'separator' \| 'presentation'	'presentation'	The ARIA role of the divider when the component property has a value other than "hr".

NavExpandable

*required
Name	Type	Default	Description
titlerequired	React.ReactNode		Title content shown for the expandable list
buttonProps	any		Additional props added to the NavExpandable <button>
children	React.ReactNode	''	Anything that can be rendered inside of the expandable list
className	string	''	Additional classes added to the container
groupId	string \| number	null	Group identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
hasExpandableIcon	boolean	false	Adds an expandable icon to indicate the section is expandable
icon	React.ReactNode		Icon added before the nav item children.
id	string	''	Identifier to use for the section aria label
isActive	boolean	false	If true makes the expandable list title active
isExpanded	boolean	false	Boolean to pragmatically expand or collapse section
onExpand	(event: React.MouseEvent<HTMLButtonElement, MouseEvent>, val: boolean) => void		allow consumer to optionally override this callback and manage expand state externally. if passed will not call Nav's onToggle.
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean
srText	string	''	If defined, screen readers will read this text instead of the list title

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-icon--hover--Color	(In light theme) #1f1f1f
--pf-v6-c-nav__link-icon--hover--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--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-v6-c-nav--m-docked__link-expandable-icon--Color	(In light theme) #707070
--pf-v6-c-nav--m-docked__link-expandable-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--m-docked__link-expandable-icon--offset	0.75em
	.pf-v6-c-nav	--pf-v6-c-nav--m-docked__link-expandable-icon--Scale	0.8
	.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
	:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock):not(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-m-docked .pf-v6-c-nav__item:has(.pf-v6-c-nav__subnav .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
	:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock):not(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-m-docked .pf-v6-c-nav__item:has(.pf-v6-c-nav__subnav .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:hover	--pf-v6-c-nav__link-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-nav__link-icon--Color --pf-v6-c-nav__link-icon--hover--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock):not(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-nav__item:has(.pf-v6-c-nav__subnav .pf-v6-c-nav__link.pf-m-current) > .pf-v6-c-nav__link	--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
	:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock):not(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-nav__item:has(.pf-v6-c-nav__subnav .pf-v6-c-nav__link.pf-m-current) > .pf-v6-c-nav__link	--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

Edit this page on GitHub