Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Navigation link

OverviewStyleGuidelinesCodeDemos
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

Navigation Link is a link element that is used as a child of the primary, secondary, subnav, and vertical navigation elements. Intrinsically, the Navigation Link is a list item and should not be used outside of navigation elements that define the parent list element.

import '@rhds/elements/rh-navigation-link/rh-navigation-link.js';
 
<rh-navigation-link href="#link">Link</rh-navigation-link>
<rh-navigation-link><a href="#link">Slotted a href Link</a></rh-navigation-link>
<rh-navigation-link icon="auto-light-dark-mode" icon-set="ui" href="#ai">Containers</rh-navigation-link>

Shorthand for the icon slot, the value is icon name

Icon set for the icon property - 'ui' by default

The URL to navigate to when the link is clicked

Indicates that this link refers to the current page for accessibility; used with the href attribute. Sets the aria-current attribute to 'page' on the anchor element internally in the shadow DOM.

Status

When to use

  • When you need to add a link as part of a navigation element, such as the primary, secondary, subnav, or vertical navigation elements.

Status checklist

Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify