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="#" active="">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 '@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="#" active="">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 '@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.toggleAttribute('active', (e.target === link));
  }
});
```

<rh-subnav id="demo" accessible-label="dynamic">
  <a href="#">Users</a>
  <a href="#">Containers</a>
  <a href="#">Databases</a>
  <a href="#" active="">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 '@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="#" active="">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 '@rhds/elements/rh-subnav/rh-subnav.js';
```

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

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