React

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.ReactNodenullAnything that can be rendered inside of the nav
classNamestring''Additional classes added to the container
onSelect(selectedItem: { groupId: number | string; itemId: number | string; to: string; event: React.FormEvent<HTMLInputElement>; }) => void() => undefinedCallback for updating when item selection changes
onToggle(toggledItem: { groupId: number | string; isExpanded: boolean; event: React.FormEvent<HTMLInputElement>; }) => void() => undefinedCallback for when a list is expanded or collapsed
aria-labelstring''Accessibility label
theme'dark' | 'light''light'Indicates which theme color to use
NavList properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenull as React.ReactNodeChildren nodes
classNamestring''Additional classes added to the list
variant'default' | 'simple' | 'horizontal' | 'tertiary''default'Indicates the list type.
ariaLeftScrollstring'Scroll left'aria-label for the left scroll button
ariaRightScrollstring'Scroll right'aria-label for the right scroll button
NavGroup properties
NameTypeRequiredDefaultDescription
titlestringTitle shown for the group
childrenReact.ReactNodenullAnything that can be rendered inside of the group
classNamestring''Additional classes added to the container
idstringgetUniqueId()Identifier to use for the section aria label
NavItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenull as React.ReactNodeContent rendered inside the nav item
classNamestring''Additional classes added to the nav item
tostring''Target navigation link
isActivebooleanfalseFlag indicating whether the item is active
groupIdstring | number | nullnull as stringGroup identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
itemIdstring | number | nullnull as stringItem identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
preventDefaultbooleanfalseIf true prevents the default anchor link action to occur. Set to true if you want to handle navigation yourself.
onClickNavSelectClickHandlernull as NavSelectClickHandlerCallback for item click
componentReact.ReactNode'a'Component used to render NavItems
NavItemSeparator properties
NameTypeRequiredDefaultDescription
className''null
NavExpandable properties
NameTypeRequiredDefaultDescription
titlestringTitle shown for the expandable list
srTextstring''If defined, screen readers will read this text instead of the list title
isExpandedbooleanfalseBoolean to programatically expand or collapse section
childrenReact.ReactNode''Anything that can be rendered inside of the expandable list
classNamestring''Additional classes added to the container
groupIdstring | numbernull as stringGroup identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
isActivebooleanfalseIf true makes the expandable list title active
idstring''Identifier to use for the section aria label
onExpand(e: React.MouseEvent<HTMLLIElement, MouseEvent>, val: boolean) => voidallow 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--active--FontWeightc_nav__horizontal_list_link_active_FontWeight
700
--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--focus--FontWeightc_nav__horizontal_list_link_focus_FontWeight
700
--pf-c-nav__horizontal-list-link--FontWeightc_nav__horizontal_list_link_FontWeight
700
--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--m-current--FontWeightc_nav__horizontal_list_link_m_current_FontWeight
700
--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
#004080
--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--PaddingBottomc_nav__section_title_PaddingBottom
0.5rem
--pf-c-nav__section-title--PaddingLeftc_nav__section_title_PaddingLeft
1.5rem
--pf-c-nav__section-title--PaddingRightc_nav__section_title_PaddingRight
1.5rem
--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--active--FontWeightc_nav__tertiary_list_link_active_FontWeight
700
--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--focus--FontWeightc_nav__tertiary_list_link_focus_FontWeight
700
--pf-c-nav__tertiary-list-link--FontWeightc_nav__tertiary_list_link_FontWeight
700
--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--m-current--FontWeightc_nav__tertiary_list_link_m_current_FontWeight
700
--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--Backgro