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 PUSD Foundation brand colors.

Section titled “Default Sidebar Links”
<!-- SIDEBAR LINKS (PUSD FOUNDATION) -->
<style>
    .nav-pattern-library[aria-label="Secondary Navigation"] {
        background-color: #0e5faf;
    }
    .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: #3e7fbf;
        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 (PUSD FOUNDATION) -->
<style>
    .nav-pattern-library[aria-label="Secondary Navigation"] {
        background-color: #0e5faf;
    }
    .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: #3e7fbf;
        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: #0e5faf;
        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>