Subnavigation Since v1.0.0

Overview

Style

Guidelines

Code

Accessibility

Demos

Subnavigation

Color Context

Dynamic

Felt Theme

Overflow Scroll

Padded

Right To Left

With Navigation Link

Subnavigation

Color Context

Dynamic

Felt Theme

Overflow Scroll

Padded

Right To Left

With Navigation Link

Subnavigation

Basic subnavigation with navigation links and a current page indicator.

import '@rhds/elements/rh-navigation-link/rh-navigation-link.js';
import '@rhds/elements/rh-subnav/rh-subnav.js';

<rh-subnav>
  <rh-navigation-link href="#">Users</rh-navigation-link>
  <rh-navigation-link href="#">Containers</rh-navigation-link>
  <rh-navigation-link href="#">Databases</rh-navigation-link>
  <rh-navigation-link href="#" current-page="">Servers</rh-navigation-link>
  <rh-navigation-link href="#">System</rh-navigation-link>
  <rh-navigation-link href="#">Network</rh-navigation-link>
  <rh-navigation-link href="#">Cloud</rh-navigation-link>
</rh-subnav>

<link rel="stylesheet" href="../rh-subnav-lightdom.css">

import { NavigationLink } from "@rhds/elements/react/rh-navigation-link/rh-navigation-link.js";
import { Subnav } from "@rhds/elements/react/rh-subnav/rh-subnav.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Subnav>
    <NavigationLink href="#">Users</NavigationLink>
    <NavigationLink href="#">Containers</NavigationLink>
    <NavigationLink href="#">Databases</NavigationLink>
    <NavigationLink href="#" current-page>Servers</NavigationLink>
    <NavigationLink href="#">System</NavigationLink>
    <NavigationLink href="#">Network</NavigationLink>
    <NavigationLink href="#">Cloud</NavigationLink>
  </Subnav>
  <link rel="stylesheet" href="../rh-subnav-lightdom.css" />
);

Color Context

Subnavigation displayed across different color contexts.

import '@rhds/elements/rh-navigation-link/rh-navigation-link.js';
import '@rhds/elements/rh-subnav/rh-subnav.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';

<rh-context-demo>
  <rh-subnav>
    <rh-navigation-link href="#">Users</rh-navigation-link>
    <rh-navigation-link href="#">Containers</rh-navigation-link>
    <rh-navigation-link href="#">Databases</rh-navigation-link>
    <rh-navigation-link href="#" current-page="">Servers</rh-navigation-link>
    <rh-navigation-link href="#">System</rh-navigation-link>
    <rh-navigation-link href="#" icon="data" icon-set="ui">Network</rh-navigation-link>
    <rh-navigation-link href="#">Cloud</rh-navigation-link>
  </rh-subnav>
</rh-context-demo>

<link rel="stylesheet" href="../rh-subnav-lightdom.css">

import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { NavigationLink } from "@rhds/elements/react/rh-navigation-link/rh-navigation-link.js";
import { Subnav } from "@rhds/elements/react/rh-subnav/rh-subnav.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ContextDemo>
    <Subnav>
      <NavigationLink href="#">Users</NavigationLink>
      <NavigationLink href="#">Containers</NavigationLink>
      <NavigationLink href="#">Databases</NavigationLink>
      <NavigationLink href="#" current-page>Servers</NavigationLink>
      <NavigationLink href="#">System</NavigationLink>
      <NavigationLink href="#" icon="data" icon-set="ui">Network</NavigationLink>
      <NavigationLink href="#">Cloud</NavigationLink>
    </Subnav>
  </ContextDemo>
  <link rel="stylesheet" href="../rh-subnav-lightdom.css" />
);

Dynamic

Subnavigation with dynamic current page switching on click.

import '@rhds/elements/rh-navigation-link/rh-navigation-link.js';
import '@rhds/elements/rh-subnav/rh-subnav.js';

const demo = document.getElementById('demo');
demo.addEventListener('click', e => {
  for (const link of demo.querySelectorAll('rh-navigation-link')) {
    if (e.target === link) {
      e.preventDefault();
      link.setAttribute('current-page', '');
    } else {
      link.removeAttribute('current-page');
    }
  }
});

<rh-subnav id="demo" accessible-label="dynamic">
  <rh-navigation-link href="#">Users</rh-navigation-link>
  <rh-navigation-link href="#">Containers</rh-navigation-link>
  <rh-navigation-link href="#">Databases</rh-navigation-link>
  <rh-navigation-link href="#" current-page="">Servers</rh-navigation-link>
  <rh-navigation-link href="#">System</rh-navigation-link>
  <rh-navigation-link href="#">Network</rh-navigation-link>
  <rh-navigation-link href="#">Cloud</rh-navigation-link>
</rh-subnav>

<link rel="stylesheet" href="../rh-subnav-lightdom.css">

import { NavigationLink } from "@rhds/elements/react/rh-navigation-link/rh-navigation-link.js";
import { Subnav } from "@rhds/elements/react/rh-subnav/rh-subnav.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Subnav id="demo" accessible-label="dynamic">
    <NavigationLink href="#">Users</NavigationLink>
    <NavigationLink href="#">Containers</NavigationLink>
    <NavigationLink href="#">Databases</NavigationLink>
    <NavigationLink href="#" current-page>Servers</NavigationLink>
    <NavigationLink href="#">System</NavigationLink>
    <NavigationLink href="#">Network</NavigationLink>
    <NavigationLink href="#">Cloud</NavigationLink>
  </Subnav>
  <link rel="stylesheet" href="../rh-subnav-lightdom.css" />
);

Felt Theme

Horizontal subnav with the Project Felt preview theme applied.

.felt-preview {
  padding: var(--rh-space-2xl, 32px);
}

import '@rhds/elements/rh-navigation-link/rh-navigation-link.js';
import '@rhds/elements/rh-subnav/rh-subnav.js';

<link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css">



<div class="felt-preview">
  <rh-subnav accessible-label="Example subnav">
    <rh-navigation-link href="#">Nav item 1</rh-navigation-link>
    <rh-navigation-link href="#" current-page="">Nav item 2</rh-navigation-link>
    <rh-navigation-link href="#">Nav item 3</rh-navigation-link>
    <rh-navigation-link href="#">Nav item 4</rh-navigation-link>
  </rh-subnav>
</div>

import { NavigationLink } from "@rhds/elements/react/rh-navigation-link/rh-navigation-link.js";
import { Subnav } from "@rhds/elements/react/rh-subnav/rh-subnav.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <link rel="stylesheet" href="/theming/themes/project-felt/preview/felt-theme-preview.css" />
  <div className="felt-preview">
    <Subnav accessible-label="Example subnav">
      <NavigationLink href="#">Nav item 1</NavigationLink>
      <NavigationLink href="#" current-page>Nav item 2</NavigationLink>
      <NavigationLink href="#">Nav item 3</NavigationLink>
      <NavigationLink href="#">Nav item 4</NavigationLink>
    </Subnav>
  </div>
);

Overflow Scroll

Subnavigation in a narrow container showing overflow scroll buttons.

import '@rhds/elements/rh-navigation-link/rh-navigation-link.js';
import '@rhds/elements/rh-subnav/rh-subnav.js';

.resizable {
  width: 320px;
  overflow: hidden;
  resize: horizontal;
  padding-block-end: var(--rh-space-md, 8px);
}

<div class="resizable">
  <rh-subnav label-scroll-left="Scroll back" label-scroll-right="Scroll forward">
    <rh-navigation-link href="#">Users</rh-navigation-link>
    <rh-navigation-link href="#">Containers</rh-navigation-link>
    <rh-navigation-link href="#">Databases</rh-navigation-link>
    <rh-navigation-link href="#" current-page="">Servers</rh-navigation-link>
    <rh-navigation-link href="#">System</rh-navigation-link>
    <rh-navigation-link href="#">Network</rh-navigation-link>
    <rh-navigation-link href="#">Cloud</rh-navigation-link>
  </rh-subnav>
</div>


<link rel="stylesheet" href="../rh-subnav-lightdom.css">

import { NavigationLink } from "@rhds/elements/react/rh-navigation-link/rh-navigation-link.js";
import { Subnav } from "@rhds/elements/react/rh-subnav/rh-subnav.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div className="resizable">
    <Subnav label-scroll-left="Scroll back" label-scroll-right="Scroll forward">
      <NavigationLink href="#">Users</NavigationLink>
      <NavigationLink href="#">Containers</NavigationLink>
      <NavigationLink href="#">Databases</NavigationLink>
      <NavigationLink href="#" current-page>Servers</NavigationLink>
      <NavigationLink href="#">System</NavigationLink>
      <NavigationLink href="#">Network</NavigationLink>
      <NavigationLink href="#">Cloud</NavigationLink>
    </Subnav>
  </div>
  <link rel="stylesheet" href="../rh-subnav-lightdom.css" />
);

Padded

Subnavigation inside a container with inline padding.

import '@rhds/elements/rh-navigation-link/rh-navigation-link.js';
import '@rhds/elements/rh-subnav/rh-subnav.js';
import '@rhds/elements/rh-icon/rh-icon.js';

.padded {
  padding-inline: var(--rh-space-2xl, 32px);
}

@media screen and (min-width: 576px) {
  .padded {
    padding: var(--rh-space-3xl, 48px) var(--rh-space-3xl, 48px) 0;
  }
}

<h2>In a container with padding</h2>
<div class="padded">
  <rh-subnav>
    <rh-navigation-link href="#">Users</rh-navigation-link>
    <rh-navigation-link href="#">Containers</rh-navigation-link>
    <rh-navigation-link href="#">Databases</rh-navigation-link>
    <rh-navigation-link href="#" current-page="">Servers</rh-navigation-link>
    <rh-navigation-link href="#">System</rh-navigation-link>
    <rh-navigation-link href="#" icon="data" icon-set="ui">Network</rh-navigation-link>
    <rh-navigation-link href="#">Cloud</rh-navigation-link>
  </rh-subnav>
</div>

<link rel="stylesheet" href="../rh-subnav-lightdom.css">

import { NavigationLink } from "@rhds/elements/react/rh-navigation-link/rh-navigation-link.js";
import { Subnav } from "@rhds/elements/react/rh-subnav/rh-subnav.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <h2>In a container with padding</h2>
  <div className="padded">
    <Subnav>
      <NavigationLink href="#">Users</NavigationLink>
      <NavigationLink href="#">Containers</NavigationLink>
      <NavigationLink href="#">Databases</NavigationLink>
      <NavigationLink href="#" current-page>Servers</NavigationLink>
      <NavigationLink href="#">System</NavigationLink>
      <NavigationLink href="#" icon="data" icon-set="ui">Network</NavigationLink>
      <NavigationLink href="#">Cloud</NavigationLink>
    </Subnav>
  </div>
  <link rel="stylesheet" href="../rh-subnav-lightdom.css" />
);

Right To Left

Subnavigation rendered in a right-to-left text direction.

import '@rhds/elements/rh-navigation-link/rh-navigation-link.js';
import '@rhds/elements/rh-subnav/rh-subnav.js';

<div dir="rtl">
  <rh-subnav>
    <rh-navigation-link href="#">משתמשים</rh-navigation-link>
    <rh-navigation-link href="#">מיכלים</rh-navigation-link>
    <rh-navigation-link href="#">מאגרי מידע</rh-navigation-link>
    <rh-navigation-link href="#" current-page="">שרתים</rh-navigation-link>
    <rh-navigation-link href="#">מַעֲרֶכֶת</rh-navigation-link>
    <rh-navigation-link href="#">רֶשֶׁת</rh-navigation-link>
    <rh-navigation-link href="#">עָנָן</rh-navigation-link>
  </rh-subnav>
</div>

<link rel="stylesheet" href="../rh-subnav-lightdom.css">

import { NavigationLink } from "@rhds/elements/react/rh-navigation-link/rh-navigation-link.js";
import { Subnav } from "@rhds/elements/react/rh-subnav/rh-subnav.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div dir="rtl">
    <Subnav>
      <NavigationLink href="#">משתמשים</NavigationLink>
      <NavigationLink href="#">מיכלים</NavigationLink>
      <NavigationLink href="#">מאגרי מידע</NavigationLink>
      <NavigationLink href="#" current-page>שרתים</NavigationLink>
      <NavigationLink href="#">מַעֲרֶכֶת</NavigationLink>
      <NavigationLink href="#">רֶשֶׁת</NavigationLink>
      <NavigationLink href="#">עָנָן</NavigationLink>
    </Subnav>
  </div>
  <link rel="stylesheet" href="../rh-subnav-lightdom.css" />
);

Subnavigation using rh-navigation-link elements with current-page attribute.

import '@rhds/elements/rh-navigation-link/rh-navigation-link.js';
import '@rhds/elements/rh-subnav/rh-subnav.js';

<rh-subnav>
  <rh-navigation-link href="#">Users</rh-navigation-link>
  <rh-navigation-link href="#">Containers</rh-navigation-link>
  <rh-navigation-link href="#">Databases</rh-navigation-link>
  <rh-navigation-link href="#" current-page="">Servers</rh-navigation-link>
  <rh-navigation-link href="#">System</rh-navigation-link>
  <rh-navigation-link href="#">Network</rh-navigation-link>
  <rh-navigation-link href="#">Cloud Providers</rh-navigation-link>
</rh-subnav>

<link rel="stylesheet" href="../rh-subnav-lightdom.css">

import { NavigationLink } from "@rhds/elements/react/rh-navigation-link/rh-navigation-link.js";
import { Subnav } from "@rhds/elements/react/rh-subnav/rh-subnav.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Subnav>
    <NavigationLink href="#">Users</NavigationLink>
    <NavigationLink href="#">Containers</NavigationLink>
    <NavigationLink href="#">Databases</NavigationLink>
    <NavigationLink href="#" current-page>Servers</NavigationLink>
    <NavigationLink href="#">System</NavigationLink>
    <NavigationLink href="#">Network</NavigationLink>
    <NavigationLink href="#">Cloud Providers</NavigationLink>
  </Subnav>
  <link rel="stylesheet" href="../rh-subnav-lightdom.css" />
);

Edit this page on GitHub

Subnavigation Since v1.0.0

Subnavigation

Color Context

Dynamic

Felt Theme

Overflow Scroll

Padded

Right To Left

With Navigation Link

Other libraries

Feedback

Red Hat footer

Red Hat legal and privacy links

Red Hat legal and privacy links

Other libraries

Feedback

Related elements or patterns

Red Hat footer

Red Hat legal and privacy links

Red Hat legal and privacy links