Page Menu

Basic Sidebar

Add a theme to a set of links of the side of a page.

Sidebar Variants

Add a header, footer or both to the sidebar.

<nav class="c-sidebar | u-w-20">
    <div class="c-sidebar__head">
        <span class="c-sidebar__heading">Menu Title</span>
        <span class="c-sidebar__lead">Sub Title</span>
    </div>
    <ul class="c-sidebar__list | o-list-stacked">
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link | is-active" href="#1">Item 1</a>
        </li>
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link" href="#2">Item 2</a>
        </li>
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link" href="#3">Item 3</a>
        </li>
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link" href="#4">Item 4</a>
        </li>
    </ul>
</nav>

<nav class="c-sidebar | u-w-20">
    <ul class="c-sidebar__list | o-list-stacked">
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link | is-active" href="#1">Item 1</a>
        </li>
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link" href="#2">Item 2</a>
        </li>
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link" href="#3">Item 3</a>
        </li>
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link" href="#4">Item 4</a>
        </li>
    </ul>
    <div class="c-sidebar__footer">
        <div class="o-split">
            <span class="o-split__title">Footer Content</span>
            <a class="c-btn c-btn--secondary" href="#button">Button</a>
        </div>
    </div>
</nav>

<nav class="c-sidebar | u-w-20">
    <div class="c-sidebar__head">
        <span class="c-sidebar__heading">Menu Title</span>
        <span class="c-sidebar__lead">Sub Title</span>
    </div>
    <ul class="c-sidebar__list | o-list-stacked">
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link | is-active" href="#1">Item 1</a>
        </li>
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link" href="#2">Item 2</a>
        </li>
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link" href="#3">Item 3</a>
        </li>
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link" href="#4">Item 4</a>
        </li>
    </ul>
    <div class="c-sidebar__footer">
        <div class="o-split">
            <span class="o-split__title">Footer Content</span>
            <a class="c-btn c-btn--secondary" href="#button">Button</a>
        </div>
    </div>
</nav>

Nested Menus

Add a nested submenu to a menu item.

<nav class="c-sidebar | u-w-20">
    <div class="c-sidebar__head">
        <span class="c-sidebar__heading">Menu Title</span>
        <span class="c-sidebar__lead">Sub Title</span>
    </div>
    <ul class="c-sidebar__list | o-list-stacked">
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link | is-active" href="#1">Item 1</a>
        </li>
        <li class="c-sidebar__item | o-list__item">
            <button class="c-sidebar__link">Item 2</button>
            <ul class="c-sidebar__list c-sidebar__sub | o-list-stacked">
                <li class="c-sidebar__item | o-list__item">
                    <a class="c-sidebar__link" href="#">Item 2a</a>
                </li>
                <li class="c-sidebar__item | o-list__item">
                    <a class="c-sidebar__link" href="#">Item 2b</a>
                </li>
            </ul>
        </li>
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link" href="#3">Item 3</a>
        </li>
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link" href="#4">Item 4</a>
        </li>
    </ul>
</nav>

<nav class="c-sidebar | u-w-20">
    <div class="c-sidebar__head">
        <span class="c-sidebar__heading">Menu Title</span>
        <span class="c-sidebar__lead">Sub Title</span>
    </div>
    <ul class="c-sidebar__list | o-list-stacked">
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link | is-active" href="#1">Item 1</a>
        </li>
        <li class="c-sidebar__item | o-list__item" x-data="{ sub: false }">
            <a class="c-sidebar__link" href="#2" @click="sub = ! sub">
                Item 2
                <span class="c-sidebar__open-btn c-link-bare" type="button" :class="sub && 'is-open'">
                    <span class="u-hidden">Open/Close</span>
                    <svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true">
                        <path fill-rule="evenodd" d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
                    </svg>
                </span>
            </a>
            <div class="c-sidebar__sub" x-show="sub == true" x-collapse>
                <ul class="c-sidebar__list | o-list-stacked">
                    <li class="c-sidebar__item | o-list__item">
                        <a class="c-sidebar__link" href="#2a">Item 2a</a>
                    </li>
                    <li class="c-sidebar__item | o-list__item">
                        <a class="c-sidebar__link" href="#2b">Item 2b</a>
                    </li>
                </ul>
            </div>
        </li>
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link" href="#3">Item 3</a>
        </li>
        <li class="c-sidebar__item | o-list__item">
            <a class="c-sidebar__link" href="#4">Item 4</a>
        </li>
    </ul>
</nav>

Sticky

Stick the sidebar on scroll and when in view.

For this demo to be effective, we need to bloat the page with content to show how the sticky element works.

Title 1

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?

Title 2

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?

Title 3

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?

<section class="o-section">
    <div class="o-wrapper">
        <div class="o-grid">
            <div class="o-grid__item | o-focus o-focus--lg">
                <p>For this demo to be effective, we need to bloat the page with content to show how the sticky element works.</p>

                <section class="o-section o-section--xl" id="sticky_1">
                    <div class="o-grid">
                        <div class="o-grid__item o-focus o-focus--lg o-flow">
                            <h2 class="u-heading u-beta">Title 1</h2>
                            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> 
                        </div>
                    </div>
                </section>
                <section class="o-section o-section--xl" id="sticky_2">
                    <div class="o-grid">
                        <div class="o-grid__item o-focus o-focus--lg o-flow">
                            <h2 class="u-heading u-beta">Title 2</h2>
                            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> 
                            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p>
                            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p>
                        </div>
                    </div>
                </section>
                <section class="o-section o-section--xl" id="sticky_3">
                    <div class="o-grid">
                        <div class="o-grid__item o-focus o-focus--lg o-flow">
                            <h2 class="u-heading u-beta">Title 3</h2>
                            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> 
                            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p>
                            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa perferendis tempore non quidem optio soluta nemo commodi doloribus. Odio expedita in, molestias ea dolore asperiores distinctio fugit similique adipisci ratione?</p>
                        </div>
                    </div>
                </section>
            </div>
            <!-- Sticky Container -->
            <div class="o-grid__item | u-col-12 u-w-content-@bp4 u-ml-auto">
                <nav class="c-sidebar | u-stick u-min-18-@bp2">
                    <div class="c-sidebar__head">
                        <span class="c-sidebar__heading">Menu Title</span>
                        <span class="c-sidebar__lead">Sub Title</span>
                    </div>
                    <ul class="c-sidebar__list | o-list-stacked">
                        <li class="c-sidebar__item | o-list__item">
                            <a class="c-sidebar__link | is-active" href="#sticky_1">Item 1</a>
                        </li>
                        <li class="c-sidebar__item | o-list__item">
                            <a class="c-sidebar__link" href="#sticky_2">Item 2</a>
                        </li>
                        <li class="c-sidebar__item | o-list__item">
                            <a class="c-sidebar__link" href="#sticky_3">Item 3</a>
                        </li>
                        <li class="c-sidebar__item | o-list__item">
                            <a class="c-sidebar__link" href="#sticky_4">Item 4</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</section>