Skip to content
PUSD Digital Communications

Sidebar Links

Website Administrator

Available to users with full access to manage site and staff permissions

Secondary navigation sidebar using Canyon View brand colors.

Section titled “Default Sidebar Links”
<!-- SIDEBAR LINKS (CANYON VIEW) -->
<style>
    .nav-pattern-library[aria-label="Secondary Navigation"] {
        background-color: #EE212E;
    }
    .nav-pattern-library[aria-label="Secondary Navigation"] ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    .nav-pattern-library[aria-label="Secondary Navigation"] li {
        margin: 0;
        padding: 0;
    }
    .nav-pattern-library[aria-label="Secondary Navigation"] a {
        display: block;
        padding: 12px 16px;
        text-decoration: none;
        color: #ffffff;
        background-color: #f14d58;
        font-size: 16px;
        transition: background-color 0.3s, color 0.3s;
    }
    .nav-pattern-library[aria-label="Secondary Navigation"] a:hover {
        text-decoration: underline;
    }
</style>
<nav class="nav-pattern-library" aria-label="Secondary Navigation">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</nav>

Active State

Section titled “Active State”
<!-- SIDEBAR LINKS WITH ACTIVE STATE (CANYON VIEW) -->
<style>
    .nav-pattern-library[aria-label="Secondary Navigation"] {
        background-color: #EE212E;
    }
    .nav-pattern-library[aria-label="Secondary Navigation"] ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    .nav-pattern-library[aria-label="Secondary Navigation"] li {
        margin: 0;
        padding: 0;
    }
    .nav-pattern-library[aria-label="Secondary Navigation"] a {
        display: block;
        padding: 12px 16px;
        text-decoration: none;
        color: #ffffff;
        background-color: #f14d58;
        font-size: 16px;
        transition: background-color 0.3s, color 0.3s;
    }
    .nav-pattern-library[aria-label="Secondary Navigation"] a:hover {
        text-decoration: underline;
    }
    .nav-pattern-library[aria-label="Secondary Navigation"] a.active {
        background-color: #EE212E;
        font-weight: 700;
    }
</style>
<nav class="nav-pattern-library" aria-label="Secondary Navigation">
    <ul>
        <li><a href="#" class="active" aria-current="page">Current Page</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</nav>