Sidebar Nav

Ready

HTML
Twig
Context
Assets
Info
Notes


        
        <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 href="#" class="bux-sidebar-nav__link disclosure-nav-item-with-submenu">Item 1</a>
                <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
                    <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link bux-sidebar-nav__link--active disclosure-nav-item-with-submenu">Item 1.1</a>
                        <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
                            <li class="bux-sidebar-nav__item">
                                <a href="#" class="bux-sidebar-nav__link">Item 1.1.1</a>
                                <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
                                    <li class="bux-sidebar-nav__item">
                                        <a href="#" class="bux-sidebar-nav__link disclosure-nav-item-with-submenu">Item 1.1.1.1</a>
                                        <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
                                            <li class="bux-sidebar-nav__item">
                                                <a href="#" class="bux-sidebar-nav__link">Item 1.1.1.1.1</a>
                                            </li>
                                            <li class="bux-sidebar-nav__item">
                                                <a href="#" class="bux-sidebar-nav__link">Item 1.1.1.1.2</a>
                                            </li>
                                            <li class="bux-sidebar-nav__item">
                                                <a href="#" class="bux-sidebar-nav__link">Item 1.1.1.1.3</a>
                                            </li>
                                            <li class="bux-sidebar-nav__item">
                                                <a href="#" class="bux-sidebar-nav__link">Item 1.1.1.1.4</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="bux-sidebar-nav__item">
                                        <a href="#" class="bux-sidebar-nav__link">Item 1.1.1.2</a>
                                    </li>
                                    <li class="bux-sidebar-nav__item">
                                        <a href="#" class="bux-sidebar-nav__link">Item 1.1.1.3</a>
                                    </li>
                                    <li class="bux-sidebar-nav__item">
                                        <a href="#" class="bux-sidebar-nav__link">Item 1.1.1.4</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="bux-sidebar-nav__item">
                                <a href="#" class="bux-sidebar-nav__link">Item 1.1.2</a>
                            </li>
                            <li class="bux-sidebar-nav__item">
                                <a href="#" class="bux-sidebar-nav__link">Item 1.1.3</a>
                            </li>
                            <li class="bux-sidebar-nav__item">
                                <a href="#" class="bux-sidebar-nav__link">Item 1.1.4</a>
                            </li>
                        </ul>
                    </li>
                    <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link">Item 1.2</a>
                    </li>
                    <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link">Item 1.3</a>
                    </li>
                    <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link">Item 1.4</a>
                    </li>
                </ul>
            </li>
            <li class="bux-sidebar-nav__item">
                <a href="#" class="bux-sidebar-nav__link disclosure-nav-item-with-submenu">Item 2</a>
                <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
                    <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link">Item 2.1</a>
                    </li>
                    <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link">Item 2.2</a>
                    </li>
                    <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link">Item 2.3</a>
                    </li>
                    <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link">Item 2.4</a>
                    </li>
                </ul>
            </li>
            <li class="bux-sidebar-nav__item">
                <a href="#" class="bux-sidebar-nav__link">Item 3</a>
            </li>
            <li class="bux-sidebar-nav__item">
                <a href="#" class="bux-sidebar-nav__link disclosure-nav-item-with-submenu">Item 4</a>
                <ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
                    <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link">Item 4.1</a>
                    </li>
                    <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link">Item 4.2</a>
                    </li>
                    <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link">Item 4.3</a>
                    </li>
                    <li class="bux-sidebar-nav__item">
                        <a href="#" class="bux-sidebar-nav__link">Item 4.4</a>
                    </li>
                </ul>
            </li>
            <li class="bux-sidebar-nav__item">
                <a href="#" class="bux-sidebar-nav__link">Item 5</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.

#}

<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 %}
			<ul class="bux-sidebar-nav"> {# top level list #}
				{% for item in items %}
					<li class="bux-sidebar-nav__item">
						<a href="{{- item.url -}}" class="bux-sidebar-nav__link{% if item.active %} bux-sidebar-nav__link--active{% endif %}{% if item.subitems %} disclosure-nav-item-with-submenu{% endif %}">{{ item.title }}</a>
						{% if item.subitems %}
						<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed"> {# child level 1 list #}
							{% for subitem1 in item.subitems %}
							<li class="bux-sidebar-nav__item">
								<a href="{{- subitem1.url -}}" class="bux-sidebar-nav__link{% if subitem1.active %} bux-sidebar-nav__link--active{% endif %}{% if subitem1.subitems %} disclosure-nav-item-with-submenu{% endif %}">{{ subitem1.title }}</a>
								{% if subitem1.subitems %}
								<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed"> {# child level 2 list #}
									{% for subitem2 in subitem1.subitems %}
									<li class="bux-sidebar-nav__item">
										<a href="{{- subitem2.url -}}" class="bux-sidebar-nav__link{% if subitem2.active %} bux-sidebar-nav__link--active{% endif %}">{{ subitem2.title }}</a>
										{% if subitem2.subitems %}
										<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed"> {# child level 3 list #}
											{% for subitem3 in subitem2.subitems %}
											<li class="bux-sidebar-nav__item">
												<a href="{{- subitem3.url -}}" class="bux-sidebar-nav__link{% if subitem3.active %} bux-sidebar-nav__link--active{% endif %}{% if subitem3.subitems %} disclosure-nav-item-with-submenu{% endif %}">{{ subitem3.title }}</a>
												{% if subitem3.subitems %}
												<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed"> {# child level 4 list #}
													{% for subitem4 in subitem3.subitems %}
													<li class="bux-sidebar-nav__item">
														<a href="{{- subitem4.url -}}" class="bux-sidebar-nav__link{% if subitem4.active %} bux-sidebar-nav__link--active{% endif %}">{{ subitem4.title }}</a>
													</li>
													{% endfor %}
												</ul>
												{% endif %}
											</li>
											{% endfor %}
										</ul>
										{% endif %}
									</li>
									{% endfor %}
								</ul>
								{% endif %}
							</li>
							{% endfor %}
						</ul>
						{% endif %}
					</li>
				{% endfor %}
			</ul>
		{% 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: Item 1
    url: '#'
    active: false
    subitems:
      - title: Item 1.1
        url: '#'
        active: true
        subitems:
          - title: Item 1.1.1
            url: '#'
            active: false
            subitems:
              - title: Item 1.1.1.1
                url: '#'
                active: false
                subitems:
                  - title: Item 1.1.1.1.1
                    url: '#'
                    active: false
                  - title: Item 1.1.1.1.2
                    url: '#'
                    active: false
                  - title: Item 1.1.1.1.3
                    url: '#'
                    active: false
                  - title: Item 1.1.1.1.4
                    url: '#'
                    active: false
              - title: Item 1.1.1.2
                url: '#'
                active: false
              - title: Item 1.1.1.3
                url: '#'
                active: false
              - title: Item 1.1.1.4
                url: '#'
                active: false
          - title: Item 1.1.2
            url: '#'
            active: false
          - title: Item 1.1.3
            url: '#'
            active: false
          - title: Item 1.1.4
            url: '#'
            active: false
      - title: Item 1.2
        url: '#'
        active: false
      - title: Item 1.3
        url: '#'
        active: false
      - title: Item 1.4
        url: '#'
        active: false
  - title: Item 2
    url: '#'
    active: false
    subitems:
      - title: Item 2.1
        url: '#'
        active: false
      - title: Item 2.2
        url: '#'
        active: false
      - title: Item 2.3
        url: '#'
        active: false
      - title: Item 2.4
        url: '#'
        active: false
  - title: Item 3
    url: '#'
    active: false
  - title: Item 4
    url: '#'
    active: false
    subitems:
      - title: Item 4.1
        url: '#'
        active: false
      - title: Item 4.2
        url: '#'
        active: false
      - title: Item 4.3
        url: '#'
        active: false
      - title: Item 4.4
        url: '#'
        active: false
  - title: Item 5
    url: '#'
    active: false

File:

Content:


                                div.bux-container--sidebar-nav {

    padding: 0;

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

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

            &::after {
                // Down arrow
                font-family: bux-icons;
                content: "\f010";
                color: $gray-dark-80;
                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(90deg);
                            transition: 120ms transform ease-in-out;
                        }
                    }

                    &[aria-expanded="false"] {
                        &::after {
                            transform: rotate(0deg);
                            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.7 KB

Content:


                                const navMenuCheck = document.querySelector(".bux-sidebar-nav");

const expandActiveSubmenu = document.querySelector("[expand-active-submenu]");

if (expandActiveSubmenu) {
    const expandActiveSubmenuValue = expandActiveSubmenu.getAttribute('expand-active-submenu');
    var expandActiveSubmenuBool = expandActiveSubmenuValue == 'true';
}


if (navMenuCheck) {

    var options = {
        ariaLabel: "Sidebar Navigation",
        orientation: "vertical",
        useHover: false,
        useResponsiveMenu: false,
        activeClass: "bux-sidebar-nav__link--active",
        expandToActive: true,
        expandActiveSubmenu: expandActiveSubmenuBool,
    };
    if (typeof disclosureNav != "undefined") {
        var sidebarNav = new disclosureNav("#sidebar-nav", options);
    }
}

URL: /components/raw/sidebar-nav/sidebar-nav.js
Filesystem Path: src/components/sidebar-nav/sidebar-nav.js
Size: 786 Bytes

Handle: @sidebar-nav
Preview:
- With layout
- Component only
Filesystem Path: src/components/sidebar-nav/sidebar-nav.twig
Referenced by (2): @visual-demo, @templates-preview-with-sidebar

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).