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
Copied to clipboard
Copied to clipboard
Copied to clipboard
Copied to clipboard
Copied to clipboard
Copied to clipboard
Copied to clipboard

Props

The Nav component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything that can be rendered inside of the nav
classNamestring''Additional classes added to the container
onSelectfunc() => undefinedCallback for updating when item selection changes
onTogglefunc() => undefinedCallback for when a list is expanded or collapsed
aria-labelstring''Accessibility label
anyAdditional props are spread to the container <nav>

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
isExpandedboolfalseBoolean to programatically expand or collapse section
childrennodenullAnything that can be rendered inside of the expandable list
classNamestring''Additional classes added to the container
groupIdunionnullGroup identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
isActiveboolfalseIf true makes the expandable list title active
idstring''Identifier to use for the section aria label
anyAdditional props are spread to the container <li>
onExpandfuncundefinedallow consumer to optionally override this callback and manage expand state externally

The NavGroup component accepts the following props.

NameTypeRequiredDefaultDescription
titlestringTitle shown for the group
childrennodenullAnything that can be rendered inside of the group
classNamestring''Additional classes added to the container
idstring''Identifier to use for the section aria label
anyAdditional props are spread to the container <section>

The NavItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullContent rendered inside the nav item
classNamestring''Additional classes added to the nav item
tostring''Target navigation link
isActiveboolfalseFlag indicating whether the item is active
groupIdunionnullGroup identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
itemIdunionnullItem identifier, will be returned with the onToggle and onSelect callback passed to the Nav component
preventDefaultboolfalseIf true prevents the default anchor link action to occur. Set to true if you want to handle navigation yourself.
onClickfuncnullCallback for item click
anyAdditional props are spread to the container <a>

The NavItemSeparator component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the nav item separator
anyAdditional props are spread to the container <li>

The NavList component accepts the following props.

NameTypeRequiredDefaultDescription
variantenum'default'Indicates the list type.
childrennodenullChildren nodes
classNamestring''Additional classes added to the list
anyAdditional props are spread to the container <ul>

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_PaddingTop1rem
--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__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_Left2rem
--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_PaddingLeft2rem
--pf-c-nav__list-link--md--PaddingRightc_nav__list_link_md_PaddingRight2rem
--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.1s ease-in-out
--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_ZIndex300
--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-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_PaddingLeft2rem
--pf-c-nav__section-title--PaddingRightc_nav__section_title_PaddingRight2rem
--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_MarginLeft2rem
--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_PaddingRight2rem
--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(2rem + 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