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 anchor links and a current page indicator.

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

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

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

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>
    <a href="#">Users</a>
    <a href="#">Containers</a>
    <a href="#">Databases</a>
    <a href="#" aria-current="page">Servers</a>
    <a href="#">System</a>
    <a href="#">Network</a>
    <a href="#">Cloud</a>
  </Subnav>
  <link rel="stylesheet" href="../rh-subnav-lightdom.css" />
);

Color Context

Subnavigation displayed across different color contexts.

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>
    <a href="#">Users</a>
    <a href="#">Containers</a>
    <a href="#">Databases</a>
    <a href="#" aria-current="page">Servers</a>
    <a href="#">System</a>
    <a href="#"><rh-icon slot="icon" icon="data" set="ui" size="sm"></rh-icon> Network</a>
    <a href="#">Cloud</a>
  </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 { Icon } from "@rhds/elements/react/rh-icon/rh-icon.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>
      <a href="#">Users</a>
      <a href="#">Containers</a>
      <a href="#">Databases</a>
      <a href="#" aria-current="page">Servers</a>
      <a href="#">System</a>
      <a href="#">
        <Icon slot="icon" icon="data" set="ui" size="sm" />
        Network
      </a>
      <a href="#">Cloud</a>
    </Subnav>
  </ContextDemo>
  <link rel="stylesheet" href="../rh-subnav-lightdom.css" />
);

Dynamic

Subnavigation with dynamic active link switching on click.

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

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

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

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

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">
    <a href="#">Users</a>
    <a href="#">Containers</a>
    <a href="#">Databases</a>
    <a href="#" aria-current="page">Servers</a>
    <a href="#">System</a>
    <a href="#">Network</a>
    <a href="#">Cloud</a>
  </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-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-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">
    <a href="#">Users</a>
    <a href="#">Containers</a>
    <a href="#">Databases</a>
    <a href="#" aria-current="page">Servers</a>
    <a href="#">System</a>
    <a href="#">Network</a>
    <a href="#">Cloud</a>
  </rh-subnav>
</div>


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

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">
      <a href="#">Users</a>
      <a href="#">Containers</a>
      <a href="#">Databases</a>
      <a href="#" aria-current="page">Servers</a>
      <a href="#">System</a>
      <a href="#">Network</a>
      <a href="#">Cloud</a>
    </Subnav>
  </div>
  <link rel="stylesheet" href="../rh-subnav-lightdom.css" />
);

Padded

Subnavigation inside a container with inline padding.

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>
    <a href="#">Users</a>
    <a href="#">Containers</a>
    <a href="#">Databases</a>
    <a href="#" aria-current="page">Servers</a>
    <a href="#">System</a>
    <a href="#"><rh-icon slot="icon" icon="data" set="ui" size="sm"></rh-icon> Network</a>
    <a href="#">Cloud</a>
  </rh-subnav>
</div>

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

import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.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>
      <a href="#">Users</a>
      <a href="#">Containers</a>
      <a href="#">Databases</a>
      <a href="#" aria-current="page">Servers</a>
      <a href="#">System</a>
      <a href="#">
        <Icon slot="icon" icon="data" set="ui" size="sm" />
        Network
      </a>
      <a href="#">Cloud</a>
    </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-subnav/rh-subnav.js';

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

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

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>
      <a href="#">משתמשים</a>
      <a href="#">מיכלים</a>
      <a href="#">מאגרי מידע</a>
      <a href="#" aria-current="page">שרתים</a>
      <a href="#">מַעֲרֶכֶת</a>
      <a href="#">רֶשֶׁת</a>
      <a href="#">עָנָן</a>
    </Subnav>
  </div>
  <link rel="stylesheet" href="../rh-subnav-lightdom.css" />
);

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

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