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 Creekside brand colors.

Section titled “Default Sidebar Links”
<!-- SIDEBAR LINKS (CREEKSIDE) -->
<style>
    .nav-pattern-library[aria-label="Secondary Navigation"] {
        background-color: #662D91;
    }
    .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: #8557a7;
        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 (CREEKSIDE) -->
<style>
    .nav-pattern-library[aria-label="Secondary Navigation"] {
        background-color: #662D91;
    }
    .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: #8557a7;
        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: #662D91;
        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>