Navs
Demonstration
Code
<nav aria-label="Inline Example" class="nav-inline">
<a href="#">Am I eligible?</a>
<a href="#">Programs</a>
<a href="#">Find help</a>
<button class="link-icon">
<svg class="icon icon-ui">
<use href="#lucide-search"></use>
</svg>Search
</button>
</nav>
Navs are related collections of links, buttons, or other utilities. They always use the nav element. In the Opportunity Standard they can either be inlined in a row or stacked on top of each other as a Block Nav.
Each nav element must have a unique aria-label attribute to help screen readers distinguish them from other nav elements. Common nav labels in the Opportunity Standard include;
-
“Primary,” used by the Navigation Pattern.
-
“Breadcrumb,” used by the Breadcrumb Element.
-
“Footer Navigation,” present in the Attribution (Footer) Pattern.
-
“Site Map and Legal Information,” present in the Attribution (Footer) Pattern.
Demonstration
Code
<nav aria-label="Block Example" class="nav-block">
<a href="#">Am I eligible?</a>
<a href="#">Programs</a>
<a href="#">Find help</a>
<button class="link-icon">
<svg aria-hidden="true" class="icon-ui">
<use href="#lucide-search"></use>
</svg>
<span>Search</span>
</button>
</nav>
Block Nav elements are stacked on top of each other.
Block and Inline nav layouts can be swapped out using responsive utility prefix; small:, mobile:, tablet:, or desktop:. For example, nav-block tablet:nav-inline will display the nav as block for smaller viewports and inline for viewports larger than a tablet.