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 group 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 Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall 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
ImportingUsagerh-navigation-linkImportingUsagerh-navigation-link

Importing

Add rh-navigation-link to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-navigation-link/rh-navigation-link.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage 

<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>
<script type="module">
  import '@rhds/elements/rh-navigation-link/rh-navigation-link.js';
</script>
Copy to Clipboard Wrap lines

Navigation Link provides a link for use within Red Hat navigation components. It must be a child of elements like rh-subnav or rh-navigation-primary that provide the parent list context. Authors should set href or slot an <a> element directly; authors must not slot a <button>. When current-page is set, aria-current="page" is applied so screen readers announce the active page. Uses delegatesFocus so Tab focus passes to the anchor.

Slot Name Summary Description
icon

icon, only rendered when href is set

Use instead of the icon and icon-set attributes. Accepts rh-icon, svg, or img. Content should have aria-hidden or alt so screen readers skip decorative images. Not available when slotting an <a> directly (without href on the host).
[default]

Link content

When the href attribute is set, this slot should contain inline text for the link label. Alternatively, an anchor element (<a href="...">) should be the first child in this slot when href is not set. Screen readers will announce the slotted text as the accessible name for the link. Authors must not slot a <button> element.
Note: [default] unnamed slots do not have a slot="name" attribute.
Attribute DOM Property Description Type Default
icon icon

Shorthand for the icon slot, the value is icon name

 
IconNameFor<IconSetName>
 
unknown
icon-set iconSet

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

 
'ui' | 'standard' | 'social' | 'microns'
 
unknown
href href

The URL to navigate to when the link is clicked

 
string
 
unknown
current-page currentPage

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.

 
boolean
 
false
Method Name Description
scheduleUpdate()

None

None

None

Token Description Copy
--rh-color-text-primary

Link text color
--rh-color-interactive-primary-default

Focus outline color
--rh-border-width-md

Focus outline width

2px border width: Example: Alert
--rh-border-radius-default

Focus border radius

3px border radius; Example: Card
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify