Skip to content
PUSD Digital Communications

Sidebar Links

Website Administrator

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

The Sidebar Links component provides a secondary navigation list for pages related in context to the current page. It renders as a stacked vertical list inside a dark navy container, with each link displayed as a full-width block on a medium-blue background. Hover states are handled through the scoped <style> block, which uses a CSS attribute selector to prevent conflicts with other elements on the page.

Key Features

Section titled “Key Features”

CSS Attribute Selector Scoping

All styles target .nav-pattern-library[aria-label="Secondary Navigation"], isolating this component’s CSS so it never conflicts with other navs or lists on the same page.

Block-Level Full-Width Links

Each <a> uses display: block with padding: 12px 16px, creating a large, easy-to-tap target that spans the full width of the nav container.

Smooth Transition Effects

Links include transition: background-color 0.3s, color 0.3s for polished interactions, with an underline applied on hover via the <style> block.

Accessible Landmark Markup

Semantic <nav> element with a descriptive aria-label="Secondary Navigation" identifies the block as a navigation landmark for screen readers.

CSS-Only Collapse (Nested variant)

The nested variant uses native HTML <details>/<summary> elements with ::after pseudo-element icons shwoing + when collapsed and − when expanded—no JavaScript required.

Copy-Paste Code

Section titled “Copy-Paste Code”
<!-- DEFAULT SIDEBAR LINKS -->
<style>
    .nav-pattern-library[aria-label="Secondary Navigation"] {
        background-color: #003366;
    }
    .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: #3b5998;
        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>

Customization Guide

Section titled “Customization Guide”

  1. Update the aria-label — Change aria-label="Secondary Navigation" on the <nav> to a label that describes this specific nav (e.g., "Department Links" or "Related Pages"). You must also update the matching string in all three CSS selectors in the <style> block to keep styles working.

  2. Add a link item — Copy any existing <li>...</li> block, paste it after the last </li>, and replace href="#" with the destination URL and update the link text.

  3. Remove a link item — Delete the entire <li>...</li> block (including the <a> tag inside it) for any link you don’t need.

  4. Update link destinations — Change href="#" on each <a> to the actual page URL or anchor (e.g., href="/departments/hr/" or href="#contact").

  5. Change colors — Update background-color: #003366 on the <nav> rule to change the container color. Update background-color: #3b5998 and color: #ffffff on the <a> rule to change the link tile color and text color.

  6. Adjust link padding — Modify padding: 12px 16px on the <a> rule to make rows taller/shorter or wider/narrower (e.g., padding: 10px 14px for tighter rows).

  7. Add nested items (Nested variant only) — Wrap a parent <summary> in a <details> element, place a <ul> inside the <details> after the </summary>, and populate it with child <li> items containing <a> links. The nested menu is collapsed by default and users click the summary to expand it.

  8. Customize nested colors (Nested variant only) — Update background-color: #002d54 on the .nav-pattern-library[aria-label="Secondary Navigation"] details > ul rule to change the parent container of nested lists. Update background-color: #2d4a7c on the child <a> rules to change the color of nested link tiles.

  9. Change the icons (Nested variant only) — The + and − symbols are defined in the summary::after rules using content: "+" and content: "−". Replace these with any Unicode character or symbol (e.g., content: "▶" for arrow, or emoji for visual interest). Both instances must be updated—the collapsed state and the details[open] expanded state.

PUSD Brand Colors Reference

Section titled “PUSD Brand Colors Reference”
PropertyCSS RuleValuePUSD Color Name
Nav container backgroundbackground-color on nav#003366Navy
Link tile backgroundbackground-color on a#3b5998Medium Blue
Link text colorcolor on a#ffffffWhite
Hover statetext-decoration on a:hoverunderline—

To align with PUSD brand standards, consider replacing the link tile background with #54c8eb (Light Blue) or keeping #003366 for a fully navy treatment.

Accessibility

Section titled “Accessibility”

Best Practices

Section titled “Best Practices”