Skip to content
Components
AvatarAvatarStackBorderBoxBoxBranchNameBreadcrumbsButtonsCircleBadgeCircleOcticonCounterLabelDetails & useDetailsDialogDropdownFilteredSearchFilterListFlashFlexFormGroupGridHeaderHeadingLabelLabelGroupLinkPageheadPaginationPointerBoxPopoverPositionProgressBarSelectMenuSideNavStateLabelStyledOcticonSubNavTabNavTextTextInputTimelineTooltipTruncateUnderlineNav
SubNav
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 name | Type | Description |
|---|---|---|
| actions | Node | Place another element, such as a button, to the opposite side of the navigation items. |
| align | String | Use right to have navigation items aligned right. |
| full | Boolean | Used to make navigation fill the width of the container. |
| aria-label | String | Used to set the aria-label on the top level <nav> element. |
SubNav.Link
| Prop name | Type | Description |
|---|---|---|
| as | String | sets the HTML tag for the component |
| href | String | URL to be used for the Link |
| selected | Boolean | Used to style the link as selected or unselected |
Edit this page on GitHub
2 contributors
Last edited by emplums on November 19, 2020