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 item icons

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
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	getUniqueId()	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
component	No type info	'li'
role	No type info	'presentation'

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
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.
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--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--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	500
--pf-v6-c-nav__section-title--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 500
	.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--border--color--clicked --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	90deg
	.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--small --pf-t--global--border--radius--200 6px
	.pf-v6-c-nav	--pf-v6-c-nav__link--BackgroundColor	(In light theme) rgba(255, 255, 255, 0.0000)
--pf-v6-c-nav__link--BackgroundColor --pf-t--global--background--color--action--plain--default rgba(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) rgba(255, 255, 255, 0.0000)
--pf-v6-c-nav__link--BorderColor --pf-t--global--border--color--high-contrast rgba(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) #c7c7c7
--pf-v6-c-nav__scroll-button--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.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) rgba(255, 255, 255, 0.0000)
--pf-v6-c-nav--m-horizontal--m-subnav--BorderColor --pf-t--global--border--color--high-contrast rgba(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) rgba(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 rgba(199, 199, 199, 0.2500)
	.pf-v6-c-nav	--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor	(In light theme) rgba(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 rgba(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) rgba(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 rgba(199, 199, 199, 0.2500)
	.pf-v6-c-nav.pf-m-docked	--pf-v6-c-nav__link--m-current--BackgroundColor	(In light theme) rgba(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 rgba(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

Edit this page on GitHub