Components

Sub Navigation

Overview

A Sub Navigation is used to navigate between pages that belong to the same category and/or primary navigation item.

Sub Navigation

<nav role="navigation" class="sub-nav">
    <a class="active" href="#">Active Link</a>
    <a href="#">Inactive Link 1</a>
    <a href="#">Inactive Link 2</a>
    <a href="#">Inactive Link 3</a>
</nav>

Javascript

Use the function below to highlight the selected state.

$(document).ready(function () {
    $('.sub-nav a').on('click',function () {
        $(this).parent().find(".active").removeClass();
        $(this).addClass("active");
    });
});

Version 2.5

Reference: Carbon Design System, October 2020
www.carbondesignsystem.com

Got questions or comments?
Email the IAA Design Team