Subnavigation

Overview

Style

Guidelines

Code

Accessibility

Demos

Subnavigation

Color Context

Dynamic

Overflow Scroll

Padded

Right To Left

With Navigation Link

Subnavigation

Color Context

Dynamic

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" />
);

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</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" />
);

Edit this page on GitHub

Subnavigation

Subnavigation

Color Context

Dynamic

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

Subnavigation

Subnavigation

Color Context

Dynamic

Overflow Scroll

Padded

Right To Left

With Navigation Link

Other libraries

Feedback

Related elements or patterns

Red Hat footer

Red Hat legal and privacy links

Red Hat legal and privacy links