New College of Florida Component Library

Quick Nav 

<div class="quick_nav">
    <div class="quick_nav_header">
        <h2 class="quick_nav_title" id="quick_nav_title"></h2>
    </div>
    <ul class="quick_nav_list" aria-labelledby="quick_nav_title">
        <li class="quick_nav_item">
            <button type="button" class="quick_nav_link quick_nav_link_menu menu_toggle js-swap" data-swap-target=".menu" data-swap-linked="menu">
                <span class="quick_nav_label">Menu</span>
                <div class="quick_nav_icon_border_menu">
                    <span class="quick_nav_icon">

                        <svg class="icon icon_menu">
                            <use href="/images/icons.svg#menu" />
                        </svg>

                    </span>
                </div>
            </button>
        </li>
        <li class="quick_nav_item">
            <a class="quick_nav_link quick_nav_link_visit" href="#" target="_blank" rel="noopener">
                <span class="quick_nav_label">Visit</span>
                <div class="quick_nav_icon_border_visit">
                    <span class="quick_nav_icon">
                        <svg class="icon icon_visit">
                            <use href="/images/icons.svg#visit" />
                        </svg>
                    </span>
                </div>
            </a>
        </li>
        <li class="quick_nav_item">
            <a class="quick_nav_link quick_nav_link_give" href="#" target="_blank" rel="noopener">
                <span class="quick_nav_label">Give</span>
                <div class="quick_nav_icon_border_give">
                    <span class="quick_nav_icon">
                        <svg class="icon icon_give">
                            <use href="/images/icons.svg#give" />
                        </svg>
                    </span>
                </div>
            </a>
        </li>
        <li class="quick_nav_item">
            <a class="quick_nav_link quick_nav_link_apply" href="#" target="_blank" rel="noopener">
                <span class="quick_nav_label">Apply</span>
                <div class="quick_nav_icon_border_apply">
                    <span class="quick_nav_icon">
                        <svg class="icon icon_apply">
                            <use href="/images/icons.svg#apply" />
                        </svg>
                    </span>
                </div>
            </a>
        </li>
    </ul>
</div>
 
{#
	{% include navigation("quick") with {
		modifier: "lg",
		title: "quick Navigation",
		links: [{ "title": "Facebook", "url": "#" }]
	} %}
#}

<div class="quick_nav{% if modifier %} quick_nav_{{ modifier }}{% endif %}">
	<div class="quick_nav_header">
		<h2 class="quick_nav_title" id="quick_nav_title{% if modifier %}_{{ modifier }}{% endif %}">{{ title }}</h2>
	</div>
	<ul class="quick_nav_list" aria-labelledby="quick_nav_title{% if modifier %}_{{ modifier }}{% endif %}">
		{% if modifier == "close" %}
			<li class="quick_nav_item">
				<button type="button" class="quick_nav_link quick_nav_link_menu menu_toggle js-menu-toggle js-swap" data-swap-target=".menu" data-swap-linked="menu">
					<span class="quick_nav_label">Close</span>
					<div class="quick_nav_icon_border_close">
						<span class="quick_nav_icon">
							{{ icon("close") }}
						</span>
					</div>
				</button>
			</li>
		{% else %}
			<li class="quick_nav_item">
				<button type="button" class="quick_nav_link quick_nav_link_menu menu_toggle js-swap" data-swap-target=".menu" data-swap-linked="menu">
					<span class="quick_nav_label">Menu</span>
					<div class="quick_nav_icon_border_menu">
						<span class="quick_nav_icon">
							{{ icon("menu") }}
						</span>
					</div>
				</button>
			</li>
		{% endif %}
		{% for link in links %}
			<li class="quick_nav_item">
				<a class="quick_nav_link quick_nav_link_{{ link.title|lower }}{% if modifier == "close" and loop.index == loop.length %} js-quick-nav-last{% endif %}" href="{{ link.url }}" target="_blank" rel="noopener">
					<span class="quick_nav_label">{{ link.title|capitalize }}</span>
					<div class="quick_nav_icon_border_{{link.title}}">
						<span class="quick_nav_icon">{{ icon(link.title|lower) }}</span>
					</div>
				</a>
			</li>
		{% endfor %}
	</ul>
</div>

No notes defined.