React

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

Simple nav

Copied to clipboard

Grouped nav

Copied to clipboard

Default nav

Copied to clipboard

Expandable nav

Copied to clipboard

Expandable nav (w/subnav titles)

Copied to clipboard
Copied to clipboard

Horizontal nav (only in PageHeader)

Copied to clipboard

Tertiary nav

Copied to clipboard

Props

The Nav component accepts the following props.

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

The NavExpandable component accepts the following props.

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

The NavGroup component accepts the following props.

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

The NavItem component accepts the following props.

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

The NavItemSeparator component accepts the following props.

NameTypeRequiredDefaultDescription
className''

The NavList component accepts the following props.

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

CSS Variables

--pf-c-nav--Transitionc_nav_Transitionall 250ms cubic-bezier(0.42,0,0.58,1)
--pf-c-nav--Widthc_nav_Width18.125rem
--pf-c-nav__horizontal-list-item--MarginRightc_nav__horizontal_list_item_MarginRight2rem
--pf-c-nav__horizontal-list-link--Colorc_nav__horizontal_list_link_Color#004080
--pf-c-nav__horizontal-list-link--FontWeightc_nav__horizontal_list_link_FontWeight600
--pf-c-nav__horizontal-list-link--PaddingBottomc_nav__horizontal_list_link_PaddingBottom0.5rem
--pf-c-nav__horizontal-list-link--PaddingTopc_nav__horizontal_list_link_PaddingTop0.5rem
--pf-c-nav__horizontal-list-link--active--Colorc_nav__horizontal_list_link_active_Color#004080
--pf-c-nav__horizontal-list-link--active--FontWeightc_nav__horizontal_list_link_active_FontWeight600
--pf-c-nav__horizontal-list-link--active--after--BackgroundColorc_nav__horizontal_list_link_active_after_BackgroundColor#004080
--pf-c-nav__horizontal-list-link--after--Heightc_nav__horizontal_list_link_after_Height0.1875rem
--pf-c-nav__horizontal-list-link--focus--Colorc_nav__horizontal_list_link_focus_Color#004080
--pf-c-nav__horizontal-list-link--focus--FontWeightc_nav__horizontal_list_link_focus_FontWeight600
--pf-c-nav__horizontal-list-link--focus--after--BackgroundColorc_nav__horizontal_list_link_focus_after_BackgroundColor#004080
--pf-c-nav__horizontal-list-link--hover--Colorc_nav__horizontal_list_link_hover_Color#004080
--pf-c-nav__horizontal-list-link--hover--after--BackgroundColorc_nav__horizontal_list_link_hover_after_BackgroundColor#004080
--pf-c-nav__horizontal-list-link--lg--PaddingBottomc_nav__horizontal_list_link_lg_PaddingBottom1.5rem
--pf-c-nav__horizontal-list-link--m-current--Colorc_nav__horizontal_list_link_m_current_Color#004080
--pf-c-nav__horizontal-list-link--m-current--FontWeightc_nav__horizontal_list_link_m_current_FontWeight600
--pf-c-nav__horizontal-list-link--m-current--after--BackgroundColorc_nav__horizontal_list_link_m_current_after_BackgroundColor#004080
--pf-c-nav__horizontal-list-link--md--PaddingTopc_nav__horizontal_list_link_md_PaddingTop1rem
--pf-c-nav__item--m-expanded__toggle-icon--Transformc_nav__item_m_expanded__toggle_icon_Transformrotate(90deg)
--pf-c-nav__list-link--Colorc_nav__list_link_Color#004080
--pf-c-nav__list-link--FontWeightc_nav__list_link_FontWeight500
--pf-c-nav__list-link--PaddingBottomc_nav__list_link_PaddingBottom0.5rem
--pf-c-nav__list-link--PaddingLeftc_nav__list_link_PaddingLeft1rem
--pf-c-nav__list-link--PaddingRightc_nav__list_link_PaddingRight1rem
--pf-c-nav__list-link--PaddingTopc_nav__list_link_PaddingTop1rem
--pf-c-nav__list-link--active--Colorc_nav__list_link_active_Color#004080
--pf-c-nav__list-link--active--FontWeightc_nav__list_link_active_FontWeight400
--pf-c-nav__list-link--active--after--BackgroundColorc_nav__list_link_active_after_BackgroundColor#004080
--pf-c-nav__list-link--after--Heightc_nav__list_link_after_Height0.1875rem
--pf-c-nav__list-link--after--Leftc_nav__list_link_after_Left1rem
--pf-c-nav__list-link--after--Widthc_nav__list_link_after_Width3.125rem
--pf-c-nav__list-link--after--md--Leftc_nav__list_link_after_md_Left1.5rem
--pf-c-nav__list-link--focus--Colorc_nav__list_link_focus_Color#004080
--pf-c-nav__list-link--focus--FontWeightc_nav__list_link_focus_FontWeight400
--pf-c-nav__list-link--focus--after--BackgroundColorc_nav__list_link_focus_after_BackgroundColor#004080
--pf-c-nav__list-link--hover--Colorc_nav__list_link_hover_Color#004080
--pf-c-nav__list-link--hover--after--BackgroundColorc_nav__list_link_hover_after_BackgroundColor#004080
--pf-c-nav__list-link--m-current--Colorc_nav__list_link_m_current_Color#004080
--pf-c-nav__list-link--m-current--FontWeightc_nav__list_link_m_current_FontWeight500
--pf-c-nav__list-link--m-current--after--BackgroundColorc_nav__list_link_m_current_after_BackgroundColor#004080
--pf-c-nav__list-link--md--PaddingLeftc_nav__list_link_md_PaddingLeft1.5rem
--pf-c-nav__list-link--md--PaddingRightc_nav__list_link_md_PaddingRight1.5rem
--pf-c-nav__list-toggle--FontSizec_nav__list_toggle_FontSize1rem
--pf-c-nav__list-toggle--PaddingLeftc_nav__list_toggle_PaddingLeft0.5rem
--pf-c-nav__list-toggle--PaddingRightc_nav__list_toggle_PaddingRight0.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_Height2.5rem
--pf-c-nav__scroll-button--PaddingLeftc_nav__scroll_button_PaddingLeft0.5rem
--pf-c-nav__scroll-button--PaddingRightc_nav__scroll_button_PaddingRight0.5rem
--pf-c-nav__scroll-button--Topc_nav__scroll_button_Top0.5rem
--pf-c-nav__scroll-button--Widthc_nav__scroll_button_Width2rem
--pf-c-nav__scroll-button--ZIndexc_nav__scroll_button_ZIndex100
--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_BoxShadow20px 0 10px -4px hsla(0,0%,8%,.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 hsla(0,0%,8%,.7)
--pf-c-nav__scroll-button--nth-of-type-1--BoxShadowc_nav__scroll_button_nth_of_type_1_BoxShadow20px 0 10px -4px hsla(0,0%,100%,.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%,.7)
--pf-c-nav__section--MarginTopc_nav__section_MarginTop2rem
--pf-c-nav__section__section--MarginTopc_nav__section__section_MarginTop2rem
--pf-c-nav__section-title--Colorc_nav__section_title_Color#72767b
--pf-c-nav__section-title--FontSizec_nav__section_title_FontSize0.875rem
--pf-c-nav__section-title--FontWeightc_nav__section_title_FontWeight500
--pf-c-nav__section-title--PaddingBottomc_nav__section_title_PaddingBottom0.5rem
--pf-c-nav__section-title--PaddingLeftc_nav__section_title_PaddingLeft1.5rem
--pf-c-nav__section-title--PaddingRightc_nav__section_title_PaddingRight1.5rem
--pf-c-nav__section-title--PaddingTopc_nav__section_title_PaddingTop0.5rem
--pf-c-nav__separator--BackgroundColorc_nav__separator_BackgroundColor#d2d2d2
--pf-c-nav__separator--Heightc_nav__separator_Height1px
--pf-c-nav__separator--MarginBottomc_nav__separator_MarginBottom0.5rem
--pf-c-nav__separator--MarginLeftc_nav__separator_MarginLeft1.5rem
--pf-c-nav__separator--MarginTopc_nav__separator_MarginTop0.5rem
--pf-c-nav__simple-list__separator--MarginLeftc_nav__simple_list__separator_MarginLeft1.5rem
--pf-c-nav__simple-list-link--Colorc_nav__simple_list_link_Color#004080
--pf-c-nav__simple-list-link--FontWeightc_nav__simple_list_link_FontWeight500
--pf-c-nav__simple-list-link--PaddingBottomc_nav__simple_list_link_PaddingBottom0.5rem
--pf-c-nav__simple-list-link--PaddingLeftc_nav__simple_list_link_PaddingLeft1.5rem
--pf-c-nav__simple-list-link--PaddingRightc_nav__simple_list_link_PaddingRight1.5rem
--pf-c-nav__simple-list-link--PaddingTopc_nav__simple_list_link_PaddingTop0.5rem
--pf-c-nav__simple-list-link--active--BackgroundColorc_nav__simple_list_link_active_BackgroundColor#f5f5f5
--pf-c-nav__simple-list-link--active--Colorc_nav__simple_list_link_active_Color#004080
--pf-c-nav__simple-list-link--active--FontWeightc_nav__simple_list_link_active_FontWeight500
--pf-c-nav__simple-list-link--focus--BackgroundColorc_nav__simple_list_link_focus_BackgroundColor#f5f5f5
--pf-c-nav__simple-list-link--focus--Colorc_nav__simple_list_link_focus_Color#004080
--pf-c-nav__simple-list-link--focus--FontWeightc_nav__simple_list_link_focus_FontWeight500
--pf-c-nav__simple-list-link--hover--BackgroundColorc_nav__simple_list_link_hover_BackgroundColor#f5f5f5
--pf-c-nav__simple-list-link--hover--Colorc_nav__simple_list_link_hover_Color#004080
--pf-c-nav__simple-list-link--m-current--BackgroundColorc_nav__simple_list_link_m_current_BackgroundColor#f5f5f5
--pf-c-nav__simple-list-link--m-current--Colorc_nav__simple_list_link_m_current_Color#004080
--pf-c-nav__simple-list-link--m-current--FontWeightc_nav__simple_list_link_m_current_FontWeight500
--pf-c-nav__simple-list-link--nested--PaddingLeftc_nav__simple_list_link_nested_PaddingLeft1.5rem
--pf-c-nav__simple-list-link--nested--md--PaddingLeftc_nav__simple_list_link_nested_md_PaddingLeftcalc(1.5rem + 1rem)
--pf-c-nav__simple-list--nested__separator--MarginLeftc_nav__simple_list_nested__separator_MarginLeft1.5rem
--pf-c-nav__subnav--MarginTopc_nav__subnav_MarginTop0.5rem
--pf-c-nav__subnav--MaxHeightc_nav__subnav_MaxHeight37.5rem
--pf-c-nav__tertiary-list-item--MarginRightc_nav__tertiary_list_item_MarginRight2rem
--pf-c-nav__tertiary-list-link--Colorc_nav__tertiary_list_link_Color#004080
--pf-c-nav__tertiary-list-link--FontWeightc_nav__tertiary_list_link_FontWeight500
--pf-c-nav__tertiary-list-link--PaddingBottomc_nav__tertiary_list_link_PaddingBottom0.5rem
--pf-c-nav__tertiary-list-link--PaddingTopc_nav__tertiary_list_link_PaddingTop1rem
--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_FontWeight600
--pf-c-nav__tertiary-list-link--active--after--BackgroundColorc_nav__tertiary_list_link_active_after_BackgroundColor#004080
--pf-c-nav__tertiary-list-link--after--Heightc_nav__tertiary_list_link_after_Height0.1875rem
--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_FontWeight600
--pf-c-nav__tertiary-list-link--focus--after--BackgroundColorc_nav__tertiary_list_link_focus_after_BackgroundColor#004080
--pf-c-nav__tertiary-list-link--hover--Colorc_nav__tertiary_list_link_hover_Color#004080
--pf-c-nav__tertiary-list-link--hover--after--BackgroundColorc_nav__tertiary_list_link_hover_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_FontWeight500
--pf-c-nav__tertiary-list-link--m-current--after--BackgroundColorc_nav__tertiary_list_link_m_current_after_BackgroundColor#004080