BUX Component Development Platform

Sidebar Nav 

<div class="bux-container bux-container--sidebar-nav bux-container--sidebar-nav__mobile-hidden" expand-active-submenu="true">
    <nav id="sidebar-nav" aria-label="Sidebar Navigation" class="disclosure-nav disclosure-nav-orientation-vertical">

        <ul class="bux-sidebar-nav">
            <li class="bux-sidebar-nav__item">

                <a class="bux-sidebar-nav__link disclosure-nav-item-with-submenu bux-sidebar-nav__link disclosure-nav-item-with-submenu--mobile-hidden" href="#" rel="noopener">
                    Level 1 Link
                </a>

                <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
                    <li class="bux-sidebar-nav__item">

                        <a class="bux-sidebar-nav__link bux-sidebar-nav__link--active disclosure-nav-item-with-submenu bux-sidebar-nav__link bux-sidebar-nav__link--active disclosure-nav-item-with-submenu--mobile-hidden" href="#" rel="noopener">
                            Level 2 Link
                        </a>

                        <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
                            <li class="bux-sidebar-nav__item">

                                <a class="bux-sidebar-nav__link disclosure-nav-item-with-submenu bux-sidebar-nav__link disclosure-nav-item-with-submenu--mobile-hidden" href="#" rel="noopener">
                                    Level 3 Link
                                </a>

                                <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
                                    <li class="bux-sidebar-nav__item">

                                        <a class="bux-sidebar-nav__link disclosure-nav-item-with-submenu bux-sidebar-nav__link disclosure-nav-item-with-submenu--mobile-hidden" href="#" rel="noopener">
                                            Level 4 Link
                                        </a>

                                        <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
                                            <li class="bux-sidebar-nav__item">

                                                <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                                                    Level 5 Link
                                                </a>

                                            </li>
                                            <li class="bux-sidebar-nav__item">

                                                <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                                                    Level 5 Link
                                                </a>

                                            </li>
                                            <li class="bux-sidebar-nav__item">

                                                <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                                                    Level 5 Link
                                                </a>

                                            </li>
                                            <li class="bux-sidebar-nav__item">

                                                <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                                                    Level 5 Link
                                                </a>

                                            </li>
                                        </ul>

                                    </li>
                                    <li class="bux-sidebar-nav__item">

                                        <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                                            Level 4 Link
                                        </a>

                                    </li>
                                    <li class="bux-sidebar-nav__item">

                                        <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                                            Level 4 Link
                                        </a>

                                    </li>
                                    <li class="bux-sidebar-nav__item">

                                        <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                                            Level 4 Link
                                        </a>

                                    </li>
                                </ul>

                            </li>
                            <li class="bux-sidebar-nav__item">

                                <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                                    Level 3 Link
                                </a>

                            </li>
                            <li class="bux-sidebar-nav__item">

                                <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                                    Level 3 Link
                                </a>

                            </li>
                            <li class="bux-sidebar-nav__item">

                                <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                                    Level 3 Link
                                </a>

                            </li>
                        </ul>

                    </li>
                    <li class="bux-sidebar-nav__item">

                        <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                            Level 2 Link
                        </a>

                    </li>
                    <li class="bux-sidebar-nav__item">

                        <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                            Level 2 Link
                        </a>

                    </li>
                    <li class="bux-sidebar-nav__item">

                        <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                            Level 2 Link
                        </a>

                    </li>
                </ul>

            </li>
            <li class="bux-sidebar-nav__item">

                <a class="bux-sidebar-nav__link disclosure-nav-item-with-submenu bux-sidebar-nav__link disclosure-nav-item-with-submenu--mobile-hidden" href="#" rel="noopener">
                    Level 1 Link
                </a>

                <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
                    <li class="bux-sidebar-nav__item">

                        <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                            Level 2 Link
                        </a>

                    </li>
                    <li class="bux-sidebar-nav__item">

                        <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                            Level 2 Link
                        </a>

                    </li>
                    <li class="bux-sidebar-nav__item">

                        <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                            Level 2 Link
                        </a>

                    </li>
                    <li class="bux-sidebar-nav__item">

                        <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                            Level 2 Link
                        </a>

                    </li>
                </ul>

            </li>
            <li class="bux-sidebar-nav__item">

                <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                    Level 1 Link
                </a>

            </li>
            <li class="bux-sidebar-nav__item">

                <a class="bux-sidebar-nav__link disclosure-nav-item-with-submenu bux-sidebar-nav__link disclosure-nav-item-with-submenu--mobile-hidden" href="#" rel="noopener">
                    Level 1 Link
                </a>

                <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
                    <li class="bux-sidebar-nav__item">

                        <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                            Level 2 Link
                        </a>

                    </li>
                    <li class="bux-sidebar-nav__item">

                        <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                            Level 2 Link
                        </a>

                    </li>
                    <li class="bux-sidebar-nav__item">

                        <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                            Level 2 Link
                        </a>

                    </li>
                    <li class="bux-sidebar-nav__item">

                        <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                            Level 2 Link
                        </a>

                    </li>
                </ul>

            </li>
            <li class="bux-sidebar-nav__item">

                <a class="bux-sidebar-nav__link bux-sidebar-nav__link--mobile-hidden" href="#" rel="noopener">
                    Level 1 Link
                </a>

            </li>
        </ul>

    </nav>
</div>
 
{#

Sidebar Navigation

Available variables:

- nav_id:               Unique ID for the sidebar nav.
- aria_label:           Aria-label for the sidebar nav.
- modifier:             Set to 'mobile-hidden' to hide on mobile.
- expandActiveSubmenu:  Set to true to expand the active item's submenu.
- items:                Array containing the sidebar nav items
- item.title:           Title of the sidebar nav item.
- item.url:             URL for the sidebar nav item.
- item.active:          Boolean. True if the item is active.
- item.subitems:        Array containing sidebar nav subitems.

#}

{# ===================================================
                      Macros
==================================================== #}

{% macro sidebar_link(item) %}
    {% set linkClasses = ['bux-sidebar-nav__link'] %}

    {% if item.active %}
        {% set linkClasses = linkClasses|merge(['bux-sidebar-nav__link--active']) %}
    {% endif %}

    {% if item.subitems %}
        {% set linkClasses = linkClasses|merge(['disclosure-nav-item-with-submenu']) %}
    {% endif %}

    {% embed '@link' with {
        base_class: linkClasses|join(' '),
        link_url: item.url,
    } %}
        {% block content %}
            {{ item.title }}
        {% endblock %}
    {% endembed %}
{% endmacro %}

{% macro sidebar_recursive(items, depth) %}
    {% import _self as sidebar %}

    {% if items %}
        {% set ulClass = 'disclosure-nav-submenu disclosure-nav-submenu-closed' %}
        {% if depth == 0 %}
            {% set ulClass = 'bux-sidebar-nav' %}
        {% endif %}

        <ul class="{{ ulClass }}">
            {% for item in items %}
                <li class="bux-sidebar-nav__item">
                    {{ sidebar.sidebar_link(item) }}

                    {% if item.subitems %}
                        {{ sidebar.sidebar_recursive(item.subitems, depth + 1) }}
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    {% endif %}
{% endmacro %}

{# ===================================================
                      Markup
==================================================== #}

{% import _self as sidebar %}

<div class="bux-container bux-container--sidebar-nav {% if modifier %}bux-container--sidebar-nav__{{ modifier }}{% endif %}" expand-active-submenu="{{ expandActiveSubmenu }}">
    <nav id="{{ nav_id }}" aria-label="{{ aria_label }}" class="disclosure-nav disclosure-nav-orientation-vertical">
        {% if items %}
            {{ sidebar.sidebar_recursive(items, 0) }}
        {% endif %}
    </nav>
</div>
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
nav_id: sidebar-nav
aria_label: Sidebar Navigation
modifier: mobile-hidden
expandActiveSubmenu: true
items:
  - title: Level 1 Link
    url: '#'
    active: false
    subitems:
      - title: Level 2 Link
        url: '#'
        active: true
        subitems:
          - title: Level 3 Link
            url: '#'
            active: false
            subitems:
              - title: Level 4 Link
                url: '#'
                active: false
                subitems:
                  - title: Level 5 Link
                    url: '#'
                    active: false
                  - title: Level 5 Link
                    url: '#'
                    active: false
                  - title: Level 5 Link
                    url: '#'
                    active: false
                  - title: Level 5 Link
                    url: '#'
                    active: false
              - title: Level 4 Link
                url: '#'
                active: false
              - title: Level 4 Link
                url: '#'
                active: false
              - title: Level 4 Link
                url: '#'
                active: false
          - title: Level 3 Link
            url: '#'
            active: false
          - title: Level 3 Link
            url: '#'
            active: false
          - title: Level 3 Link
            url: '#'
            active: false
      - title: Level 2 Link
        url: '#'
        active: false
      - title: Level 2 Link
        url: '#'
        active: false
      - title: Level 2 Link
        url: '#'
        active: false
  - title: Level 1 Link
    url: '#'
    active: false
    subitems:
      - title: Level 2 Link
        url: '#'
        active: false
      - title: Level 2 Link
        url: '#'
        active: false
      - title: Level 2 Link
        url: '#'
        active: false
      - title: Level 2 Link
        url: '#'
        active: false
  - title: Level 1 Link
    url: '#'
    active: false
  - title: Level 1 Link
    url: '#'
    active: false
    subitems:
      - title: Level 2 Link
        url: '#'
        active: false
      - title: Level 2 Link
        url: '#'
        active: false
      - title: Level 2 Link
        url: '#'
        active: false
      - title: Level 2 Link
        url: '#'
        active: false
  - title: Level 1 Link
    url: '#'
    active: false
  • Content: 
    div.bux-container--sidebar-nav {

    padding: 0;

    nav.disclosure-nav.disclosure-nav-orientation-vertical {
        &.disclosure-nav-closed {
            display: none;
        }

        button {
            background-color: transparent;
            border: none;

            &::after {
                // Down arrow
                font-family: bux-icons;
                content: "\f010";
                color: $gray-dark-60;
                position: relative;
                top: -1px;
                left: 4px;
            }

            &[aria-expanded="true"] {
                &::after {
                    // Up arrow
                    /* content: "\f011"; */
                }
            }

            &[aria-expanded="false"] {
                &::after {
                    // Down arrow
                    content: "\f010";
                }
            }

            &:focus {
                outline: 2px solid $focus;
                outline-offset: 0px;
            }
        }

        a,
        span {
            color: $gray-dark-80;
            text-decoration: none;
        }

        ul,
        ol {
            font-family: $sans;
            font-size: $ts-base;
            font-weight: 700;

            &.disclosure-nav-submenu-open {
                display: block;
            }

            &.disclosure-nav-submenu-closed {
                display: none;
            }
        }

        &.disclosure-nav-orientation-vertical {
            ul {
                background-color: $white;

                li {
                    position: relative;
                    margin: 0;
                    border-bottom: 2px solid $gray-light-80;
                }

                a,
                span,
                button.disclosure-nav-button-no-link {
                    display: block;
                    border-bottom: none;
                    white-space: normal;
                    border-left: $sp-4 solid $clear;
                    padding: $sp-12;

                    &.disclosure-nav-item-with-submenu {
                        padding-right: 2.45rem;
                    }

                    &:hover,
                    &:focus {
                        color: $gray-dark-80;
                        border-left-color: $gray-dark-60;
                        background-color: $gray-light-90;
                    }

                    &:focus {
                        outline: 2px solid $focus;
                        outline-offset: 0px;
                    }

                    &.bux-sidebar-nav__link--active {
                        border-left-color: $scarlet;
                    }
                }

                button {
                    position: absolute;
                    right: 0.45rem;
                    top: 0.45rem;
                    padding: 0;
                    height: 2rem;
                    width: 2rem;

                    background-color: $gray-light-90;

                    &.disclosure-nav-button-no-link {
                        position: static;
                        right: auto;
                        top: auto;
                        float: none;
                        text-align: left;
                        width: 100%;
                        height: auto;
                        background-color: $white;

                        &::after {
                            position: absolute;
                            top: 1.25rem;
                            right: 1.25rem;
                            left: auto;
                        }

                        &:hover::after {
                            border-right-color: $gray-dark-80;
                            border-bottom-color: $gray-dark-80;
                        }
                    }

                    &:hover {
                        background-color: $gray-dark-60;
                        cursor: pointer;
                    }

                    &::after {
                        /* content: '\f111'; */
                        font-family: $icon;
                        font-size: 20px;
                        font-weight: normal;
                        position: absolute;
                        top: 2px;
                        left: 6px;
                    }

                    &:hover::after {
                        color: $white;
                    }

                    &[aria-expanded="true"] {
                        &::after {
                            transform: rotate(0);
                            transition: 120ms transform ease-in-out;
                        }
                    }

                    &[aria-expanded="false"] {
                        &::after {
                            transform: rotate(-90deg);
                            transition: 120ms transform ease-in-out;
                        }
                    }
                }

                ul {
                    // Second level submenus.
                    font-weight: normal;
                    margin-top: $sp-12;

                    li {
                        margin-top: 0;
                        padding-left: $sp-16;
                        border-bottom: none;

                        // ul {
                        //   // Third level submenus.
                        //   li {

                        //   }

                        //   ul {
                        //     // Fourth level submenus.
                        //     li {

                        //     }
                        //   }
                        // }
                    }
                }
            }
        }
    }
    &__mobile-hidden {
        display: none;
        @include breakpoint(lg) {
            display: block;
        }
    }
}
  • URL: /components/raw/sidebar-nav/_sidebar-nav.scss
  • Filesystem Path: src/components/sidebar-nav/_sidebar-nav.scss
  • Size: 5.8 KB
  • Content: 
    import disclosureNav from '../../../public/libraries/disclosureNav/js/disclosureNav.js';

class BuxSidebar {

    private disclosureNavInstance: disclosureNav | undefined = undefined;
    private options = {
        ariaLabel: "Sidebar Navigation",
        orientation: "vertical",
        useHover: false,
        useResponsiveMenu: false,
        activeClass: "bux-sidebar-nav__link--active",
        expandToActive: true,
        expandActiveSubmenu: false,
    };

    constructor(private readonly root: HTMLElement) {
        this.configureExpandSetting();
        this.init();
    }

    private configureExpandSetting(): void {
        const expandTrigger = document.querySelector("[expand-active-submenu]");

        if (expandTrigger) {
            const value = expandTrigger.getAttribute('expand-active-submenu');
            this.options.expandActiveSubmenu = (value === 'true');
        }
    }

    private init(): void {
        const id = this.root.getAttribute("id");

        this.disclosureNavInstance = id ? new disclosureNav(`#${id}`, this.options) : new disclosureNav("#sidebar-nav", this.options);
    }

}

const sidebarRoot = document.querySelector(".bux-sidebar-nav");
if (sidebarRoot instanceof HTMLElement) {
    new BuxSidebar(sidebarRoot);
}

export const init = () => {
    if (document.querySelector(".bux-sidebar-nav")) {
        const sidebarRoot = document.querySelector(".bux-sidebar-nav");
        if (sidebarRoot instanceof HTMLElement) {
            new BuxSidebar(sidebarRoot);
        }
    }
}

if (document.readyState === 'loading') {
    document.addEventListener("DOMContentLoaded", init);
} else {
    init();
}
  • URL: /components/raw/sidebar-nav/sidebar-nav.ts
  • Filesystem Path: src/components/sidebar-nav/sidebar-nav.ts
  • Size: 1.7 KB

Sidebar Nav

  • Implements a vertically oriented version of Disclosure Navigation Menu.
  • Can be used simultaneously with non-top level links by using <span> rather than <a> in the HTML markup.
  • All necessary library files are compiled into bux.min.js, but are available separately in /public/libraries/disclosureNav.
  • When menu component is used in context, be certain to set the aria-current attribute appropriately (i. e. when on the current page add the attribute aria-current="page" to the corresponding link in the menu).