Subnavigation

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

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 { 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 = () => (
  <rh-context-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="#">
        <Icon slot="icon" icon="data" set="ui" size="sm" />
        Network
      </a>
      <a href="#">Cloud</a>
    </Subnav>
  </rh-context-demo>
  <link rel="stylesheet" href="../rh-subnav-lightdom.css" />
);

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

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

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

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

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