Red Hat design system

Overview

Style

Guidelines

Code

Accessibility

Demos

Importing

Usage

rh-navigation-secondary

rh-navigation-secondary-dropdown

rh-navigation-secondary-menu-section

rh-navigation-secondary-menu

rh-navigation-secondary-overlay

Importing

Usage

rh-navigation-secondary

rh-navigation-secondary-dropdown

rh-navigation-secondary-menu-section

rh-navigation-secondary-menu

rh-navigation-secondary-overlay

Importing

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

<script type="module">
  import '@rhds/elements/rh-navigation-secondary/rh-navigation-secondary.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.

Lightdom CSS

This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

<link rel="stylesheet" href="/path/to/rh-navigation-secondary/rh-navigation-secondary-lightdom.css">

When a user is viewing a page that is part of the secondary navigation information architecture, a red top border is visible. If the current active page is part of a dropdown menu, that dropdown is highlighted with the same top border to indicate it contains the current page. For more details on how to use this current page indicator, refer to the design guidelines for current page indicator.

To enable this indicator style, implementation should apply the aria-current="page" attribute to the current page link.

<a href="/" aria-current="page">Current page being viewed</a>

The rh-navigation-secondary element does not apply the aria-current="page" attribute itself. The responsibility for keeping track of which link is currently active falls on the content management system or application. The element checks for the presence of this attribute and applies the current page indicator style to nav links and dropdown menus when the active page is within a dropdown menu.

The secondary navigation is used to connect a series of pages together. It displays wayfinding content and links relevant to the page it is placed on. It should be used in conjunction with the primary navigation.

Slot Name	Summary	Description
`logo`		Logo added to the main nav bar, expects `<a>Text</a> \| <a><svg/></a> \| <a><img/></a>` element
`mobile-menu`		Text label for the mobile menu button, for l10n. Defaults to "Menu"
`nav`		Navigation list added to the main nav bar, expects `<ul>` element
`cta`		Nav bar level CTA, expects `<rh-cta>` element

Attribute	DOM Property	Description	Type	Default
`color-palette`	`colorPalette`	Color palette dark \| lighter (default: lighter)	`'light' \| 'lighter' \| 'lightest' \| 'dark' \| 'darker' \| 'darkest'`	`'lighter'`
`accessible-label`	`accessibleLabel`	Customize the default `aria-label` on the `<nav>` container. Defaults to "secondary" if no attribute/property is set.	`string`	`'secondary'`

Method Name	Description
`firstUpdated()`
`open(index: number)`	Opens a specific dropdown based on index. Closes all open dropdowns before opening specified. Toggles overlay to open
`close()`	Closes all open dropdowns

Event Name	Description
`overlay-change`	Fires when an dropdown is opened or closed in desktop view or when the mobile menu button is toggled in mobile view.

Part Name	Summary	Description
`nav`		container, `<nav>` element
`container`		container, `<div>` element
`cta`		container, `<div>` element

CSS Property	Description	Default
`--rh-navigation-secondary-z-index`	z-index of the navigation-secondary	`102`

Token	Description	Copy
`--rh-color-text-primary`		Full CSS Variable Permalink to this token
`--rh-color-brand-red`		Full CSS Variable Permalink to this token
`--rh-color-border-subtle`		Full CSS Variable Permalink to this token
`--rh-color-surface-lighter`	Tertiary surface (light theme)	Full CSS Variable Permalink to this token
`--rh-color-surface-dark`	Tertiary surface (dark theme)	Full CSS Variable Permalink to this token
`--rh-border-width-sm`	1px border width; Example: Secondary CTA or Button	Full CSS Variable Permalink to this token
`--rh-font-family-body-text`	Body text font family	Full CSS Variable Permalink to this token
`--rh-font-size-body-text-md`	16px font size	Full CSS Variable Permalink to this token
`--rh-border-width-lg`	3px border width: Example: Expanded Accordion panel	Full CSS Variable Permalink to this token
`--rh-space-lg`	16px spacer	Full CSS Variable Permalink to this token
`--rh-space-md`	8px spacer	Full CSS Variable Permalink to this token
`--rh-color-surface`		Full CSS Variable Permalink to this token
`--rh-color-surface-lightest`	Primary surface (light theme)	Full CSS Variable Permalink to this token
`--rh-color-text-brand-on-light`	Brand text color for light theme	Full CSS Variable Permalink to this token
`--rh-color-text-primary-on-dark`	Primary text color for dark theme	Full CSS Variable Permalink to this token
`--rh-color-text-primary-on-light`	Primary text color for light theme	Full CSS Variable Permalink to this token
`--rh-space-2xl`	32px spacer	Full CSS Variable Permalink to this token

Upgrades a top level nav link to include dropdown functionality

Slot Name	Summary	Description
`link`		Link for dropdown, expects `<a>` element
`menu`		Menu for dropdown, expects `<rh-navigation-secondary-menu>` element

None

Event Name	Description
`change`	Fires when a dropdown is clicked

Part Name	Summary	Description
`container`

None

Token	Description	Copy
`--rh-border-width-lg`	3px border width: Example: Expanded Accordion panel	Full CSS Variable Permalink to this token
`--rh-border-width-sm`	1px border width; Example: Secondary CTA or Button	Full CSS Variable Permalink to this token
`--rh-color-border-subtle-on-light`	Subtle border color (light theme)	Full CSS Variable Permalink to this token
`--rh-box-shadow-sm`	Small box shadow	Full CSS Variable Permalink to this token
`--rh-color-text-primary`		Full CSS Variable Permalink to this token
`--rh-font-size-body-text-md`	16px font size	Full CSS Variable Permalink to this token
`--rh-color-surface`		Full CSS Variable Permalink to this token
`--rh-color-text-brand-on-light`	Brand text color for light theme	Full CSS Variable Permalink to this token
`--rh-color-surface-lightest`	Primary surface (light theme)	Full CSS Variable Permalink to this token
`--rh-color-text-primary-on-light`	Primary text color for light theme	Full CSS Variable Permalink to this token

A menu section which auto upgrades accessibility for headers and sibling list

Slot Name	Summary	Description
`header`		Adds a header tag to section, expects `<h1> \| <h2> \| <h3> \| <h4> \| <h5> \| <h6>` element
`links`		Adds a ul tag to section, expects `<ul> \| <ol>` element
`cta`		Adds a section level CTA, expects `<rh-cta>` element

None

Part Name Summary Description

Part Name	Summary	Description
`container`		container, element

container,

element

None

Token	Description	Copy
`--rh-font-family-heading`	Heading font family	Full CSS Variable Permalink to this token
`--rh-font-size-body-text-md`	16px font size	Full CSS Variable Permalink to this token
`--rh-space-xl`	24px spacer	Full CSS Variable Permalink to this token

Dropdown menu for secondary nav, available in full-width and fixed-with sizes

Slot Name	Summary	Description
`[default]`		Optional `<rh-navigation-secondary-menu-section>` elements or content following design guidelines Note: [default] unnamed slots do not have a slot="name" attribute.

Attribute	DOM Property	Description	Type	Default
`color-palette`	`colorPalette`	Color palette (default: lightest) Secondary nav menus are always represented on the lightest color palette.	`'light' \| 'lighter' \| 'lightest' \| 'dark' \| 'darker' \| 'darkest'`	`'lightest'`
`layout`	`layout`	Layout (default: full-width) Secondary nav menus by default are always full-width, but can be set to fixed-width for special cases.	`'fixed-width' \| 'full-width'`	`'full-width'`
`visible`	`visible`	`visible` toggles on click (default: false)	`boolean`	`false`

None

Part Name	Summary	Description
`full-width`		container - `<div>` element, wrapper for full-width menus
`fixed-width`		container - `<div>` element, wrapper for fixed-width menus
`sections`		container - `<div>` element, wrapper for menu sections

CSS Property	Description	Default
`--rh-navigation-secondary-menu-section-grid`	grid-template-columns for menu sections	`repeat(auto-fit, minmax(15.5rem, 1fr))`
`--rh-navigation-secondary-menu-section-grid-gap`	grid-gap for menu sections	`var(--rh-space-2xl, 32px)`
`--rh-navigation-secondary-menu-content-max-width`	max-width for menu content	`1136px`

Token	Description	Copy
`--rh-color-text-primary-on-light`	Primary text color for light theme	Full CSS Variable Permalink to this token
`--rh-color-surface-lightest`	Primary surface (light theme)	Full CSS Variable Permalink to this token
`--rh-space-xl`	24px spacer	Full CSS Variable Permalink to this token
`--rh-font-size-body-text-md`	16px font size	Full CSS Variable Permalink to this token
`--rh-box-shadow-sm`	Small box shadow	Full CSS Variable Permalink to this token
`--rh-space-2xl`	32px spacer	Full CSS Variable Permalink to this token
`--rh-space-3xl`	48px spacer	Full CSS Variable Permalink to this token
`--rh-space-4xl`	64px spacer	Full CSS Variable Permalink to this token

None

Attribute	DOM Property	Description	Type	Default
`open`	`open`		`boolean`	`false`

None

CSS Property	Description	Default
`--rh-navigation-secondary-overlay-z-index`	z-index of the navigation-secondary-overlay	`var(--rh-secondary-nav-overlay-z-index, -1)`

CSS Property	Description	Default	Reason
`--rh-secondary-nav-overlay-z-index`		-1	use --rh-navigation-secondary-overlay-z-index

Token	Description	Copy
`--rh-color-gray-90`	Secondary surface (dark theme)	Full CSS Variable Permalink to this token
`--rh-opacity-80`	80% opacity	Full CSS Variable Permalink to this token

Edit this page on GitHub

Navigation (secondary)

Note

Other libraries

Feedback

Related elements or patterns

Red Hat legal and privacy links

Red Hat legal and privacy links