Skip to Content
Patternfly Logo

Navigation

Info alert:Opt-in feature

In a future breaking-change release, the nav will default to the dark theme. You can opt-in and update to use the nav dark theme now by setting the theme prop to 'dark'

Navigation is used to organize an application’s structure and content, making it easy to find information and accomplish tasks. Navigation communicates relationships, context, and actions a user can take within an application. Related design guidelines: Navigation system

ExamplesPropsCSS Variables

Examples

Grouped

Props

Nav properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullAnything that can be rendered inside of the nav
classNamestringNo''Additional classes added to the container
onSelect(selectedItem: { groupId: number | string; itemId: number | string; to: string; event: React.FormEvent<HTMLInputElement>; }) => voidNo() => undefinedCallback for updating when item selection changes
onToggle(toggledItem: { groupId: number | string; isExpanded: boolean; event: React.FormEvent<HTMLInputElement>; }) => voidNo() => undefinedCallback for when a list is expanded or collapsed
aria-labelstringNo''Accessibility label
theme'dark' | 'light'No'light'Indicates which theme color to use
NavList properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullChildren nodes
classNamestringNo''Additional classes added to the list
variant'default' | 'simple' | 'horizontal' | 'tertiary'No'default'Indicates the list type.
ariaLeftScrollstringNo'Scroll left'aria-label for the left scroll button
ariaRightScrollstringNo'Scroll right'aria-label for the right scroll button
NavGroup properties
NameTypeRequiredDefaultDescription
titlestringYesTitle shown for the group
childrenReact.ReactNodeNonullAnything that can be rendered inside of the group
classNamestringNo''Additional classes added to the container
idstringNogetUniqueId()Identifier to use for the section aria label
NavItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the nav item
classNamestringNo''Additional classes added to the nav item
tostringNo''Target navigation link
isActivebooleanNofalseFlag indicating whether the item is active
groupIdstring | number | nullNonullGroup identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
itemIdstring | number | nullNonullItem identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
preventDefaultbooleanNofalseIf true prevents the default anchor link action to occur. Set to true if you want to handle navigation yourself.
onClickNavSelectClickHandlerNonullCallback for item click
componentReact.ReactNodeNo'a'Component used to render NavItems
NavItemSeparator properties
NameTypeRequiredDefaultDescription
classNameNo''
NavExpandable properties
NameTypeRequiredDefaultDescription
titlestringYesTitle shown for the expandable list
srTextstringNo''If defined, screen readers will read this text instead of the list title
isExpandedbooleanNofalseBoolean to programatically expand or collapse section
childrenReact.ReactNodeNo''Anything that can be rendered inside of the expandable list
classNamestringNo''Additional classes added to the container
groupIdstring | numberNonullGroup identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
isActivebooleanNofalseIf true makes the expandable list title active
idstringNo''Identifier to use for the section aria label
onExpand(e: React.MouseEvent<HTMLLIElement, MouseEvent>, val: boolean) => voidNoallow consumer to optionally override this callback and manage expand state externally

CSS Variables

--pf-c-nav__c-divider--MarginBottomc_nav__c_divider_MarginBottom
0.5rem
--pf-c-nav__c-divider--MarginLeftc_nav__c_divider_MarginLeft
1.5rem
--pf-c-nav__c-divider--MarginTopc_nav__c_divider_MarginTop
0.5rem
--pf-c-nav__horizontal-list-item--MarginRightc_nav__horizontal_list_item_MarginRight
2rem
--pf-c-nav__horizontal-list-link--active--after--BackgroundColorc_nav__horizontal_list_link_active_after_BackgroundColor
#2b9af3
--pf-c-nav__horizontal-list-link--active--Colorc_nav__horizontal_list_link_active_Color
#2b9af3
--pf-c-nav__horizontal-list-link--after--Heightc_nav__horizontal_list_link_after_Height
0.1875rem
--pf-c-nav__horizontal-list-link--Colorc_nav__horizontal_list_link_Color
#2b9af3
--pf-c-nav__horizontal-list-link--focus--after--BackgroundColorc_nav__horizontal_list_link_focus_after_BackgroundColor
#2b9af3
--pf-c-nav__horizontal-list-link--focus--Colorc_nav__horizontal_list_link_focus_Color
#2b9af3
--pf-c-nav__horizontal-list-link--FontWeightc_nav__horizontal_list_link_FontWeight
400
--pf-c-nav__horizontal-list-link--hover--after--BackgroundColorc_nav__horizontal_list_link_hover_after_BackgroundColor
#2b9af3
--pf-c-nav__horizontal-list-link--hover--Colorc_nav__horizontal_list_link_hover_Color
#2b9af3
--pf-c-nav__horizontal-list-link--lg--PaddingBottomc_nav__horizontal_list_link_lg_PaddingBottom
1.5rem
--pf-c-nav__horizontal-list-link--m-current--after--BackgroundColorc_nav__horizontal_list_link_m_current_after_BackgroundColor
#2b9af3
--pf-c-nav__horizontal-list-link--m-current--Colorc_nav__horizontal_list_link_m_current_Color
#2b9af3
--pf-c-nav__horizontal-list-link--md--PaddingTopc_nav__horizontal_list_link_md_PaddingTop
1rem
--pf-c-nav__horizontal-list-link--PaddingBottomc_nav__horizontal_list_link_PaddingBottom
0.5rem
--pf-c-nav__horizontal-list-link--PaddingTopc_nav__horizontal_list_link_PaddingTop
0.5rem
--pf-c-nav__item--m-expanded__toggle-icon--Transformc_nav__item_m_expanded__toggle_icon_Transform
rotate(90deg)
--pf-c-nav__list-link--active--after--BackgroundColorc_nav__list_link_active_after_BackgroundColor
#2b9af3
--pf-c-nav__list-link--active--Colorc_nav__list_link_active_Color
#fff
--pf-c-nav__list-link--active--FontWeightc_nav__list_link_active_FontWeight
400
--pf-c-nav__list-link--after--Bottomc_nav__list_link_after_Bottom
0
--pf-c-nav__list-link--after--Heightc_nav__list_link_after_Height
0.1875rem
--pf-c-nav__list-link--after--Leftc_nav__list_link_after_Left
1rem
--pf-c-nav__list-link--after--md--Leftc_nav__list_link_after_md_Left
1.5rem
--pf-c-nav__list-link--after--Widthc_nav__list_link_after_Width
2.5rem
--pf-c-nav__list-link--Colorc_nav__list_link_Color
#fff
--pf-c-nav__list-link--focus--after--BackgroundColorc_nav__list_link_focus_after_BackgroundColor
#2b9af3
--pf-c-nav__list-link--focus--Colorc_nav__list_link_focus_Color
#fff
--pf-c-nav__list-link--focus--FontWeightc_nav__list_link_focus_FontWeight
400
--pf-c-nav__list-link--FontWeightc_nav__list_link_FontWeight
700
--pf-c-nav__list-link--hover--after--BackgroundColorc_nav__list_link_hover_after_BackgroundColor
#2b9af3
--pf-c-nav__list-link--hover--Colorc_nav__list_link_hover_Color
#fff
--pf-c-nav__list-link--m-current--after--BackgroundColorc_nav__list_link_m_current_after_BackgroundColor
#2b9af3
--pf-c-nav__list-link--m-current--Colorc_nav__list_link_m_current_Color
#fff
--pf-c-nav__list-link--m-current--FontWeightc_nav__list_link_m_current_FontWeight
700
--pf-c-nav__list-link--md--PaddingLeftc_nav__list_link_md_PaddingLeft
1.5rem
--pf-c-nav__list-link--md--PaddingRightc_nav__list_link_md_PaddingRight
1.5rem
--pf-c-nav__list-link--PaddingBottomc_nav__list_link_PaddingBottom
0.5rem
--pf-c-nav__list-link--PaddingLeftc_nav__list_link_PaddingLeft
1rem
--pf-c-nav__list-link--PaddingRightc_nav__list_link_PaddingRight
1rem
--pf-c-nav__list-link--PaddingTopc_nav__list_link_PaddingTop
0.5rem
--pf-c-nav__list-toggle--FontSizec_nav__list_toggle_FontSize
1rem
--pf-c-nav__list-toggle--PaddingLeftc_nav__list_toggle_PaddingLeft
0.5rem
--pf-c-nav__list-toggle--PaddingRightc_nav__list_toggle_PaddingRight
0.5rem
--pf-c-nav__list-toggle--Transitionc_nav__list_toggle_Transition
.2s ease-in 0s
--pf-c-nav__scroll-button--BackgroundColorc_nav__scroll_button_BackgroundColor
#fff
--pf-c-nav__scroll-button--Heightc_nav__scroll_button_Height
2.5rem
--pf-c-nav__scroll-button--hover--Colorc_nav__scroll_button_hover_Color
#2b9af3
--pf-c-nav__scroll-button--m-dark--nth-of-type-1--BoxShadowc_nav__scroll_button_m_dark_nth_of_type_1_BoxShadow
20px 0 10px -4px rgba(21,21,21,0.7)
--pf-c-nav__scroll-button--m-dark--nth-of-type-2--BoxShadowc_nav__scroll_button_m_dark_nth_of_type_2_BoxShadow
-20px 0 10px -4px rgba(21,21,21,0.7)
--pf-c-nav__scroll-button--nth-of-type-1--BoxShadowc_nav__scroll_button_nth_of_type_1_BoxShadow
20px 0 10px -4px hsla(0,0%,100%,0.7)
--pf-c-nav__scroll-button--nth-of-type-2--BoxShadowc_nav__scroll_button_nth_of_type_2_BoxShadow
-20px 0 10px -4px hsla(0,0%,100%,0.7)
--pf-c-nav__scroll-button--PaddingLeftc_nav__scroll_button_PaddingLeft
0.5rem
--pf-c-nav__scroll-button--PaddingRightc_nav__scroll_button_PaddingRight
0.5rem
--pf-c-nav__scroll-button--Topc_nav__scroll_button_Top
0.5rem
--pf-c-nav__scroll-button--Widthc_nav__scroll_button_Width
2rem
--pf-c-nav__scroll-button--ZIndexc_nav__scroll_button_ZIndex
100
--pf-c-nav__section__section--MarginTopc_nav__section__section_MarginTop
2rem
--pf-c-nav__section--MarginTopc_nav__section_MarginTop
2rem
--pf-c-nav__section-title--Colorc_nav__section_title_Color
#fff
--pf-c-nav__section-title--FontSizec_nav__section_title_FontSize
0.875rem
--pf-c-nav__section-title--FontWeightc_nav__section_title_FontWeight
700
--pf-c-nav__section-title--md--PaddingLeftc_nav__section_title_md_PaddingLeft
1.5rem
--pf-c-nav__section-title--md--PaddingRightc_nav__section_title_md_PaddingRight
1.5rem
--pf-c-nav__section-title--PaddingBottomc_nav__section_title_PaddingBottom
0.5rem
--pf-c-nav__section-title--PaddingLeftc_nav__section_title_PaddingLeft
1rem
--pf-c-nav__section-title--PaddingRightc_nav__section_title_PaddingRight
1rem
--pf-c-nav__section-title--PaddingTopc_nav__section_title_PaddingTop
0.5rem
--pf-c-nav__separator--BackgroundColorc_nav__separator_BackgroundColor
#212427
--pf-c-nav__separator--Heightc_nav__separator_Height
1px
--pf-c-nav__separator--MarginBottomc_nav__separator_MarginBottom
0.5rem
--pf-c-nav__separator--MarginLeftc_nav__separator_MarginLeft
1.5rem
--pf-c-nav__separator--MarginTopc_nav__separator_MarginTop
0.5rem
--pf-c-nav__simple-list__c-divider--MarginLeftc_nav__simple_list__c_divider_MarginLeft
1.5rem
--pf-c-nav__simple-list__separator--MarginLeftc_nav__simple_list__separator_MarginLeft
1.5rem
--pf-c-nav__simple-list-link--active--BackgroundColorc_nav__simple_list_link_active_BackgroundColor
#4f5255
--pf-c-nav__simple-list-link--active--Colorc_nav__simple_list_link_active_Color
#fff
--pf-c-nav__simple-list-link--active--FontWeightc_nav__simple_list_link_active_FontWeight
700
--pf-c-nav__simple-list-link--Colorc_nav__simple_list_link_Color
#fff
--pf-c-nav__simple-list-link--focus--BackgroundColorc_nav__simple_list_link_focus_BackgroundColor
#4f5255
--pf-c-nav__simple-list-link--focus--Colorc_nav__simple_list_link_focus_Color
#fff
--pf-c-nav__simple-list-link--focus--FontWeightc_nav__simple_list_link_focus_FontWeight
700
--pf-c-nav__simple-list-link--FontWeightc_nav__simple_list_link_FontWeight
700
--pf-c-nav__simple-list-link--hover--BackgroundColorc_nav__simple_list_link_hover_BackgroundColor
#4f5255
--pf-c-nav__simple-list-link--hover--Colorc_nav__simple_list_link_hover_Color
#fff
--pf-c-nav__simple-list-link--m-current--BackgroundColorc_nav__simple_list_link_m_current_BackgroundColor
#4f5255
--pf-c-nav__simple-list-link--m-current--Colorc_nav__simple_list_link_m_current_Color
#fff
--pf-c-nav__simple-list-link--m-current--FontWeightc_nav__simple_list_link_m_current_FontWeight
700
--pf-c-nav__simple-list-link--nested--md--PaddingLeftc_nav__simple_list_link_nested_md_PaddingLeft
calc(1.5rem + 1rem)
--pf-c-nav__simple-list-link--nested--PaddingLeftc_nav__simple_list_link_nested_PaddingLeft
1.5rem
--pf-c-nav__simple-list-link--PaddingBottomc_nav__simple_list_link_PaddingBottom
0.5rem
--pf-c-nav__simple-list-link--PaddingLeftc_nav__simple_list_link_PaddingLeft
1.5rem
--pf-c-nav__simple-list-link--PaddingRightc_nav__simple_list_link_PaddingRight
1.5rem
--pf-c-nav__simple-list-link--PaddingTopc_nav__simple_list_link_PaddingTop
0.5rem
--pf-c-nav__simple-list--nested__c-divider--MarginLeftc_nav__simple_list_nested__c_divider_MarginLeft
1.5rem
--pf-c-nav__simple-list--nested__separator--MarginLeftc_nav__simple_list_nested__separator_MarginLeft
1.5rem
--pf-c-nav__subnav--MarginTopc_nav__subnav_MarginTop
0
--pf-c-nav__subnav--MaxHeightc_nav__subnav_MaxHeight
100%
--pf-c-nav__tertiary-list-item--MarginRightc_nav__tertiary_list_item_MarginRight
2rem
--pf-c-nav__tertiary-list-link--active--after--BackgroundColorc_nav__tertiary_list_link_active_after_BackgroundColor
#004080
--pf-c-nav__tertiary-list-link--active--Colorc_nav__tertiary_list_link_active_Color
#004080
--pf-c-nav__tertiary-list-link--after--Heightc_nav__tertiary_list_link_after_Height
0.1875rem
--pf-c-nav__tertiary-list-link--Colorc_nav__tertiary_list_link_Color
#004080
--pf-c-nav__tertiary-list-link--focus--after--BackgroundColorc_nav__tertiary_list_link_focus_after_BackgroundColor
#004080
--pf-c-nav__tertiary-list-link--focus--Colorc_nav__tertiary_list_link_focus_Color
#004080
--pf-c-nav__tertiary-list-link--FontWeightc_nav__tertiary_list_link_FontWeight
400
--pf-c-nav__tertiary-list-link--hover--after--BackgroundColorc_nav__tertiary_list_link_hover_after_BackgroundColor
#004080
--pf-c-nav__tertiary-list-link--hover--Colorc_nav__tertiary_list_link_hover_Color
#004080
--pf-c-nav__tertiary-list-link--m-current--after--BackgroundColorc_nav__tertiary_list_link_m_current_after_BackgroundColor
#004080
--pf-c-nav__tertiary-list-link--m-current--Colorc_nav__tertiary_list_link_m_current_Color
#004080
--pf-c-nav__tertiary-list-link--PaddingBottomc_nav__tertiary_list_link_PaddingBottom
0.5rem
--pf-c-nav__tertiary-list-link--PaddingTopc_nav__tertiary_list_link_PaddingTop
1rem
--pf-c-nav--m-dark__c-divider--BackgroundColorc_nav_m_dark__c_divider_BackgroundColor
#4f5255
--pf-c-nav--m-dark__item--m-current__c-divider--BackgroundColorc_nav_m_dark__item_m_current__c_divider_BackgroundColor
#212427
--pf-c-nav--m-dark__item--m-current__list-link--Colorc_nav_m_dark__item_m_current__list_link_Color
#fff
--pf-c-nav--m-dark__item--m-current__separator--BackgroundColorc_nav_m_dark__item_m_current__separator_BackgroundColor
#212427
--pf-c-nav--m-dark__item--m-current__simple-list-link--Colorc_nav_m_dark__item_m_current__simple_list_link_Color
#fff
--pf-c-nav--m-dark__item--m-current--BackgroundColorc_nav_m_dark__item_m_current_BackgroundColor
#3c3f42
--pf-c-nav--m-dark__item--m-expanded__list-link--after--Bottomc_nav_m_dark__item_m_expanded__list_link_after_Bottom
0
--pf-c-nav--m-dark__item--m-expanded__list-link--PaddingBottomc_nav_m_dark__item_m_expanded__list_link_PaddingBottom
0.5rem
--pf-c-nav--m-dark__item--m-expanded--PaddingBottomc_nav_m_dark__item_m_expanded_PaddingBottom
0.5rem
--pf-c-nav--m-dark__list-link--active--Colorc_nav_m_dark__list_link_active_Color
#fff
--pf-c-nav--m-dark__list-link--after--Bottomc_nav_m_dark__list_link_after_Bottom
0.5rem
--pf-c-nav--m-dark__list-link--after--Widthc_nav_m_dark__list_link_after_Width
2.5rem
--pf-c-nav--m-dark__list-link--Colorc_nav_m_dark__list_link_Color
#d2d2d2
--pf-c-nav--m-dark__list-link--focus--Colorc_nav_m_dark__list_link_focus_Color
#fff
--pf-c-nav--m-dark__list-link--hover--Colorc_nav_m_dark__list_link_hover_Color
#fff
--pf-c-nav--m-dark__list-link--m-current--Colorc_nav_m_dark__list_link_m_current_Color
#fff
--pf-c-nav--m-dark__list-link--PaddingBottomc_nav_m_dark__list_link_PaddingBottom
1rem
--pf-c-nav--m-dark__list-link--PaddingTopc_nav_m_dark__list_link_PaddingTop
0.5rem
--pf-c-nav--m-dark__section-title--Colorc_nav_m_dark__section_title_Color
#fff
--pf-c-nav--m-dark__separator--BackgroundColorc_nav_m_dark__separator_BackgroundColor
#4f5255
--pf-c-nav--m-dark__simple-list-link--active--BackgroundColorc_nav_m_dark__simple_list_link_active_BackgroundColor
#4f5255
--pf-c-nav--m-dark__simple-list-link--active--Colorc_nav_m_dark__simple_list_link_active_Color
#fff
--pf-c-nav--m-dark__simple-list-link--Colorc_nav_m_dark__simple_list_link_Color
#d2d2d2
--pf-c-nav--m-dark__simple-list-link--focus--BackgroundColorc_nav_m_dark__simple_list_link_focus_BackgroundColor
#4f5255
--pf-c-nav--m-dark__simple-list-link--focus--Colorc_nav_m_dark__simple_list_link_focus_Color
#fff
--pf-c-nav--m-dark__simple-list-link--hover--BackgroundColorc_nav_m_dark__simple_list_link_hover_BackgroundColor
#4f5255
--pf-c-nav--m-dark__simple-list-link--hover--Colorc_nav_m_dark__simple_list_link_hover_Color
#fff
--pf-c-nav--m-dark__simple-list-link--m-current--BackgroundColorc_nav_m_dark__simple_list_link_m_current_BackgroundColor
#4f5255
--pf-c-nav--m-dark__simple-list-link--m-current--Colorc_nav_m_dark__simple_list_link_m_current_Color
#fff
--pf-c-nav--m-dark__subnav--MarginTopc_nav_m_dark__subnav_MarginTop
0
--pf-c-nav--Transitionc_nav_Transition
all 250ms ease-in-out
--pf-c-nav--Widthc_nav_Width
18.125rem