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 Since v4.0.0

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.

Themable

This element uses Red Hat design system theming and can be used in themable contexts.

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

Applies a 2px border width to at least 1 side of a container. It should be used to add emphasis or visual separation beyond a 1px border. Recommended for elements needing extra thickness like Alert or Progress stepper. It must be used to ensure hover, focus, and active states are discernible by more than color alone per WCAG. Applying to all 4 sides at once is optional.
--rh-border-radius-default

Focus border radius

Applies a 3px border radius to at least 1 corner of a container. This shall be the default for all containers needing rounded corners. It should be used to soften a container's visual footprint. Recommended for elements with subtle rounded corners like Button, Card, or Dialog. It must be applied to all 4 corners of a container at once.
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify