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 Westview High brand colors.

Section titled “Default Sidebar Links”
<!-- SIDEBAR LINKS (WESTVIEW HIGH) -->
<style>
    .nav-pattern-library[aria-label="Secondary Navigation"] {
        background-color: #1172BA;
    }
    .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: #418ec8;
        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 (WESTVIEW HIGH) -->
<style>
    .nav-pattern-library[aria-label="Secondary Navigation"] {
        background-color: #1172BA;
    }
    .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: #418ec8;
        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: #1172BA;
        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>