Subnavigation

Overview Style Guidelines Code Accessibility

Overview

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

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="#">Network</a>
  <a href="#">Cloud</a>
</rh-subnav>

<link rel="stylesheet" href="../rh-subnav-lightdom.css">
<script type="module">
  import '@rhds/elements/rh-subnav/rh-subnav.js';
</script>
 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
Scroll back to the top