Skip to content
Primer
React
What's new
Design
Interface guidelinesOcticonsPrototypingPresentations
Development
Primer CSSPrimer React
About
About
Getting StartedPrimer ThemeSystem PropsCore ConceptsPhilosophyOverriding Styles
Components
AvatarAvatarStackBorderBoxBoxBranchNameBreadcrumbsButtonsCircleBadgeCircleOcticonCounterLabelDetailsDialogDropdownFilteredSearchFilterListFlashFlexGridHeadingLabelLabelGroupLinkPageheadPaginationPointerBoxPopoverPositionProgressBarSelectMenuSideNavStateLabelStyledOcticonSubNavTabNavTextTextInputTimelineTooltipTruncateUnderlineNav
GitHub

SubNav

Table of contents
Table of contents

Use the SubNav component for navigation on a dashboard-type interface with another set of navigation components above it. This helps distinguish navigation hierarchy.

To use SubNav with react-router or react-router-dom, pass as={NavLink} and omit the selected prop. This ensures that the NavLink gets activeClassName='selected'

Attention: Make sure to properly label your SubNav with an aria-label to provide context about the type of navigation contained in SubNav.

Default example

SubNav with search example

SubNav with filtered search example

System props

SubNav and SubNav.Link components get COMMON system props. Read our System Props doc page for a full list of available props.

Component props

SubNav

Prop nameTypeDescription
actionsNodePlace another element, such as a button, to the opposite side of the navigation items.
alignStringUse right to have navigation items aligned right.
fullBooleanUsed to make navigation fill the width of the container.
aria-labelStringUsed to set the aria-label on the top level <nav> element.

SubNav.Link

Prop nameTypeDescription
asStringsets the HTML tag for the component
hrefStringURL to be used for the Link
selectedBooleanUsed to style the link as selected or unselected
Edit this page on GitHub
2 contributorsemplumsT-Hugs
Last edited by emplums on July 1, 2020