A subnavigation allows users to navigate between a small number of page links.

Image of a subnavigation; a horizontal row of links placed on a light gray bar

Sample element

Lorem ipsum Dolor sit amet Consectetur Adipiscing Elit nullam


<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>

<link rel="stylesheet" href="../rh-subnav-lightdom.css">
<script type="module">
import '@rhds/elements/rh-subnav/rh-subnav.js';
View the <rh-subnav> demo

When to use

  • When you need to connect a group of related pages together
  • When you need to offer users a more granular navigation
  • When you want to allow users to browse high-level and low-level pages in the same experience
© 2021-2024 Red Hat, Inc. Deploys by Netlify