refactor: remove legacy UMASS samples and implement new header navigation and content block snippets

This commit is contained in:
2026-07-09 16:35:38 +07:00
parent e6d98edc45
commit 479d794b8e
385 changed files with 4125 additions and 82456 deletions
File diff suppressed because one or more lines are too long
@@ -0,0 +1,374 @@
<header class="sticky top-0 inset-x-0 z-50">
<div class="bg-primary-500 text-white h-[45px] z-[51] relative">
<div class="md:container h-full">
<div class="flex items-center justify-between h-full">
<div class="xl:flex grid grid-cols-3 max-xl:w-full items-center md:gap-4 gap-2 h-full">
<a data-text="Người bệnh &amp;
Cộng đồng" class="h-full items-center max-xl:text-center flex justify-center hover:text-primary-100 transition-colors relative before:content-[&#39;&#39;] before:absolute before:left-0 before:bottom-0 before:h-[3px] before:bg-primary-200 before:w-0 before:transition-all hover:before:w-full max-md:whitespace-pre-line flex-col after:content-[attr(data-text)] after:h-0 after:block after:invisible after:overflow-hidden after:font-semibold after:text-[14px] text-white before:w-full title-5 max-md:!text-[12px]" href="https://bvdaihoc.com.vn/">
Người bệnh &amp;
Cộng đồng</a>
<a data-text="Chuyên gia y tế" class="h-full items-center max-xl:text-center flex justify-center hover:text-primary-100 transition-colors relative before:content-[&#39;&#39;] before:absolute before:left-0 before:bottom-0 before:h-[3px] before:bg-primary-200 before:w-0 before:transition-all hover:before:w-full max-md:whitespace-pre-line flex-col after:content-[attr(data-text)] after:h-0 after:block after:invisible after:overflow-hidden after:font-semibold after:text-[14px] hover:text-primary-100 before:w-0 hover:before:w-full label-4 max-md:!text-[12px]" href="https://bvdaihoc.com.vn/chuyen-gia-y-te">
Chuyên gia y tế</a>
<a data-text="UMCers" class="h-full items-center max-xl:text-center flex justify-center hover:text-primary-100 transition-colors relative before:content-[&#39;&#39;] before:absolute before:left-0 before:bottom-0 before:h-[3px] before:bg-primary-200 before:w-0 before:transition-all hover:before:w-full max-md:whitespace-pre-line flex-col after:content-[attr(data-text)] after:h-0 after:block after:invisible after:overflow-hidden after:font-semibold after:text-[14px] hover:text-primary-100 before:w-0 hover:before:w-full label-4 max-md:!text-[12px]" href="https://bvdaihoc.com.vn/umcers">
UMCers</a>
</div>
<div class="flex items-center max-xl:hidden">
<a class="body-3 hover:text-primary-100 transition-colors" href="https://bvdaihoc.com.vn/dat-lich-kham">
Đặt lịch khám</a>
<span class="text-white mx-4 font-display">
|</span>
<a class="body-3 hover:text-primary-100 transition-colors" href="https://bvdaihoc.com.vn/dau-thau">
Đấu thầu</a>
<span class="text-white mx-4 font-display">
|</span>
<a class="body-3 hover:text-primary-100 transition-colors mr-[22px]" href="https://bvdaihoc.com.vn/lien-he">
Liên hệ</a>
<div class="flex items-center">
<div class="relative">
<button type="button" class="w-[42px] h-[45px] cursor-pointer flex items-center justify-center lg:hover:bg-primary-700 lg:duration-150">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-round size-[20px]">
<circle cx="12" cy="8" r="5">
</circle>
<path d="M20 21a8 8 0 0 0-16 0">
</path>
</svg>
</button>
</div>
<a class="size-[45px] cursor-pointer bg-primary-400 lg:hover:bg-primary-700 flex items-center justify-center lg:duration-150" href="https://bvdaihoc.com.vn/tim-kiem">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search">
<circle cx="11" cy="11" r="8">
</circle>
<path d="m21 21-4.3-4.3">
</path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!--$-->
<header class="bg-white transition-all shadow-md duration-150">
<div class="relative transition-colors duration-150 bg-white z-50">
<div class="container mx-auto flex h-[77px] items-center justify-between px-4 lg:px-10">
<div class="flex items-center xl:gap-[52px] gap-4 justify-between w-full">
<a class="relative block xl:h-[56px] h-[48px] xl:max-w-[242px] max-w-[216px] w-full" href="https://bvdaihoc.com.vn/">
<img alt="Logo" fetchpriority="high" loading="eager" width="242" height="56" decoding="async" data-nimg="1" style="color:transparent;object-fit:contain" sizes="100vw" srcset="/_next/image?url=%2Fimages%2Flogo.webp&amp;w=640&amp;q=80 640w, /_next/image?url=%2Fimages%2Flogo.webp&amp;w=750&amp;q=80 750w, /_next/image?url=%2Fimages%2Flogo.webp&amp;w=828&amp;q=80 828w, /_next/image?url=%2Fimages%2Flogo.webp&amp;w=1080&amp;q=80 1080w, /_next/image?url=%2Fimages%2Flogo.webp&amp;w=1200&amp;q=80 1200w, /_next/image?url=%2Fimages%2Flogo.webp&amp;w=1920&amp;q=80 1920w, /_next/image?url=%2Fimages%2Flogo.webp&amp;w=2048&amp;q=80 2048w, /_next/image?url=%2Fimages%2Flogo.webp&amp;w=3840&amp;q=80 3840w" src="./Bệnh viện Đại học Y Dược TP. Hồ Chí Minh_files/logo.jpeg">
</a>
<nav class="hidden h-[77px] xl:flex">
<ul class="flex h-full items-center xl:space-x-[26px] space-x-4">
<li class="h-full group flex-shrink-0">
<a class="flex flex-shrink-0 title-2 text-primary-600 h-full items-center gap-2 duration-150 ease-in-out underline-offset-4 " href="https://bvdaihoc.com.vn/gioi-thieu-tong-quan">
<span>
Về Bệnh viện</span>
<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2 w-2 duration-150 ease-in-out text-gray-300 group-hover:-rotate-180">
<path d="M0.759766 0.5L4.68906 4.42929C4.72811 4.46834 4.79142 4.46834 4.83048 4.42929L8.75977 0.5" stroke="currentColor" stroke-linecap="round">
</path>
</svg>
</a>
</li>
<li class="h-full group flex-shrink-0">
<a class="flex flex-shrink-0 title-2 text-primary-600 h-full items-center gap-2 duration-150 ease-in-out underline-offset-4 " href="https://bvdaihoc.com.vn/chuyen-khoa">
<span>
Chuyên khoa</span>
</a>
</li>
<li class="h-full group flex-shrink-0">
<a class="flex flex-shrink-0 title-2 text-primary-600 h-full items-center gap-2 duration-150 ease-in-out underline-offset-4 " href="https://bvdaihoc.com.vn/bac-si">
<span>
Bác sĩ</span>
</a>
</li>
<li class="h-full group flex-shrink-0">
<a class="flex flex-shrink-0 title-2 text-primary-600 h-full items-center gap-2 duration-150 ease-in-out underline-offset-4 " href="https://bvdaihoc.com.vn/dich-vu">
<span>
Dịch vụ</span>
<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2 w-2 duration-150 ease-in-out text-gray-300 group-hover:-rotate-180">
<path d="M0.759766 0.5L4.68906 4.42929C4.72811 4.46834 4.79142 4.46834 4.83048 4.42929L8.75977 0.5" stroke="currentColor" stroke-linecap="round">
</path>
</svg>
</a>
</li>
<li class="h-full group flex-shrink-0">
<a class="flex flex-shrink-0 title-2 text-primary-600 h-full items-center gap-2 duration-150 ease-in-out underline-offset-4 " href="https://bvdaihoc.com.vn/thu-vien-suc-khoe">
<span>
Thư viện sức khỏe</span>
</a>
</li>
<li class="h-full group flex-shrink-0">
<a class="flex flex-shrink-0 title-2 text-primary-600 h-full items-center gap-2 duration-150 ease-in-out underline-offset-4 " href="https://bvdaihoc.com.vn/tin-tuc-va-su-kien">
<span>
Tin tức &amp; Sự kiện</span>
<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2 w-2 duration-150 ease-in-out text-gray-300 group-hover:-rotate-180">
<path d="M0.759766 0.5L4.68906 4.42929C4.72811 4.46834 4.79142 4.46834 4.83048 4.42929L8.75977 0.5" stroke="currentColor" stroke-linecap="round">
</path>
</svg>
</a>
</li>
<li class="h-full group flex-shrink-0">
<button class="flex flex-shrink-0 title-2 text-primary-600 h-full items-center gap-2 duration-150 ease-in-out underline-offset-4 cursor-pointer ">
<span>
Hỗ trợ người bệnh</span>
<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2 w-2 duration-150 ease-in-out text-gray-300 group-hover:-rotate-180">
<path d="M0.759766 0.5L4.68906 4.42929C4.72811 4.46834 4.79142 4.46834 4.83048 4.42929L8.75977 0.5" stroke="currentColor" stroke-linecap="round">
</path>
</svg>
</button>
</li>
</ul>
</nav>
<div class="flex xl:hidden items-center">
<a class="size-[42px] flex items-center justify-center" href="https://bvdaihoc.com.vn/tim-kiem">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search text-black">
<circle cx="11" cy="11" r="8">
</circle>
<path d="m21 21-4.3-4.3">
</path>
</svg>
</a>
<div class="relative mr-2.5">
<button type="button" class="size-[42px] flex items-center justify-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-round text-black">
<circle cx="12" cy="8" r="5">
</circle>
<path d="M20 21a8 8 0 0 0-16 0">
</path>
</svg>
</button>
</div>
<button class="py-[7px] px-px">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu h-6 w-6">
<line x1="4" x2="20" y1="12" y2="12">
</line>
<line x1="4" x2="20" y1="6" y2="6">
</line>
<line x1="4" x2="20" y1="18" y2="18">
</line>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="fixed inset-x-0 top-[122px] h-[calc(100svh)] bg-gray-100 z-[49] transition-transform duration-300 xl:hidden -translate-y-full">
<div class="relative">
<div class="max-h-[calc(100svh-196px)] overflow-y-auto">
<div class="p-4">
<div class="bg-primary-600 rounded-md title-6 text-white p-4">
<a class="flex items-center space-x-1.5 pb-3 border-b border-white" href="https://bvdaihoc.com.vn/ung-dung-umc-care">
<img alt="logo pre header" fetchpriority="high" loading="eager" width="21" height="21" decoding="async" data-nimg="1" class="rounded" style="color:transparent;object-fit:cover" sizes="100vw" srcset="/_next/image?url=%2Fpre-logo.png&amp;w=640&amp;q=80 640w, /_next/image?url=%2Fpre-logo.png&amp;w=750&amp;q=80 750w, /_next/image?url=%2Fpre-logo.png&amp;w=828&amp;q=80 828w, /_next/image?url=%2Fpre-logo.png&amp;w=1080&amp;q=80 1080w, /_next/image?url=%2Fpre-logo.png&amp;w=1200&amp;q=80 1200w, /_next/image?url=%2Fpre-logo.png&amp;w=1920&amp;q=80 1920w, /_next/image?url=%2Fpre-logo.png&amp;w=2048&amp;q=80 2048w, /_next/image?url=%2Fpre-logo.png&amp;w=3840&amp;q=80 3840w" src="./Bệnh viện Đại học Y Dược TP. Hồ Chí Minh_files/pre-logo.png">
<div>
ỨNG DỤNG UMC CARE</div>
</a>
<a class="py-3 border-b border-white block" href="https://bvdaihoc.com.vn/dat-lich-kham">
Đặt lịch khám</a>
<a class="pt-3 block" href="https://bvdaihoc.com.vn/dau-thau">
Đấu thầu</a>
</div>
</div>
<div class="bg-gray-100">
<div class="px-4">
<div>
<div class="border-b border-gray-100 py-3">
<div class="flex w-full items-center justify-between ">
<a class="flex-1 flex items-center" href="https://bvdaihoc.com.vn/gioi-thieu-tong-quan">
<span class="title-1 text-primary-600">
Về Bệnh viện</span>
</a>
<button class="ml-2 p-1 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-5 h-5 transition-transform duration-200 text-gray-600 -rotate-90">
<path d="m6 9 6 6 6-6">
</path>
</svg>
</button>
</div>
<div class="overflow-hidden transition-all duration-200 max-h-0">
<div class="pt-3.5 space-y-2">
<a class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 pl-4" href="https://bvdaihoc.com.vn/gioi-thieu-tong-quan">
<span class="title-1 text-primary-600">
Giới thiệu tổng quan</span>
</a>
<a class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 pl-4" href="https://bvdaihoc.com.vn/lich-su-benh-vien">
<span class="title-1 text-primary-600">
Lịch sử Bệnh viện</span>
</a>
<a class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 pl-4" href="https://bvdaihoc.com.vn/tam-nhin-su-menh-gia-tri-cot-loi">
<span class="title-1 text-primary-600">
Tầm nhìn - Sứ mệnh - Giá trị cốt lõi</span>
</a>
<a class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 pl-4" href="https://bvdaihoc.com.vn/doi-ngu-lanh-dao">
<span class="title-1 text-primary-600">
Ban lãnh đạo</span>
</a>
<a class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 pl-4" href="https://bvdaihoc.com.vn/cac-don-vi">
<span class="title-1 text-primary-600">
Các đơn vị</span>
</a>
<a class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 pl-4" href="https://bvdaihoc.com.vn/thanh-tuu-va-giai-thuong">
<span class="title-1 text-primary-600">
Thành tựu và giải thưởng</span>
</a>
<a class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 pl-4" href="https://bvdaihoc.com.vn/lien-he">
<span class="title-1 text-primary-600">
Liên hệ</span>
</a>
</div>
</div>
</div>
</div>
<div>
<a class="flex flex-shrink-0 title-1 py-3 justify-between items-center duration-150 ease-in-out text-primary-600 border-b border-gray-100" href="https://bvdaihoc.com.vn/chuyen-khoa">
<span>
Chuyên khoa</span>
</a>
</div>
<div>
<a class="flex flex-shrink-0 title-1 py-3 justify-between items-center duration-150 ease-in-out text-primary-600 border-b border-gray-100" href="https://bvdaihoc.com.vn/bac-si">
<span>
Bác sĩ</span>
</a>
</div>
<div>
<div class="border-b border-gray-100 py-3">
<div class="flex w-full items-center justify-between ">
<a class="flex-1 flex items-center" href="https://bvdaihoc.com.vn/dich-vu">
<span class="title-1 text-primary-600">
Dịch vụ</span>
</a>
<button class="ml-2 p-1 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-5 h-5 transition-transform duration-200 text-gray-600 -rotate-90">
<path d="m6 9 6 6 6-6">
</path>
</svg>
</button>
</div>
<div class="overflow-hidden transition-all duration-200 max-h-0">
<div class="pt-3.5 space-y-2">
<a class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 pl-4" href="https://bvdaihoc.com.vn/dich-vu#kham-benh-ngoai-tru">
<span class="title-1 text-primary-600">
Khám bệnh ngoại trú</span>
</a>
<a class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 pl-4" href="https://bvdaihoc.com.vn/dich-vu?tabName=inpatient-treatment#dieu-tri-noi-tru">
<span class="title-1 text-primary-600">
Điều trị Nội trú</span>
</a>
<a class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 pl-4" href="https://bvdaihoc.com.vn/dich-vu?tabName=emergency#dieu-tri-noi-tru">
<span class="title-1 text-primary-600">
Cấp cứu</span>
</a>
<a class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 pl-4" href="https://bvdaihoc.com.vn/dich-vu#bang-gia">
<span class="title-1 text-primary-600">
Bảng giá</span>
</a>
</div>
</div>
</div>
</div>
<div>
<a class="flex flex-shrink-0 title-1 py-3 justify-between items-center duration-150 ease-in-out text-primary-600 border-b border-gray-100" href="https://bvdaihoc.com.vn/thu-vien-suc-khoe">
<span>
Thư viện sức khỏe</span>
</a>
</div>
<div>
<div class="border-b border-gray-100 py-3">
<div class="flex w-full items-center justify-between ">
<a class="flex-1 flex items-center" href="https://bvdaihoc.com.vn/tin-tuc-va-su-kien">
<span class="title-1 text-primary-600">
Tin tức &amp; Sự kiện</span>
</a>
<button class="ml-2 p-1 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-5 h-5 transition-transform duration-200 text-gray-600 -rotate-90">
<path d="m6 9 6 6 6-6">
</path>
</svg>
</button>
</div>
<div class="overflow-hidden transition-all duration-200 max-h-0">
<div class="pt-3.5 space-y-2">
<a class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 pl-4" href="https://bvdaihoc.com.vn/cong-tac-xa-hoi">
<span class="title-1 text-primary-600">
Công tác xã hội</span>
</a>
</div>
</div>
</div>
</div>
<div>
<div class="border-b border-gray-100 py-3">
<div class="flex w-full items-center justify-between ">
<a class="flex-1 flex items-center" href="https://bvdaihoc.com.vn/thong-tin-can-biet">
<span class="title-1 text-primary-600">
Hỗ trợ người bệnh</span>
</a>
<button class="ml-2 p-1 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-5 h-5 transition-transform duration-200 text-gray-600 -rotate-90">
<path d="m6 9 6 6 6-6">
</path>
</svg>
</button>
</div>
<div class="overflow-hidden transition-all duration-200 max-h-0">
<div class="pt-3.5 space-y-2">
<a class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 pl-4" href="https://bvdaihoc.com.vn/thong-tin-can-biet">
<span class="title-1 text-primary-600">
Thông tin cần biết</span>
</a>
<a class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 pl-4" href="https://bvdaihoc.com.vn/dang-ky-hien-tang">
<span class="title-1 text-primary-600">
Đăng ký hiến tạng</span>
</a>
<a class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 pl-4" href="https://bvdaihoc.com.vn/cau-hoi-thuong-gap">
<span class="title-1 text-primary-600">
Câu hỏi thường gặp</span>
</a>
<button class="flex items-center justify-between lg:p-4 md:p-3 p-2 border-b border-gray-100 last:border-b-0 w-full text-left pl-4">
<span class="title-1 text-primary-600">
Liên hệ hỗ trợ</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-4 flex justify-start items-center space-x-2 bg-gray-100 sticky bottom-0">
<div class="h-[42px] text-center flex items-center justify-center body-3 text-gray-700">
<div class="flex items-center justify-center opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 85.333 512 341.333" class="w-5 flex-shrink-0">
<path fill="#D80027" d="M196.641 85.337H0v341.326h512V85.337z">
</path>
<path fill="#FFDA44" d="m256 157.279 22.663 69.747H352l-59.332 43.106 22.664 69.749L256 296.774l-59.332 43.107 22.664-69.749L160 227.026h73.337z">
</path>
</svg>
<span class="ml-1">
Tiếng việt</span>
</div>
</div>
<div class="h-3 w-px bg-gray-200">
</div>
<div class="h-[42px] text-center flex items-center justify-center body-3 text-gray-700">
<div class="flex items-center justify-center opacity-30">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342" class="w-5 flex-shrink-0">
<path fill="#FFF" d="M0 0h513v342H0z">
</path>
<g fill="#D80027">
<path d="M0 0h513v26.3H0zM0 52.6h513v26.3H0zM0 105.2h513v26.3H0zM0 157.8h513v26.3H0zM0 210.5h513v26.3H0zM0 263.1h513v26.3H0zM0 315.7h513V342H0z">
</path>
</g>
<path fill="#2E52B2" d="M0 0h256.5v184.1H0z">
</path>
<g fill="#FFF">
<path d="m47.8 138.9-4-12.8-4.4 12.8H26.2l10.7 7.7-4 12.8 10.9-7.9 10.6 7.9-4.1-12.8 10.9-7.7zM104.1 138.9l-4.1-12.8-4.2 12.8H82.6l10.7 7.7-4 12.8 10.7-7.9 10.8 7.9-4-12.8 10.7-7.7zM160.6 138.9l-4.3-12.8-4 12.8h-13.5l11 7.7-4.2 12.8 10.7-7.9 11 7.9-4.2-12.8 10.7-7.7zM216.8 138.9l-4-12.8-4.2 12.8h-13.3l10.8 7.7-4 12.8 10.7-7.9 10.8 7.9-4.3-12.8 11-7.7zM100 75.3l-4.2 12.8H82.6L93.3 96l-4 12.6 10.7-7.8 10.8 7.8-4-12.6 10.7-7.9h-13.4zM43.8 75.3l-4.4 12.8H26.2L36.9 96l-4 12.6 10.9-7.8 10.6 7.8L50.3 96l10.9-7.9H47.8zM156.3 75.3l-4 12.8h-13.5l11 7.9-4.2 12.6 10.7-7.8 11 7.8-4.2-12.6 10.7-7.9h-13.2zM212.8 75.3l-4.2 12.8h-13.3l10.8 7.9-4 12.6 10.7-7.8 10.8 7.8-4.3-12.6 11-7.9h-13.5zM43.8 24.7l-4.4 12.6H26.2l10.7 7.9-4 12.7L43.8 50l10.6 7.9-4.1-12.7 10.9-7.9H47.8zM100 24.7l-4.2 12.6H82.6l10.7 7.9-4 12.7L100 50l10.8 7.9-4-12.7 10.7-7.9h-13.4zM156.3 24.7l-4 12.6h-13.5l11 7.9-4.2 12.7 10.7-7.9 11 7.9-4.2-12.7 10.7-7.9h-13.2zM212.8 24.7l-4.2 12.6h-13.3l10.8 7.9-4 12.7 10.7-7.9 10.8 7.9-4.3-12.7 11-7.9h-13.5z">
</path>
</g>
</svg>
<span class="ml-1">
English</span>
</div>
</div>
</div>
</div>
</header>
@@ -0,0 +1,35 @@
<body>
<div data-component-id="umass_base:block-multiple-ctas" data-background="solid" data-layout-variant="default">
<div class="container">
<div class="text-container">
<div data-component-id="umass_base:section-title" class="f--section-title">
<h2>Step Into <span class="highlight">Your Future</span>
</h2>
</div>
</div>
<div class="links-container">
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/apply" class="button-text-link button-context-light " aria-label="Apply" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Apply </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/academics/explore-our-programs" class="button-text-link button-context-light " aria-label="Majors &amp; Minors" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Majors &amp; Minors </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/undergraduate-admissions/costs-aid" class="button-text-link button-context-light " aria-label="Tuition &amp; Costs" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Tuition &amp; Costs </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/visit" class="button-text-link button-context-light " aria-label="Take a Tour" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Take a Tour </span>
</a>
</div>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
@@ -0,0 +1,163 @@
<body>
<div class="cc--component-container cc--tabbed-media-content ">
<div class="c--component c--tabbed-media-content">
<div class="tabbed-media-content-text-col">
<div data-component-id="umass_base:section-title" class="f--section-title">
<h2>What's Life Like at UMass?</h2>
</div>
<div data-component-id="umass_base:tabbed-container" data-once="tabbed-container">
<div class="tab-labels-container" role="tablist">
<div class="tab-labels-inner">
<a href="https://www.umass.edu/#tabbed-content-campus-life" class="tab-label link-context-dark" role="tab" aria-selected="true" aria-controls="tabbed-content-campus-life">Campus Life</a>
<a href="https://www.umass.edu/#tabbed-content-campus-housing" class="tab-label link-context-dark" role="tab" aria-selected="false" aria-controls="tabbed-content-campus-housing">Campus Housing</a>
<a href="https://www.umass.edu/#tabbed-content-dining" class="tab-label link-context-dark" role="tab" aria-selected="false" aria-controls="tabbed-content-dining">Dining</a>
<a href="https://www.umass.edu/#tabbed-content-around-amherst" class="tab-label link-context-dark" role="tab" aria-selected="false" aria-controls="tabbed-content-around-amherst">Around Amherst</a>
</div>
</div>
<div class="tab-content-container">
<div class="tab-content-panel is-active" id="tabbed-content-campus-life" role="tabpanel" aria-live="polite">
<div class="f--field f--cta-title">
<h3> Make UMass Your Own </h3>
</div>
<div data-component-id="umass_base:description" class="f--description">
<p>Explore big ideas, join vibrant communities, and shape a college experience thats uniquely yours.</p>
</div>
<div class="cta-container">
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/campus-life/student-activities" class="button-primary button-context-light " aria-label="Learn About Student Activities" data-component-id="umass_base:button">
<span class="button-text"> Learn About Student Activities </span>
</a>
</div>
</div>
</div>
<div class="tab-content-panel" id="tabbed-content-campus-housing" role="tabpanel" aria-live="polite">
<div class="f--field f--cta-title">
<h3> Your Campus Home </h3>
</div>
<div data-component-id="umass_base:description" class="f--description">
<p>Choose from vibrant residential communities where students live, study, and build lasting friendships steps from the classroom.</p>
</div>
<div class="cta-container">
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/campus-life/living-and-dining" class="button-primary button-context-light " aria-label="Learn About Living at UMass" data-component-id="umass_base:button">
<span class="button-text"> Learn About Living at UMass </span>
</a>
</div>
</div>
</div>
<div class="tab-content-panel" id="tabbed-content-dining" role="tabpanel" aria-live="polite">
<div class="f--field f--cta-title">
<h3> Food Worth Talking About </h3>
</div>
<div data-component-id="umass_base:description" class="f--description">
<p>Discover why UMass dining is ranked #1 nationally—recognized for quality, variety, and sustainability.</p>
</div>
<div class="cta-container">
<div class="f--field f--button">
<a href="https://www.umassdining.com/" class="button-primary button-context-light ext" aria-label="Learn Why UMass is #1 in Dining" data-component-id="umass_base:button" data-extlink="">
<span class="button-text"> Learn Why UMass is #1 in Dining </span>
<svg focusable="false" width="1em" height="1em" class="ext" data-extlink-placement="append" aria-label="(link is external)" viewBox="0 0 80 40" role="img" aria-hidden="false">
<title>(link is external)</title>
<path d="M48 26c-1.1 0-2 0.9-2 2v26H10V18h26c1.1 0 2-0.9 2-2s-0.9-2-2-2H8c-1.1 0-2 0.9-2 2v40c0 1.1 0.9 2 2 2h40c1.1 0 2-0.9 2-2V28C50 26.9 49.1 26 48 26z"></path>
<path d="M56 6H44c-1.1 0-2 0.9-2 2s0.9 2 2 2h7.2L30.6 30.6c-0.8 0.8-0.8 2 0 2.8C31 33.8 31.5 34 32 34s1-0.2 1.4-0.6L54 12.8V20c0 1.1 0.9 2 2 2s2-0.9 2-2V8C58 6.9 57.1 6 56 6z"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="tab-content-panel" id="tabbed-content-around-amherst" role="tabpanel" aria-live="polite">
<div class="f--field f--cta-title">
<h3> Amherst, Uncommon </h3>
</div>
<div data-component-id="umass_base:description" class="f--description">
<p>A vibrant creative culture, great food, and the natural beauty of the Pioneer Valley come together to shape this towns distinctive, welcoming spirit.</p>
</div>
<div class="cta-container">
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/student-life/life-amherst" class="button-primary button-context-light " aria-label="Learn More About Amherst" data-component-id="umass_base:button">
<span class="button-text"> Learn More About Amherst </span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tabbed-media-content-media-col">
<div class="tabbed-media-content-media-item is-active with-video" data-tab-id="tabbed-content-campus-life">
<div class="f--field f--image">
<img data-src="/sites/default/files/styles/9_16_720x1280/public/2026-03/medium_jpg-2026_Vertical_Assets_5179_John_Solem_.jpg?h=7c5befa5&amp;itok=DZUe-3fS" class=" ls-is-cached lazyloaded" alt="A UMass student plays ping pong." src="./UMass Amherst _ UMass Amherst_files/medium_jpg-2026_Vertical_Assets_5179_John_Solem_.jpg">
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
<span class="button-icon button-icon-play">
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
</svg>
</span>
<span class="button-text visually-hidden"> Play </span>
</a>
</div>
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
<iframe title="Video Content" id="video-132086-1" width="900" height="1600" src="./UMass Amherst _ UMass Amherst_files/q0ZxZVbnMqs.html" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>
<div class="tabbed-media-content-media-item with-video" data-tab-id="tabbed-content-campus-housing">
<div class="f--field f--image">
<img data-src="/sites/default/files/styles/9_16_720x1280/public/2026-03/FY26_Vertical-Campus-Housing.jpg?h=75081741&amp;itok=6kDcYqy3" class="lazyload" alt="A UMass student sits on her bed in a dorm room.">
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
<span class="button-icon button-icon-play">
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
</svg>
</span>
<span class="button-text visually-hidden"> Play </span>
</a>
</div>
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
<iframe title="Video Content" id="video-132086-2" width="900" height="1600" src="./UMass Amherst _ UMass Amherst_files/7D_TnBztQhU.html" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>
<div class="tabbed-media-content-media-item with-video" data-tab-id="tabbed-content-dining">
<div class="f--field f--image">
<img data-src="/sites/default/files/styles/9_16_720x1280/public/2026-03/FY26_Vertical-Dining2.jpg?h=75081741&amp;itok=_34BDcqA" class="lazyload" alt="A student gets food at a UMass Amherst dining hall.">
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
<span class="button-icon button-icon-play">
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
</svg>
</span>
<span class="button-text visually-hidden"> Play </span>
</a>
</div>
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
<iframe title="Video Content" id="video-132086-3" width="900" height="1600" src="./UMass Amherst _ UMass Amherst_files/YRzZ9aRZ69w.html" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>
<div class="tabbed-media-content-media-item with-video" data-tab-id="tabbed-content-around-amherst">
<div class="f--field f--image">
<img data-src="/sites/default/files/styles/9_16_720x1280/public/2026-03/FY26_Vertical-Downtown-Amherst.jpg?h=75081741&amp;itok=irWjha4q" class="lazyload" alt="A UMass student holds a hote bag that reads &quot;I Love Amherst.&quot;">
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/#" class="button-play button-context-light " aria-label="Play video" data-component-id="umass_base:button">
<span class="button-icon button-icon-play">
<svg width="18" height="27" viewBox="0 0 18 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M18 13.5L0 0V27L18 13.5Z"></path>
</svg>
</span>
<span class="button-text visually-hidden"> Play </span>
</a>
</div>
<div data-component-id="umass_base:video-embed" class="f--field f--video-embed">
<iframe title="Video Content" id="video-132086-4" width="900" height="1600" src="./UMass Amherst _ UMass Amherst_files/agqIJlJpbAY.html" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
@@ -0,0 +1,39 @@
<body>
<div class="cc--component-container cc--stats-block ">
<div class="c--component c--stats-block">
<div class="f--field f--stats-block">
<div class="cc--component-container cc--stat">
<div class="c--component c--stat">
<div class="f--field f--stat-number">#1</div>
<div class="f--field f--description">
<p>Public Research University in New England, <br>Non-Medical School R&amp;D Expenditures </p>
</div>
</div>
</div>
<div class="cc--component-container cc--stat">
<div class="c--component c--stat">
<div class="f--field f--stat-number">251</div>
<div class="f--field f--description">
<p>Total Degree Programs</p>
</div>
</div>
</div>
<div class="cc--component-container cc--stat">
<div class="c--component c--stat">
<div class="f--field f--stat-number">Top 50</div>
<div class="f--field f--description">
<p>Best Value Colleges (Public), <em>The Princeton Review</em>
</p>
</div>
</div>
</div>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/why-umass/about-umass-amherst/umass-amherst-numbers" class="button-primary button-context-light " aria-label="UMass Amherst By The Numbers" data-component-id="umass_base:button">
<span class="button-text"> UMass Amherst By The Numbers </span>
</a>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
@@ -0,0 +1,86 @@
<body>
<div class="paragraph paragraph--type--quad-card-grid paragraph--view-mode--default paragraph--quad-card-grid" data-component-id="umass_base:image-link-grid">
<div class="qcg">
<div class="qcg__left">
<h2 class="qcg__title"> Excellence in Action </h2>
<div class="qcg__description">
<div>
<p>UMass Amherst advances academic excellence through research, teaching, and engagement across campus. Students and faculty drive discovery through programs, scholarship, and events that extend beyond the classroom.</p>
</div>
</div>
<div class="qcg__link">
<a href="https://www.umass.edu/gateway/why-umass/discover-ideas" class="ext" target="_self" aria-label="Discover Ideas Discover Ideas" rel="noopener noreferrer"> Discover Ideas </a>
</div>
</div>
<div class="qcg__right">
<div class="qcg__grid">
<div class="qcg__card">
<div class="paragraph paragraph--type--quad-card-grid-item paragraph--view-mode--default paragraph--quad-card-grid-item qcg-item" data-component-id="umass_base:image-link-grid-item">
<div class="qcg-item__image">
<div>
<article>
<div>
<img loading="lazy" srcset="/sites/default/files/styles/4_3_400x300/public/2025-12/FY26UMass_HackUMass_LANDING.jpg?h=854a7be2&amp;itok=ysOMEN8V 400w, /sites/default/files/styles/4_3_800x600/public/2025-12/FY26UMass_HackUMass_LANDING.jpg?h=854a7be2&amp;itok=jtWz1GCX 800w, /sites/default/files/styles/4_3_1600x1200/public/2025-12/FY26UMass_HackUMass_LANDING.jpg?h=854a7be2&amp;itok=xAxf5s8X 1600w, /sites/default/files/styles/4_3_1920x1440/public/2025-12/FY26UMass_HackUMass_LANDING.jpg?h=854a7be2&amp;itok=3yPPf8f1 1920w" sizes="100vw" width="400" height="300" src="./UMass Amherst _ UMass Amherst_files/FY26UMass_HackUMass_LANDING.jpg" alt="A group of five students lean over laptops in a classroom">
</div>
</article>
</div>
</div>
<div class="qcg-item__link">
<a href="https://www.umass.edu/gateway/umass-stories/hackumass" class="qcg-item__cta" target="_self" aria-label="HackUMass: Code, Collaborations &amp; Big Ideas HackUMass: Code, Collaborations &amp; Big Ideas"> HackUMass: Code, Collaborations &amp; Big Ideas </a>
</div>
</div>
</div>
<div class="qcg__card">
<div class="paragraph paragraph--type--quad-card-grid-item paragraph--view-mode--default paragraph--quad-card-grid-item qcg-item" data-component-id="umass_base:image-link-grid-item">
<div class="qcg-item__image">
<div>
<article>
<div>
<img loading="lazy" srcset="/sites/default/files/styles/4_3_400x300/public/2025-06/UPC2025__HERO_2000x1125.jpg?h=0f182455&amp;itok=4PUBT11w 400w, /sites/default/files/styles/4_3_800x600/public/2025-06/UPC2025__HERO_2000x1125.jpg?h=0f182455&amp;itok=r72eJsZX 800w, /sites/default/files/styles/4_3_1600x1200/public/2025-06/UPC2025__HERO_2000x1125.jpg?h=0f182455&amp;itok=HXie2chE 1600w, /sites/default/files/styles/4_3_1920x1440/public/2025-06/UPC2025__HERO_2000x1125.jpg?h=0f182455&amp;itok=ufOsI9X8 1920w" sizes="100vw" width="400" height="300" src="./UMass Amherst _ UMass Amherst_files/UPC2025__HERO_2000x1125.jpg" alt="Tinashe performs at the Spring Concert.">
</div>
</article>
</div>
</div>
<div class="qcg-item__link">
<a href="https://www.umass.edu/gateway/umass-stories/inside-upc" class="qcg-item__cta" target="_self" aria-label="Inside UPC: Student-Led Events With Lasting Impact Inside UPC: Student-Led Events With Lasting Impact"> Inside UPC: Student-Led Events With Lasting Impact </a>
</div>
</div>
</div>
<div class="qcg__card">
<div class="paragraph paragraph--type--quad-card-grid-item paragraph--view-mode--default paragraph--quad-card-grid-item qcg-item" data-component-id="umass_base:image-link-grid-item">
<div class="qcg-item__image">
<div>
<article>
<div>
<img loading="lazy" srcset="/sites/default/files/styles/4_3_400x300/public/2025-09/FY26_BeTheFuture_WeAreRev_photo4.jpg?h=854a7be2&amp;itok=jVpB7bGa 400w, /sites/default/files/styles/4_3_800x600/public/2025-09/FY26_BeTheFuture_WeAreRev_photo4.jpg?h=854a7be2&amp;itok=CcG3pX7V 800w, /sites/default/files/styles/4_3_1600x1200/public/2025-09/FY26_BeTheFuture_WeAreRev_photo4.jpg?h=854a7be2&amp;itok=mDWs6wTt 1600w, /sites/default/files/styles/4_3_1920x1440/public/2025-09/FY26_BeTheFuture_WeAreRev_photo4.jpg?h=854a7be2&amp;itok=cgBcz7LE 1920w" sizes="100vw" width="400" height="300" src="./UMass Amherst _ UMass Amherst_files/FY26_BeTheFuture_WeAreRev_photo4.jpg" alt="Two students work with building tools.">
</div>
</article>
</div>
</div>
<div class="qcg-item__link">
<a href="https://www.umass.edu/gateway/umass-stories/changemakers-making" class="qcg-item__cta" target="_self" aria-label="Changemakers in the Making: Be the Future You Want to See Changemakers in the Making: Students Aren&#39;t Just Waiting for the Future, They&#39;re Making It"> Changemakers in the Making: Be the Future You Want to See </a>
</div>
</div>
</div>
<div class="qcg__card">
<div class="paragraph paragraph--type--quad-card-grid-item paragraph--view-mode--default paragraph--quad-card-grid-item qcg-item" data-component-id="umass_base:image-link-grid-item">
<div class="qcg-item__image">
<div>
<article>
<div>
<img loading="lazy" srcset="/sites/default/files/styles/4_3_400x300/public/2025-12/2025_Vy_Do_7780_John_Solem_2000x1125.jpg?h=854a7be2&amp;itok=Idf4wkAD 400w, /sites/default/files/styles/4_3_800x600/public/2025-12/2025_Vy_Do_7780_John_Solem_2000x1125.jpg?h=854a7be2&amp;itok=WUqiETKc 800w, /sites/default/files/styles/4_3_1600x1200/public/2025-12/2025_Vy_Do_7780_John_Solem_2000x1125.jpg?h=854a7be2&amp;itok=p7De2fBX 1600w, /sites/default/files/styles/4_3_1920x1440/public/2025-12/2025_Vy_Do_7780_John_Solem_2000x1125.jpg?h=854a7be2&amp;itok=AEX7-hAe 1920w" sizes="100vw" width="400" height="300" src="./UMass Amherst _ UMass Amherst_files/2025_Vy_Do_7780_John_Solem_2000x1125.jpg" alt="Vy Do in UMas Amherst biomedical engineering lab">
</div>
</article>
</div>
</div>
<div class="qcg-item__link">
<a href="https://www.umass.edu/gateway/research/stories/rising-researchers/biomedical-engineering-nanomedicine-drug-delivery" class="qcg-item__cta" target="_self" aria-label="Biomedical Engineering Research to Advance Drug Delivery Biomedical Engineering Research to Advance Drug Delivery: Vy Do 26 conducts research to develop nanocarriers for therapeutic genetic materials to treat traumatic brain injuries and other neurological conditions."> Biomedical Engineering Research to Advance Drug Delivery </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
@@ -0,0 +1,71 @@
<body>
<div class="cc--component-container cc--card-grid dark">
<div class="c--component c--card-grid">
<div class="text-container">
<div data-component-id="umass_base:section-title" class="f--section-title">
<h2>Blaze Your Own Trail</h2>
</div>
<div data-component-id="umass_base:description" class="f--section-title f--description">
<p>Discover more than 100 undergraduate majors, minors, and certificates in fields ranging from engineering to public health to literature. You can even design your own major through our individual concentration program. Whatever your path, UMass gives you the freedom to explore and the tools to excel.</p>
</div>
</div>
<div class="f--field f--cards nested">
<div class="cc--component-container cc--card-grid-card ">
<div class="c--component c--card-grid-card">
<div class="f--field f--image">
<img data-src="/sites/default/files/styles/16_9_320x180/public/2025-09/FY26_BeTheFuture-HERO_professor-with-students.jpg?h=854a7be2&amp;itok=sAJtETQj" class=" lazyloaded" alt="A professor walks with students in the rooftop garden of the Olver Design Building." src="./UMass Amherst _ UMass Amherst_files/FY26_BeTheFuture-HERO_professor-with-students.jpg">
</div>
<div class="text-container">
<h3 class="ally-focus-within"> Find a Program </h3>
<div data-component-id="umass_base:description" class="f--description">
<p>With more than 100 majors, you have the freedom to explore your interests and build an academic path that reflects who you are and where you want to go.</p>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/academics/explore-our-programs" class="button-text-link button-context-dark " aria-label="Read more About Find a Program" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Read more </span>
</a>
</div>
</div>
</div>
</div>
<div class="cc--component-container cc--card-grid-card ">
<div class="c--component c--card-grid-card">
<div class="f--field f--image">
<img data-src="/sites/default/files/styles/16_9_320x180/public/2025-11/UMass%20Amherst%20Drone%20Campus.jpeg?h=c673cd1c&amp;itok=SB-3t1IF" class=" lazyloaded" alt="UMass Amherst Drone Campus" src="./UMass Amherst _ UMass Amherst_files/UMass Amherst Drone Campus.jpeg">
</div>
<div class="text-container">
<h3 class="ally-focus-within"> Design Your Own Major </h3>
<div data-component-id="umass_base:description" class="f--description">
<p>Through the Bachelors Degree with Individual Concentration (BDIC) Program, students can create a personalized major, blending courses across fields to explore passions beyond traditional academic boundaries.</p>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/umass-stories/design-your-own-major" class="button-text-link button-context-dark " aria-label="Read more About Design Your Own Major" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Read more </span>
</a>
</div>
</div>
</div>
</div>
<div class="cc--component-container cc--card-grid-card ">
<div class="c--component c--card-grid-card">
<div class="f--field f--image">
<img data-src="/sites/default/files/styles/16_9_320x180/public/2024-01/FY23-Study-abroad-LANDING-HERO-London-SA_0.jpg?h=854a7be2&amp;itok=KyMO_bgM" class=" lazyloaded" alt="UMass Amherst Study Abroad London" src="./UMass Amherst _ UMass Amherst_files/FY23-Study-abroad-LANDING-HERO-London-SA_0.jpg">
</div>
<div class="text-container">
<h3 class="ally-focus-within"> Study Abroad </h3>
<div data-component-id="umass_base:description" class="f--description">
<p>Global learning opportunities immerse students in new cultures, expanding their perspectives and preparing them to thrive in a connected world.</p>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/umass-stories/study-abroad-umass" class="button-text-link button-context-dark " aria-label="Read more About Study Abroad" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Read more </span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
@@ -0,0 +1,34 @@
<body>
<div data-component-id="umass_base:block-multiple-ctas" data-background="solid" data-link-style="buttons" data-layout-variant="default">
<div class="container">
<div class="text-container">
<div data-component-id="umass_base:section-title" class="f--section-title">
<h2>APPLY TODAY</h2>
</div>
</div>
<div class="links-container">
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/first-year-students" class="button-primary button-context-light " aria-label="First Year Apply to UMass Undergraduate" target="_self" data-component-id="umass_base:button">
<span class="button-text"> First Year </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/transfer-students" class="button-primary button-context-light " aria-label="Transfer Apply to UMass as as Transfer Student" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Transfer </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/undergraduate-admissions/apply/international-students" class="button-primary button-context-light " aria-label="International Apply to UMass Internationally" target="_self" data-component-id="umass_base:button">
<span class="button-text"> International </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/graduate/apply" class="button-primary button-context-light " aria-label="Graduate School Apply to UMass Graduate School" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Graduate School </span>
</a>
</div>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
@@ -0,0 +1,207 @@
<body>
<div data-component-id="umass_base:block-multiple-ctas" data-background="solid" data-color="gray" data-layout-variant="tabbed">
<div class="container">
<div class="text-container">
<div data-component-id="umass_base:section-title" class="f--section-title">
<h2>I'm Looking For...</h2>
</div>
</div>
<div class="links-container">
<div data-component-id="umass_base:tabbed-container" data-color="gray" data-once="tabbed-container">
<div class="tab-labels-container" role="tablist">
<div class="tab-labels-inner">
<a href="https://www.umass.edu/#tabbed-content-prospective-students" class="tab-label link-context-light" role="tab" aria-selected="true" aria-controls="tabbed-content-prospective-students">Prospective Students</a>
<a href="https://www.umass.edu/#tabbed-content-current-students" class="tab-label link-context-light" role="tab" aria-selected="false" aria-controls="tabbed-content-current-students">Current Students</a>
<a href="https://www.umass.edu/#tabbed-content-parents--families" class="tab-label link-context-light" role="tab" aria-selected="false" aria-controls="tabbed-content-parents--families">Parents &amp; Families</a>
<a href="https://www.umass.edu/#tabbed-content-faculty--staff" class="tab-label link-context-light" role="tab" aria-selected="false" aria-controls="tabbed-content-faculty--staff">Faculty &amp; Staff</a>
</div>
</div>
<div class="tab-content-container">
<div class="tab-content-panel is-active" id="tabbed-content-prospective-students" role="tabpanel" aria-live="polite">
<div class="tabbed-links-container">
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/undergraduate-admissions/visit" class="button-text-link button-context-light " aria-label="Visit Campus" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Visit Campus </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/undergraduate-admissions" class="button-text-link button-context-light " aria-label="Apply as a First-Year Student" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Apply as a First-Year Student </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/academics/explore-our-programs?field_level_of_study=36&amp;field_degree_type=All&amp;field_delivery=All&amp;field_area_of_interest=All&amp;field_school=All&amp;sort_by=title" class="button-text-link button-context-light " aria-label="Majors &amp; Minors" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Majors &amp; Minors </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/transfer-students" class="button-text-link button-context-light " aria-label="Apply as a Transfer Student" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Apply as a Transfer Student </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/graduate/apply" class="button-text-link button-context-light " aria-label="Apply as a Graduate Student" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Apply as a Graduate Student </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/important-dates-deadlines" class="button-text-link button-context-light " aria-label="Important Dates &amp; Deadlines" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Important Dates &amp; Deadlines </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/financialaid/undergraduate-costs" class="button-text-link button-context-light " aria-label="Tuition &amp; Costs" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Tuition &amp; Costs </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/financialaid/undergraduate" class="button-text-link button-context-light " aria-label="Financial Aid" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Financial Aid </span>
</a>
</div>
</div>
</div>
<div class="tab-content-panel" id="tabbed-content-current-students" role="tabpanel" aria-live="polite">
<div class="tabbed-links-container">
<div class="f--field f--button">
<a href="https://www.spire.umass.edu/" class="button-text-link button-context-light " aria-label="SPIRE" target="_self" data-component-id="umass_base:button">
<span class="button-text"> SPIRE </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/it/canvas" class="button-text-link button-context-light " aria-label="Canvas" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Canvas </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/registrar/academic-calendar" class="button-text-link button-context-light " aria-label="Academic Calendar" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Academic Calendar </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/financialaid/student-employment" class="button-text-link button-context-light " aria-label="Student Jobs" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Student Jobs </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/contact-us" class="button-text-link button-context-light " aria-label="Contact List" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Contact List </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/bursar/" class="button-text-link button-context-light " aria-label="Bursar&#39;s Office" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Bursar's Office </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/student-life/live-on-campus" class="button-text-link button-context-light " aria-label="Residential Life" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Residential Life </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/it/it-guide-students" class="button-text-link button-context-light " aria-label="Technology Support" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Technology Support </span>
</a>
</div>
</div>
</div>
<div class="tab-content-panel" id="tabbed-content-parents--families" role="tabpanel" aria-live="polite">
<div class="tabbed-links-container">
<div class="f--field f--button">
<a href="https://www.umass.edu/registrar/academic-calendar" class="button-text-link button-context-light " aria-label="Academic Calendar" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Academic Calendar </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/visit/visitor-info" class="button-text-link button-context-light " aria-label="Campus Maps" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Campus Maps </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://events.umass.edu/" class="button-text-link button-context-light " aria-label="Campus Events" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Campus Events </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/new-student/family-ready-u" class="button-text-link button-context-light " aria-label="New Families" target="_self" data-component-id="umass_base:button">
<span class="button-text"> New Families </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/new-student/family-programs" class="button-text-link button-context-light " aria-label="Family Programs" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Family Programs </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/contact-us" class="button-text-link button-context-light " aria-label="Contact List" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Contact List </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/bursar/" class="button-text-link button-context-light " aria-label="Bursar&#39;s Office" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Bursar's Office </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/financialaid/undergraduate" class="button-text-link button-context-light " aria-label="Financial Aid" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Financial Aid </span>
</a>
</div>
</div>
</div>
<div class="tab-content-panel" id="tabbed-content-faculty--staff" role="tabpanel" aria-live="polite">
<div class="tabbed-links-container">
<div class="f--field f--button">
<a href="https://www.spire.umass.edu/" class="button-text-link button-context-light " aria-label="SPIRE" target="_self" data-component-id="umass_base:button">
<span class="button-text"> SPIRE </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/it/canvas" class="button-text-link button-context-light " aria-label="Canvas" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Canvas </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/peoplefinder/" class="button-text-link button-context-light " aria-label="People Finder" target="_self" data-component-id="umass_base:button">
<span class="button-text"> People Finder </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/contact-us" class="button-text-link button-context-light " aria-label="Contact List" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Contact List </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://hr-direct.hcm.umasscs.net/psc/hcm/EMPLOYEE/HRMS/c/NUI_FRAMEWORK.PT_LANDINGPAGE.GBL" class="button-text-link button-context-light ext" aria-label="HR Direct" target="_self" data-component-id="umass_base:button" data-extlink="">
<span class="button-text"> HR Direct </span>
<svg focusable="false" width="1em" height="1em" class="ext" data-extlink-placement="append" aria-label="(link is external)" viewBox="0 0 80 40" role="img" aria-hidden="false">
<title>(link is external)</title>
<path d="M48 26c-1.1 0-2 0.9-2 2v26H10V18h26c1.1 0 2-0.9 2-2s-0.9-2-2-2H8c-1.1 0-2 0.9-2 2v40c0 1.1 0.9 2 2 2h40c1.1 0 2-0.9 2-2V28C50 26.9 49.1 26 48 26z"></path>
<path d="M56 6H44c-1.1 0-2 0.9-2 2s0.9 2 2 2h7.2L30.6 30.6c-0.8 0.8-0.8 2 0 2.8C31 33.8 31.5 34 32 34s1-0.2 1.4-0.6L54 12.8V20c0 1.1 0.9 2 2 2s2-0.9 2-2V8C58 6.9 57.1 6 56 6z"></path>
</svg>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/hr/" class="button-text-link button-context-light " aria-label="Human Resources" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Human Resources </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/hr/careers" class="button-text-link button-context-light " aria-label="Career Opportunities" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Career Opportunities </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/it/email" class="button-text-link button-context-light " aria-label="Email Support" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Email Support </span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
@@ -0,0 +1,6 @@
<body>
<div class="cc--component-container cc--spacer ">
<div class="c--component c--spacer"></div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
@@ -0,0 +1,337 @@
<body>
<div class="cc--component-container cc--news-events ">
<div class="c--component c--news-events">
<div class="news-events-section__header">
<h2 class="news-events-section__main-title"> NEWS &amp; EVENTS </h2>
<a class="news-events-section__cta news-events-section__cta--desktop" href="https://www.umass.edu/news/news-events"> More News &amp; Events </a>
</div>
<h3 class="section-title"> FEATURED ARTICLES </h3>
<div class="featured-grid">
<div class="featured-grid__item">
<article class="news-card news-card--featured">
<div class="news-card__image">
<div>
<img loading="lazy" src="./UMass Amherst _ UMass Amherst_files/NEWS-Operating Room Surgery viaAdobeStock.jpeg" width="1280" height="720" alt="Medical Team Performing Surgical Operation in Modern Operating Room">
</div>
</div>
<div class="news-card__content">
<div class="featured-grid__category">
<a href="https://www.umass.edu/taxonomy/term/811" hreflang="en">Research</a>
</div>
<h3 class="news-card__title">
<a href="https://www.umass.edu/news/article/scheduling-surgeons-umass-amherst-researchers-identify-factors-could-influence" rel="bookmark">
<span>Scheduling Surgeons: UMass Amherst Researchers Identify Factors That Could Influence Hospital Efficiency</span>
</a>
</h3>
<div class="news-card__date"> June 24, 2026 </div>
</div>
</article>
</div>
<div class="featured-grid__item">
<article class="news-card news-card--featured">
<div class="news-card__image">
<div>
<img loading="lazy" src="./UMass Amherst _ UMass Amherst_files/Yanfei Xu polymer figure.jpg" width="1280" height="720" alt="An illustration of THDBT (tetrahydroxy deoxybenzoin triazole) filler aggregates at the molecular level. In this “slow chaos” state, there are fewer vibrational pathways available for heat transport, resulting in lower thermal conductivity. Reproduced from Materials Horizons with permission from the Royal Society of Chemistry.">
</div>
</div>
<div class="news-card__content">
<div class="featured-grid__category">
<a href="https://www.umass.edu/taxonomy/term/811" hreflang="en">Research</a>
</div>
<h3 class="news-card__title">
<a href="https://www.umass.edu/news/article/umass-amherst-led-team-discovers-new-way-make-thermally-insulative-plastics" rel="bookmark">
<span>UMass Amherst-Led Team Discovers New Way to Make Thermally Insulative Plastics </span>
</a>
</h3>
<div class="news-card__date"> June 22, 2026 </div>
</div>
</article>
</div>
<div class="featured-grid__item">
<article class="news-card news-card--featured">
<div class="news-card__image">
<div>
<img loading="lazy" src="./UMass Amherst _ UMass Amherst_files/Anthropology Field School Dig-26.jpg" width="1280" height="720" alt="Students dig during UMass Amhersts Bioarchaeology and Forensic Anthropology Field School">
</div>
</div>
<div class="news-card__content">
<div class="featured-grid__category">
<a href="https://www.umass.edu/taxonomy/term/646" hreflang="en">Academics</a>
</div>
<h3 class="news-card__title">
<a href="https://www.umass.edu/news/article/umass-bioarchaeology-and-forensic-anthropology-field-school-gives-students-hands" rel="bookmark">
<span>UMass Bioarchaeology and Forensic Anthropology Field School Gives Students Hands-On Experience in Forensic Anthropology</span>
</a>
</h3>
<div class="news-card__date"> June 17, 2026 </div>
</div>
</article>
</div>
<div class="featured-grid__item">
<article class="news-card news-card--featured">
<div class="news-card__image">
<div>
<img loading="lazy" src="./UMass Amherst _ UMass Amherst_files/NEWS-deli slicer.jpg" width="1280" height="720" alt="A worker slicing deli meat">
</div>
</div>
<div class="news-card__content">
<div class="featured-grid__category">
<a href="https://www.umass.edu/taxonomy/term/811" hreflang="en">Research</a>
</div>
<h3 class="news-card__title">
<a href="https://www.umass.edu/news/article/hands-why-human-touch-can-create-food-safety-blind-spot" rel="bookmark">
<span>Hands Off: Why Human Touch Can Create a Food-Safety Blind Spot </span>
</a>
</h3>
<div class="news-card__date"> June 17, 2026 </div>
</div>
</article>
</div>
</div>
<div class="news-events-row">
<div class="news-column">
<h3 class="section-title--news"> LATEST NEWS </h3>
<div class="news-list">
<div class="news-list__item">
<article class="news-teaser">
<div class="news-teaser__image">
<div>
<img loading="lazy" src="./UMass Amherst _ UMass Amherst_files/UMass Police Chief Tyrone Parham, Max Callahan, Senator Comerford on MA Senate Rostrum_crop.jpg" width="2833" height="1769" alt="UMass Police Chief Tyrone Parham, Max Callahan and Senator Comerford stand at the Massachusetts Senate Rostrum">
</div>
</div>
<div class="news-teaser__content">
<div class="news-list__category">
<a href="https://www.umass.edu/taxonomy/term/1001" hreflang="en">University News</a>
</div>
<h3 class="news-teaser__title">
<a href="https://www.umass.edu/news/article/umass-amherst-supported-effort-help-drivers-autism-interact-police-becomes-law" rel="bookmark">
<span>UMass Amherst-Supported Effort to Help Drivers with Autism Interact with Police Becomes Law </span>
</a>
</h3>
<div class="news-teaser__summary">
<div>
<p>A new law signed by Gov. Maura Healey aimed at helping people with autism during interactions with police has roots on the UMass Amherst campus. The so-called “Blue Envelope Bill” sets up a voluntary program where drivers or passengers can provide information helpful to law enforcement during traffic stops or other encounters.&nbsp;</p>
</div>
</div>
</div>
</article>
</div>
<div class="news-list__item">
<article class="news-teaser">
<div class="news-teaser__image">
<div>
<img loading="lazy" src="./UMass Amherst _ UMass Amherst_files/Giuliano Roberts Eye-Tracking IV Pumps Photo 2.jpg" width="4528" height="3016" alt="A student (left) wears eye-tracking glasses as doctoral student Seonhun Lee holds a laptop showing information about the study completed using the technology.">
</div>
</div>
<div class="news-teaser__content">
<div class="news-list__category">
<a href="https://www.umass.edu/taxonomy/term/811" hreflang="en">Research</a>
</div>
<h3 class="news-teaser__title">
<a href="https://www.umass.edu/news/article/eye-tracking-technology-helps-researchers-see-iv-pump-safety-through-student-nurses" rel="bookmark">
<span>Eye-Tracking Technology Helps Researchers See IV Pump Safety Through Student Nurses Eyes</span>
</a>
</h3>
<div class="news-teaser__summary">
<div>
<p>The approach, detailed in a study published in the June 2026 issue of Advancing Medical-Surgical Nursing, marks the first known use of eye-tracking technology to evaluate IV smart pumps.</p>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="events-column">
<h3 class="events-title"> Events </h3>
<div class="events-widget">
<script type="text/javascript" src="./UMass Amherst _ UMass Amherst_files/view"></script>
<style>
/* ========================================== CAMPUS EVENTS ========================================== */
.campus-events-widget {
background: transparent;
padding: 0;
font-family: inherit;
}
.campus-events-widget .events-list {
list-style: none;
margin: 0;
padding: 0;
}
/* ========================================== DESKTOP LIST LAYOUT ========================================== */
.campus-events-widget .teaser-item {
padding: 20px 0;
border-bottom: 1px solid #e5e5e5;
}
.campus-events-widget .teaser-item:last-child {
border-bottom: none;
}
.campus-events-widget .event-wrapper {
display: flex;
gap: 20px;
align-items: flex-start;
}
/* ===================================== DATE BLOCK ===================================== */
.campus-events-widget .event-date {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.125rem;
padding: 0.25rem;
background: #881C1C;
width: 2.875rem;
height: 3.125rem;
box-sizing: border-box;
}
.campus-events-widget .event-date__month {
font-size: 1rem;
font-weight: 800;
line-height: 1.25rem;
text-transform: uppercase;
text-align: center;
color: #fff;
}
.campus-events-widget .event-date__day {
font-size: 1rem;
font-weight: 800;
line-height: 1.25rem;
text-transform: uppercase;
text-align: center;
color: #fff;
}
/* ===================================== EVENT DETAILS ===================================== */
.campus-events-widget .event-details {
flex: 1;
position: relative;
}
/* Title */
.campus-events-widget .event-title {
font-size: 1rem;
font-weight: 800;
line-height: 1.25rem;
text-transform: uppercase;
color: #000;
position: relative;
margin: 0 0 0.375rem;
padding-right: 1.25rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.campus-events-widget .event-title a {
color: #222;
text-decoration: none;
}
.campus-events-widget .event-title a:hover {
color: #881c1c;
}
/* Chevron */
.campus-events-widget .event-title::after {
content: "";
position: absolute;
right: 0;
top: 0.2rem;
width: 0.3125rem;
height: 0.6875rem;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-image: url("data:image/svg+xml,%3Csvg width='5' height='11' viewBox='0 0 5 11' fill='none'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd'clip-rule='evenodd'd='M4.57143 5.14286L0 0V10.2857L4.57143 5.14286Z'fill='%23881C1C'/%3E%3C/svg%3E"); } /* Time */ .campus-events-widget .event-time { font-size: 16px; color: #000; margin-bottom: 4px; } /* Location */ .campus-events-widget .event-location { font-size: 1rem; font-weight: 400; line-height: 1.5rem; font-style: normal; color: #000; } /* Hide summaries */ .campus-events-widget .summary, .campus-events-widget .event-description { display: none !important; } /* ========================================== MOBILE CARD DESIGN ========================================== */ @media (max-width: 768px) { .campus-events-widget .event-title { font-size: 0.75rem; } .campus-events-widget .event-time { font-size: 0.75rem; } .campus-events-widget .event-location { font-size: 0.75rem; } .campus-events-widget .event-wrapper { display: flex; flex: 1; padding-right: 10px; align-items: stretch; gap: 12px; border: 1px solid #CCC; } .campus-events-widget .event-date { display: flex; padding: 4px 8px; flex-direction: column; justify-content: center; align-items: center; align-self: stretch; background: #881C1C; min-width: 48px; height: auto; } .campus-events-widget .event-details { padding: 8px 10px 8px 0; } .campus-events-widget .teaser-item { flex: 0 0 279px; display: flex; border: 0px solid #CCC; padding-bottom: 0; } .campus-events-widget .events-list { display: flex; gap: 1rem; } .campus-events-widget .events-list::before, .campus-events-widget .events-list::after { content: ""; flex: 0 0 8.333%; } } /* ========================================== SMALL MOBILE ADJUSTMENTS ========================================== */ @media (max-width: 480px) { .campus-events-widget .event-wrapper { gap: 10px; } .campus-events-widget .event-date__day { font-size: 18px; } }
</style>
<div id="lw" class="campus-events-widget">
<div class="events-list">
<div class="teaser-item">
<div class="event-wrapper">
<!-- DATE BLOCK -->
<div class="event-date">
<div class="event-date__month"> JUL </div>
<div class="event-date__day"> 07 </div>
</div>
<!-- DETAILS -->
<div class="event-details">
<div class="event-title">
<a href="https://events.umass.edu/event/hr-is-here-for-you-5678?utm_campaign=widget&amp;utm_medium=widget&amp;utm_source=UMass+Amherst+Events+Calendar"> HR is Here for You </a>
</div>
<div class="event-time"> 10:00 am 4:00 pm </div>
<div class="event-location"> UMass Downtown </div>
</div>
</div>
</div>
<div class="teaser-item">
<div class="event-wrapper">
<!-- DATE BLOCK -->
<div class="event-date">
<div class="event-date__month"> JUL </div>
<div class="event-date__day"> 07 </div>
</div>
<!-- DETAILS -->
<div class="event-details">
<div class="event-title">
<a href="https://events.umass.edu/event/ms-in-accounting-virtual-information-session-1380?utm_campaign=widget&amp;utm_medium=widget&amp;utm_source=UMass+Amherst+Events+Calendar"> MS in Accounting Virtual Information Session </a>
</div>
<div class="event-time"> 12:00 pm 1:00 pm </div>
<div class="event-location"></div>
</div>
</div>
</div>
<div class="teaser-item">
<div class="event-wrapper">
<!-- DATE BLOCK -->
<div class="event-date">
<div class="event-date__month"> JUL </div>
<div class="event-date__day"> 07 </div>
</div>
<!-- DETAILS -->
<div class="event-details">
<div class="event-title">
<a href="https://events.umass.edu/event/thrive-at-five-summer-yoga-and-mindfulness-series?utm_campaign=widget&amp;utm_medium=widget&amp;utm_source=UMass+Amherst+Events+Calendar"> Thrive at Five - Summer Yoga and Mindfulness Series </a>
</div>
<div class="event-time"> 5:00 pm 6:00 pm </div>
<div class="event-location"> Orchard Hill Pavilion </div>
</div>
</div>
</div>
<div class="teaser-item">
<div class="event-wrapper">
<!-- DATE BLOCK -->
<div class="event-date">
<div class="event-date__month"> JUL </div>
<div class="event-date__day"> 08 </div>
</div>
<!-- DETAILS -->
<div class="event-details">
<div class="event-title">
<a href="https://events.umass.edu/event/online-or-hybrid-ms-in-cs-virtual-info-session-6202?utm_campaign=widget&amp;utm_medium=widget&amp;utm_source=UMass+Amherst+Events+Calendar"> Online or Hybrid MS in CS: Virtual Info Session </a>
</div>
<div class="event-time"> 10:00 am 11:00 am </div>
<div class="event-location"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="news-events-section__footer">
<a class="news-events-section__cta news-events-section__cta--mobile" href="https://www.umass.edu/news/news-events"> More News &amp; Events </a>
</div>
</div>
</div>
</body>
<style>* { box-sizing: border-box; } body {margin: 0;}</style>
@@ -0,0 +1,111 @@
<body>
<div class="content-top">
<div class="lc--layout-container lc--full">
<div class="l--layout l--full">
<div class="lr--layout-region lr--main">
<div class="cc--component-container cc--homepage-hero">
<div class="c--component c--homepage-hero">
<div class="slides-container">
<div class="image-video-container has-video">
<img src="https://www.umass.edu/sites/default/files/styles/1_1_1920x1920/public/2025-09/250616_UMASS_4515.jpg" alt="Students collaborate using a driving simulator in the UMass Center for Transportation." srcset="https://www.umass.edu/sites/default/files/styles/1_1_1920x1920/public/2025-09/250616_UMASS_4515.jpg?h=9855f42d&amp;itok=d27r8GaT 1920w" />
<div class="f--ambient-video">
<video allowfullscreen="allowfullscreen" role="presentation" tabindex="-1" loop autoplay playsinline="" muted controls>
<source src="https://api-files.sproutvideo.com/file/aa9ad8b61e11ebc420/de09e4945c49091f/1080.mp4" type="video/mp4" />
</video>
</div>
<div data-once="ambientVideo" class="video-controls">
<div class="video-controls-inner">
<button aria-labelledby="pauseBtn" class="video-button video-pause-button">
<svg height="14" viewBox="0 0 10 14" width="10" xmlns="http://www.w3.org/2000/svg">
<title id="pauseBtn">Pause Background Video</title>
<path d="m1143 711v14h-3v-14zm7 0v14h-3v-14z" fill="#fff" fill-rule="evenodd" transform="translate(-1140 -711)"></path>
</svg>
</button>
<button aria-labelledby="playBtn" class="video-button video-play-button">
<svg height="29" viewBox="0 0 29 29" width="29" xmlns="http://www.w3.org/2000/svg">
<title id="playBtn">Play Background Video</title>
<path d="m17.5 3c-7.99789474 0-14.5 6.50210526-14.5 14.5 0 7.9978947 6.50210526 14.5 14.5 14.5 7.9978947 0 14.5-6.5021053 14.5-14.5 0-7.99789474-6.5021053-14.5-14.5-14.5zm5.6763936 15.2939067-7.3503366 4.5939604c-.6635721.408352-1.5313202-.051044-1.5313202-.8422261v-9.1879207c0-.7911821.8677481-1.2761001 1.5313202-.8422261l7.3503366 4.5939604c.612528.38283.612528 1.3016221 0 1.6844521z" fill="#fff" fill-rule="evenodd" transform="translate(-3 -3)"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="text-container centered">
<div class="slide-text-container-inner">
<h3>
<a href="https://www.umass.edu/gateway/why-umass">Be the Future You Want to See.</a>
</h3>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/why-umass" aria-label="Learn More Learn more about UMass Amherst." data-component-id="umass_base:button" class="button-secondary button-context-dark">
<span class="button-text"> Learn More </span>
</a>
</div>
<nav class="mc--menu mc--info-menu">
<ul class="menu m--menu m--info-menu">
<li class="menu-item menu-item--expanded">
<details class="utility-button-wrapper mc--info-menu-container">
<summary type="button" aria-label="Display submenu for Information menu" aria-expanded="false" aria-haspopup="true" class="utility-button arrow-toggle information-for-toggle"> Info For <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve" width="16" height="7" class="arrow">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" points="7,7 0,0 16,0 "></polygon>
</svg>
</summary>
<div class="submenu-wrapper">
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/prospective-students">Prospective Students</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/current-students">Current Students</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/parents-and-families">Parents &amp; Family</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/faculty-and-staff">Faculty &amp; Staff</a>
</li>
<li class="menu-item">
<a href="https://www.umassalumni.com/">Alumni</a>
</li>
</ul>
</div>
</details>
<div class="submenu-wrapper-desktop">
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/prospective-students">Prospective Students</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/current-students">Current Students</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/parents-and-families">Parents &amp; Family</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/faculty-and-staff">Faculty &amp; Staff</a>
</li>
<li class="menu-item">
<a href="https://www.umassalumni.com/">Alumni</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
</style>
View File
+1
View File
@@ -0,0 +1 @@
<nav class="hidden h-[77px] xl:flex"><ul class="flex h-full items-center xl:space-x-[26px] space-x-4"><li class="h-full group flex-shrink-0"><a class="flex flex-shrink-0 title-2 text-primary-600 h-full items-center gap-2 duration-150 ease-in-out underline-offset-4 " href="https://bvdaihoc.com.vn/gioi-thieu-tong-quan"><span >Về Bệnh viện</span><svg width="10" height="5" viewbox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2 w-2 duration-150 ease-in-out text-gray-300 group-hover:-rotate-180"><path d="M0.759766 0.5L4.68906 4.42929C4.72811 4.46834 4.79142 4.46834 4.83048 4.42929L8.75977 0.5" stroke="currentColor" stroke-linecap="round"></path></svg></a></li><li class="h-full group flex-shrink-0"><a class="flex flex-shrink-0 title-2 text-primary-600 h-full items-center gap-2 duration-150 ease-in-out underline-offset-4 " href="https://bvdaihoc.com.vn/chuyen-khoa"><span >Chuyên khoa</span></a></li><li class="h-full group flex-shrink-0"><a class="flex flex-shrink-0 title-2 text-primary-600 h-full items-center gap-2 duration-150 ease-in-out underline-offset-4 " href="https://bvdaihoc.com.vn/bac-si"><span >Bác sĩ</span></a></li><li class="h-full group flex-shrink-0"><a class="flex flex-shrink-0 title-2 text-primary-600 h-full items-center gap-2 duration-150 ease-in-out underline-offset-4 " href="https://bvdaihoc.com.vn/dich-vu"><span >Dịch vụ</span><svg width="10" height="5" viewbox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2 w-2 duration-150 ease-in-out text-gray-300 group-hover:-rotate-180"><path d="M0.759766 0.5L4.68906 4.42929C4.72811 4.46834 4.79142 4.46834 4.83048 4.42929L8.75977 0.5" stroke="currentColor" stroke-linecap="round"></path></svg></a></li><li class="h-full group flex-shrink-0"><a class="flex flex-shrink-0 title-2 text-primary-600 h-full items-center gap-2 duration-150 ease-in-out underline-offset-4 " href="https://bvdaihoc.com.vn/thu-vien-suc-khoe"><span >Thư viện sức khỏe</span></a></li><li class="h-full group flex-shrink-0"><a class="flex flex-shrink-0 title-2 text-primary-600 h-full items-center gap-2 duration-150 ease-in-out underline-offset-4 " href="https://bvdaihoc.com.vn/tin-tuc-va-su-kien"><span >Tin tức & Sự kiện</span><svg width="10" height="5" viewbox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2 w-2 duration-150 ease-in-out text-gray-300 group-hover:-rotate-180"><path d="M0.759766 0.5L4.68906 4.42929C4.72811 4.46834 4.79142 4.46834 4.83048 4.42929L8.75977 0.5" stroke="currentColor" stroke-linecap="round"></path></svg></a></li><li class="h-full group flex-shrink-0"><button class="flex flex-shrink-0 title-2 text-primary-600 h-full items-center gap-2 duration-150 ease-in-out underline-offset-4 cursor-pointer "><span >Hỗ trợ người bệnh</span><svg width="10" height="5" viewbox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2 w-2 duration-150 ease-in-out text-gray-300 group-hover:-rotate-180"><path d="M0.759766 0.5L4.68906 4.42929C4.72811 4.46834 4.79142 4.46834 4.83048 4.42929L8.75977 0.5" stroke="currentColor" stroke-linecap="round"></path></svg></button></li></ul></nav>
@@ -48,7 +48,7 @@ public class ManageMenuController {
}
@PostMapping("/{id}/items/add")
public String addMenuItem(@PathVariable Long id, @RequestParam String label, @RequestParam String url, RedirectAttributes redirectAttributes) {
public String addMenuItem(@PathVariable Long id, @RequestParam String label, @RequestParam String url, @RequestParam(required = false) Long parentId, RedirectAttributes redirectAttributes) {
Menu menu = menuService.findById(id).orElseThrow(() -> new IllegalArgumentException("Invalid menu Id"));
MenuItem item = new MenuItem();
item.setLabel(label);
@@ -56,6 +56,14 @@ public class ManageMenuController {
item.setMenu(menu);
item.setDisplayOrder(menu.getItems().size());
if (parentId != null) {
MenuItem parentItem = menu.getItems().stream()
.filter(i -> i.getId().equals(parentId))
.findFirst()
.orElse(null);
item.setParent(parentItem);
}
menu.getItems().add(item);
menuService.save(menu);
@@ -69,4 +77,14 @@ public class ManageMenuController {
redirectAttributes.addFlashAttribute("successMessage", "Menu deleted successfully.");
return "redirect:/manage/menus";
}
@PostMapping("/{id}/update")
public String updateMenu(@PathVariable Long id, @RequestParam String name, @RequestParam(required = false) String location, RedirectAttributes redirectAttributes) {
Menu menu = menuService.findById(id).orElseThrow(() -> new IllegalArgumentException("Invalid menu Id"));
menu.setName(name);
menu.setLocation(location);
menuService.save(menu);
redirectAttributes.addFlashAttribute("successMessage", "Menu properties updated successfully.");
return "redirect:/manage/menus/" + id + "/edit";
}
}
@@ -39,6 +39,10 @@ public class MenuItem extends AbstractAuditingEntity<Long> {
@JoinColumn(name = "parent_id")
private MenuItem parent;
@OneToMany(mappedBy = "parent", cascade = CascadeType.ALL, orphanRemoval = true)
@OrderBy("displayOrder ASC")
private java.util.Set<MenuItem> children = new java.util.LinkedHashSet<>();
@Column(name = "display_order")
private Integer displayOrder = 0;
@@ -83,6 +87,14 @@ public class MenuItem extends AbstractAuditingEntity<Long> {
this.parent = parent;
}
public java.util.Set<MenuItem> getChildren() {
return children;
}
public void setChildren(java.util.Set<MenuItem> children) {
this.children = children;
}
public Integer getDisplayOrder() {
return displayOrder;
}
@@ -11,5 +11,14 @@ import java.util.Optional;
*/
@Repository
public interface MenuRepository extends JpaRepository<Menu, Long> {
@Override
@org.springframework.data.jpa.repository.EntityGraph(attributePaths = {"items", "items.children"})
Optional<Menu> findById(Long id);
@Override
@org.springframework.data.jpa.repository.EntityGraph(attributePaths = {"items", "items.children"})
java.util.List<Menu> findAll();
@org.springframework.data.jpa.repository.EntityGraph(attributePaths = {"items", "items.children"})
Optional<Menu> findByLocation(String location);
}
@@ -40,4 +40,14 @@ public class MenuService {
public void deleteById(Long id) {
menuRepository.deleteById(id);
}
@jakarta.annotation.PostConstruct
public void fixPrimaryMenuLocation() {
for (Menu menu : menuRepository.findAll()) {
if ("primaryMenu".equals(menu.getName()) && (menu.getLocation() == null || "Unassigned".equals(menu.getLocation()) || menu.getLocation().trim().isEmpty())) {
menu.setLocation("PRIMARY");
menuRepository.save(menu);
}
}
}
}
@@ -17,773 +17,14 @@
<div id="mobile-flyout-container">
<div class="primary-navigation">
<nav class="mc--menu mc--main-menu">
<nav class="mc--menu mc--main-menu" th:if="${primaryMenu != null}">
<ul class="menu m--menu m--main-menu">
<li class="megamenu menu-item menu-item--expanded">
<li class="megamenu menu-item" th:each="item : ${primaryMenu.items}">
<div class="link-arrow-wrapper">
<a href="https://www.umass.edu/gateway/academics"
data-drupal-link-system-path="node/11">Academics</a>
<button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true"
aria-label="Display Sub Menu for Academics" data-once="site-header-arrow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve"
width="16" height="7">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c"
d="M7.88,7L15.75,0H0s7.88,7,7.88,7Z"></path>
</svg>
</button>
<a th:href="${item.url}" th:text="${item.label}">Menu Item</a>
</div>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve"
width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 ">
</polygon>
</svg>
Back
</button>
<span class="navigation-title">Academics</span>
<ul class="submenu">
<li class="menu-item menu-item--expanded">
<span>Get Your Degree</span>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10"
enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 ">
</polygon>
</svg>
Back
</button>
<span class="navigation-title">Get Your Degree</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/undergraduate"
data-drupal-link-system-path="node/106">Undergraduate</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/bdic/">Design Your Own Major</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/graduate"
data-drupal-link-system-path="node/111">Graduate</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/accelerated-masters-4plus1-degree"
data-drupal-link-system-path="node/42816">Accelerated Master's</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/schools-colleges"
data-drupal-link-system-path="node/596">Schools &amp; Colleges</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/bachelors-degree-completion-online"
title="Complete your bachelor&#39;s degree fully online at UMass Amherst."
data-drupal-link-system-path="node/84461">Bachelors Degree Completion</a>
</li>
</ul>
</div>
</li>
<li class="menu-item menu-item--expanded">
<span>Ways to Learn</span>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10"
enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 ">
</polygon>
</svg>
Back
</button>
<span class="navigation-title">Ways to Learn</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/explore-our-campuses"
data-drupal-link-system-path="node/84076">Our Campuses</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/summer-winter-sessions"
data-drupal-link-system-path="node/83931">Summer &amp; Winter Sessions</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/study-abroad"
data-drupal-link-system-path="node/84116">Study Abroad</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/first-year-launch-programs"
data-drupal-link-system-path="node/83936">First-Year Launch Programs</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/lifelong/">Pre-College &amp; Lifelong Learning</a>
</li>
</ul>
</div>
</li>
<li class="menu-item menu-item--expanded">
<span>Resources</span>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10"
enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 ">
</polygon>
</svg>
Back
</button>
<span class="navigation-title">Resources</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/university-libraries"
data-drupal-link-system-path="node/616">University Libraries</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/academic-advising"
data-drupal-link-system-path="node/26366">Academic Advising</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/careers/">Career &amp; Internship Services</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/explore-our-programs"
data-drupal-link-system-path="node/251">Explore Our Programs</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-item menu-item--expanded">
<div class="link-arrow-wrapper">
<a href="https://www.umass.edu/admissions" data-drupal-link-system-path="node/36">Admissions &amp;
Aid</a>
<button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true"
aria-label="Display Sub Menu for Admissions &amp; Aid" data-once="site-header-arrow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve"
width="16" height="7">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c"
d="M7.88,7L15.75,0H0s7.88,7,7.88,7Z"></path>
</svg>
</button>
</div>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve"
width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 ">
</polygon>
</svg>
Back
</button>
<span class="navigation-title">Admissions &amp; Aid</span>
<ul class="submenu">
<li class="menu-item menu-item--expanded">
<a href="https://www.umass.edu/admissions/undergraduate-admissions"
data-drupal-link-system-path="node/266">Undergraduate Admissions</a>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10"
enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 ">
</polygon>
</svg>
Back
</button>
<span class="navigation-title">Undergraduate Admissions</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/admissions/undergraduate-admissions"
data-drupal-link-system-path="node/266">Home</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/admissions/explore"
data-drupal-link-system-path="node/626">Explore</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/admissions/visit"
data-drupal-link-system-path="node/1366">Visit</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/admissions/apply"
data-drupal-link-system-path="node/271">Apply</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/admissions/undergraduate-admissions/costs-aid"
data-drupal-link-system-path="node/2651">Costs &amp; Aid</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/admissions/connect"
data-drupal-link-system-path="node/656">Connect</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/admissions/admitted-students"
data-drupal-link-system-path="node/1601">Admitted Students</a>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/graduate/apply">Graduate Admissions</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/universityplus/admissions">Undergraduate Online Admissions</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/uww/pre-college">Pre-College Admissions</a>
</li>
<li class="menu-item menu-item--expanded">
<a href="https://www.umass.edu/financialaid" data-drupal-link-system-path="node/781">Financial
Aid</a>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10"
enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 ">
</polygon>
</svg>
Back
</button>
<span class="navigation-title">Financial Aid</span>
<ul class="submenu">
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/financialaid/financial-aid-services"
data-drupal-link-system-path="node/856">Financial Aid Services</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/financialaid/undergraduate"
data-drupal-link-system-path="node/786">Undergraduate</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/financialaid/graduate"
data-drupal-link-system-path="node/19936">Graduate</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/financialaid/non-degree-seeking-students"
data-drupal-link-system-path="node/20531">Non-Degree</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/financialaid/university"
data-drupal-link-system-path="node/991">University+</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/financialaid/student-employment"
data-drupal-link-system-path="node/1056">Student Employment</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-item menu-item--expanded">
<div class="link-arrow-wrapper">
<a href="https://www.umass.edu/gateway/campus-life" data-drupal-link-system-path="node/16">Campus
Life</a>
<button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true"
aria-label="Display Sub Menu for Campus Life" data-once="site-header-arrow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve"
width="16" height="7">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c"
d="M7.88,7L15.75,0H0s7.88,7,7.88,7Z"></path>
</svg>
</button>
</div>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve"
width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 ">
</polygon>
</svg>
Back
</button>
<span class="navigation-title">Campus Life</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/campus-life/living-and-dining"
data-drupal-link-system-path="node/3666">Living and Dining</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/campus-life/student-activities"
data-drupal-link-system-path="node/3676">Student Activities</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/campus-life/student-support-and-wellness"
data-drupal-link-system-path="node/3681">Student Support and Wellness</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/campus-life/life-amherst"
data-drupal-link-system-path="node/3661">Life in Amherst</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/arts-culture"
data-drupal-link-system-path="node/84101">Arts &amp; Culture</a>
</li>
</ul>
</div>
</li>
<li class="menu-item menu-item--expanded">
<div class="link-arrow-wrapper">
<a href="https://www.umass.edu/gateway/why-umass" data-drupal-link-system-path="node/82851">Why
UMass?</a>
<button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true"
aria-label="Display Sub Menu for Why UMass?" data-once="site-header-arrow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve"
width="16" height="7">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c"
d="M7.88,7L15.75,0H0s7.88,7,7.88,7Z"></path>
</svg>
</button>
</div>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve"
width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 ">
</polygon>
</svg>
Back
</button>
<span class="navigation-title">Why UMass?</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/why-umass/discover-ideas"
data-drupal-link-system-path="node/83286">Discover Ideas</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/why-umass/choose-your-path"
data-drupal-link-system-path="node/83471">Choose Your Path</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/why-umass/find-your-purpose"
data-drupal-link-system-path="node/83511">Find Your Purpose</a>
</li>
<li class="menu-item menu-item--expanded">
<a href="https://www.umass.edu/gateway/why-umass/world-class-public-research-university"
data-drupal-link-system-path="node/3716">About UMass Amherst</a>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10"
enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 ">
</polygon>
</svg>
Back
</button>
<span class="navigation-title">About UMass Amherst</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/umass-edge/about-umass-amherst/umass-history"
data-drupal-link-system-path="node/3721">UMass History</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/why-umass/about-umass-amherst/umass-amherst-numbers"
data-drupal-link-system-path="node/74316">UMass Amherst By the Numbers</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/chancellor/">Office of the Chancellor</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/umass-edge/about-umass-amherst/mascot/sam-minuteman"
data-drupal-link-system-path="node/21126">Sam the Minuteman</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/umass-stories"
data-drupal-link-system-path="node/55696">UMass Amherst Stories</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-item menu-item--expanded">
<div class="link-arrow-wrapper">
<a href="https://www.umass.edu/gateway/research"
data-drupal-link-system-path="node/79406">Research</a>
<button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true"
aria-label="Display Sub Menu for Research" data-once="site-header-arrow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve"
width="16" height="7">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c"
d="M7.88,7L15.75,0H0s7.88,7,7.88,7Z"></path>
</svg>
</button>
</div>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve"
width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 ">
</polygon>
</svg>
Back
</button>
<span class="navigation-title">Research</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/research/student-research"
data-drupal-link-system-path="node/606">Student Research</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/research/faculty-excellence"
data-drupal-link-system-path="node/19971">Faculty Excellence</a>
</li>
<li class="menu-item menu-item--expanded">
<a href="https://www.umass.edu/gateway/research/innovation-impact"
data-drupal-link-system-path="node/601">Innovation &amp; Impact</a>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10"
enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 ">
</polygon>
</svg>
Back
</button>
<span class="navigation-title">Innovation &amp; Impact</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/research/stories"
data-drupal-link-system-path="node/35236">Research News &amp; Stories</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/research/timeline"
data-drupal-link-system-path="gateway/research/timeline">Timeline of Research
Breakthroughs</a>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/research/centers-and-institutes"
data-drupal-link-system-path="node/611">Centers and Institutes</a>
</li>
</ul>
</div>
</li>
<li class="menu-item menu-item--expanded">
<div class="link-arrow-wrapper">
<a href="https://www.umass.edu/news/news-events" data-drupal-link-system-path="node/31">News &amp;
Events</a>
<button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true"
aria-label="Display Sub Menu for News &amp; Events" data-once="site-header-arrow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve"
width="16" height="7">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c"
d="M7.88,7L15.75,0H0s7.88,7,7.88,7Z"></path>
</svg>
</button>
</div>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve"
width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 ">
</polygon>
</svg>
Back
</button>
<span class="navigation-title">News &amp; Events</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/news-headlines"
data-drupal-link-system-path="node/79501">News Headlines</a>
</li>
<li class="menu-item">
<a href="https://events.umass.edu/">Events</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/experts-umass"
data-drupal-link-system-path="node/971">Experts at UMass</a>
</li>
<li class="menu-item menu-item--expanded">
<a href="https://www.umass.edu/news/federal-actions"
data-drupal-link-system-path="node/75351">Federal Actions</a>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10"
enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 ">
</polygon>
</svg>
Back
</button>
<span class="navigation-title">Federal Actions</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/news/federal-actions/all-updates"
data-drupal-link-system-path="node/76176">View All Federal Actions Updates</a>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/olympia-drive-fire-response"
data-drupal-link-system-path="node/81266">Olympia Drive Fire Response</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/chancellor/">Office of Chancellor Javier Reyes</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/institutional-effectiveness/strategic-plan">Strategic Plan
20242034</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/news-office-frequently-asked-questions"
data-drupal-link-system-path="node/21221">Frequently Asked Questions</a>
</li>
<li class="menu-item menu-item--expanded">
<a href="https://www.umass.edu/news/news-events/inside-umass"
data-drupal-link-system-path="node/21016">Inside UMass</a>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10"
enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 ">
</polygon>
</svg>
Back
</button>
<span class="navigation-title">Inside UMass</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/inside-umass/submit-inside-umass-procedures-and-guidelines"
data-drupal-link-system-path="node/26211">Submit to Inside UMass</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/news-headlines">View Most Recent News
Headlines</a>
</li>
<li class="menu-item">
<a
href="https://subscribe.umass.edu/subscriptioncenter/manageList/subscribeFromLink?channel_id=a2w6S000007eAfOQAU">Subscribe
to Inside UMass</a>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/hometown-news-requests"
data-drupal-link-system-path="node/21091">Hometown News Requests</a>
</li>
<li class="menu-item">
<a
href="https://www.umass.edu/university-relations/toolkit/social-media/social-media-directory">Social
Media Directory</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/video-services"
data-drupal-link-system-path="node/20596">Video Services</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/job-opportunities-students"
data-drupal-link-system-path="node/20546">Job Opportunities for Students</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/contact-us"
data-drupal-link-system-path="node/3751">Contact Us</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
@@ -21,6 +21,30 @@
<div class="row">
<!-- Add Item Form -->
<div class="col-lg-4">
<!-- Edit Menu Details -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Edit Menu Properties</h6>
</div>
<div class="card-body">
<form th:action="@{/manage/menus/{id}/update(id=${menu.id})}" method="post">
<div class="form-group">
<label for="name">Menu Name</label>
<input type="text" class="form-control" id="name" name="name" th:value="${menu.name}" required>
</div>
<div class="form-group">
<label for="location">Location</label>
<select class="form-control" id="location" name="location">
<option value="" th:selected="${menu.location == null || menu.location == '' || menu.location == 'Unassigned'}">Unassigned</option>
<option value="PRIMARY" th:selected="${menu.location == 'PRIMARY'}">Primary Navigation</option>
<option value="FOOTER" th:selected="${menu.location == 'FOOTER'}">Footer Navigation</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Save Properties</button>
</form>
</div>
</div>
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Add Custom Link</h6>
@@ -35,6 +59,13 @@
<label for="url">URL</label>
<input type="text" class="form-control" id="url" name="url" placeholder="e.g. /" required>
</div>
<div class="form-group">
<label for="parentId">Parent Item (Optional)</label>
<select class="form-control" id="parentId" name="parentId">
<option value="">-- None (Top Level) --</option>
<option th:each="parentItem : ${menu.items}" th:if="${parentItem.parent == null}" th:value="${parentItem.id}" th:text="${parentItem.label}"></option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Add to Menu</button>
</form>
</div>
@@ -49,16 +80,18 @@
</div>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center" th:each="item : ${menu.items}">
<li class="list-group-item d-flex justify-content-between align-items-center" th:each="item : ${menu.items}" th:style="${item.parent != null ? 'margin-left: 2rem; border-left: 4px solid #4e73df;' : ''}">
<div>
<strong th:text="${item.label}">Link Text</strong><br>
<strong th:text="${item.label}">Link Text</strong>
<span class="badge badge-secondary ml-2" th:if="${item.parent != null}" th:text="'Child of: ' + ${item.parent.label}">Child</span>
<br>
<small class="text-muted" th:text="${item.url}">URL</small>
</div>
<!-- Future enhancement: reorder buttons and delete button -->
<span class="badge badge-primary badge-pill" th:text="'Order: ' + ${item.displayOrder}">0</span>
</li>
</ul>
<div th:if="${menu.items.empty}" class="alert alert-info mt-3">
<div th:if="${#lists.isEmpty(menu.items)}" class="alert alert-info mt-3">
No items in this menu yet.
</div>
</div>
@@ -61,8 +61,8 @@
<tbody>
<tr th:each="menu : ${menus}">
<td th:text="${menu.name}">Menu Name</td>
<td th:text="${menu.location ?: 'Unassigned'}">Location</td>
<td th:text="${menu.items.size()}">0</td>
<td th:text="${menu.location != null ? menu.location : 'Unassigned'}">Location</td>
<td th:text="${#lists.size(menu.items)}">0</td>
<td>
<a th:href="@{/manage/menus/{id}/edit(id=${menu.id})}" class="btn btn-sm btn-info">Edit Items</a>
<form th:action="@{/manage/menus/{id}/delete(id=${menu.id})}" method="post" style="display:inline;">
@@ -70,7 +70,7 @@
</form>
</td>
</tr>
<tr th:if="${menus.empty}">
<tr th:if="${#lists.isEmpty(menus)}">
<td colspan="4" class="text-center">No menus found.</td>
</tr>
</tbody>
@@ -7,6 +7,200 @@
left: 0;
z-index: 102;
}
/* --- CUSTOM SUBMENU ANIMATION (UMC Hospital Style) --- */
@media (min-width: 1024px) {
/* Main Menu Item Link Hover Effect (Underline slide in) */
.mc--main-menu .megamenu.menu-item > .link-arrow-wrapper > a {
position: relative;
display: inline-block;
}
.mc--main-menu .megamenu.menu-item > .link-arrow-wrapper > a::before {
content: '';
position: absolute;
left: 0;
bottom: -3px;
height: 3px;
background-color: #881c1c;
width: 0;
transition: width 0.3s ease-in-out;
}
.mc--main-menu .megamenu.menu-item:hover > .link-arrow-wrapper > a::before {
width: 100%;
}
/* Mega Menu Wrapper Animation (Fade in + Slide up) */
.mc--main-menu .megamenu.menu-item {
position: relative !important; /* Anchor mega menu vertically to this item */
}
.mc--main-menu .megamenu.menu-item .submenu-wrapper {
position: absolute !important;
top: 100% !important;
/* left and width are dynamically calculated via JS for true full-width */
transform: translateY(15px) !important;
background: #f8f9fa !important; /* Soft gray background */
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease-out !important;
padding: 40px 0 !important;
z-index: 100 !important;
display: flex !important;
justify-content: center !important;
border-top: 4px solid #881c1c; /* Top brand border */
overflow: hidden;
}
/* Reveal Submenu on Hover */
.mc--main-menu .megamenu.menu-item:hover .submenu-wrapper {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
function adjustMegaMenus() {
if (window.innerWidth < 1024) return;
const megamenus = document.querySelectorAll('.mc--main-menu .megamenu.menu-item');
megamenus.forEach(menu => {
const wrapper = menu.querySelector('.submenu-wrapper');
if (wrapper) {
const rect = menu.getBoundingClientRect();
// Shift wrapper exactly to the left edge of the window
wrapper.style.left = '-' + rect.left + 'px';
// Set width to exact window width
wrapper.style.width = window.innerWidth + 'px';
}
});
}
// Adjust on load and window resize
adjustMegaMenus();
window.addEventListener('resize', adjustMegaMenus);
// Also adjust precisely on hover in case layout shifted after load
const megamenus = document.querySelectorAll('.mc--main-menu .megamenu.menu-item');
megamenus.forEach(menu => {
menu.addEventListener('mouseenter', adjustMegaMenus);
});
});
</script>
<style>
@media (min-width: 1024px) {
/* Arrow Rotation */
.mc--main-menu .megamenu.menu-item .arrow-toggle svg {
transition: transform 0.3s ease-in-out;
}
.mc--main-menu .megamenu.menu-item:hover .arrow-toggle svg {
transform: rotate(180deg);
}
/* Mega Menu Layout columns */
.mega-menu-content {
display: flex;
width: 100%;
max-width: 1200px;
margin: 0 auto;
gap: 30px;
padding: 0 20px;
}
/* Left Column: Info */
.mega-col-info {
flex: 1;
}
.mega-col-info h3 {
color: #00529b; /* Classic medical blue */
font-size: 24px;
font-weight: 700;
margin-top: 0;
margin-bottom: 15px;
}
.mega-col-info p {
color: #4b5563;
font-size: 14px;
line-height: 1.6;
}
/* Middle Column: Links */
.mega-col-links {
flex: 1.2;
border-left: 1px solid #d1d5db;
padding-left: 30px;
max-height: 350px;
overflow-y: auto;
}
/* Scrollbar styling for middle column */
.mega-col-links::-webkit-scrollbar {
width: 6px;
}
.mega-col-links::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.mega-col-links::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 10px;
}
/* Submenu Link Styling */
.mc--main-menu .megamenu.menu-item .submenu {
list-style: none;
padding: 0;
margin: 0;
}
.mc--main-menu .megamenu.menu-item .submenu .menu-item {
padding: 0 !important;
margin: 0 !important;
}
.mc--main-menu .megamenu.menu-item .submenu .menu-item a {
display: block;
padding: 12px 0;
color: #111827;
text-decoration: none;
font-weight: 600;
font-size: 14px;
border-bottom: 1px solid #e5e7eb;
transition: color 0.2s, padding-left 0.2s;
}
.mc--main-menu .megamenu.menu-item .submenu .menu-item:last-child a {
border-bottom: none;
}
.mc--main-menu .megamenu.menu-item .submenu .menu-item a:hover {
color: #881c1c;
padding-left: 8px; /* Layout indent animation */
}
/* Right Column: Image */
.mega-col-image {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #d1d5db;
padding-left: 30px;
}
.mega-col-image img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
object-fit: cover;
}
/* Hide the mobile back button and title on desktop */
.mc--main-menu .megamenu.menu-item .submenu-wrapper .button-back,
.mc--main-menu .megamenu.menu-item .submenu-wrapper .navigation-title {
display: none !important;
}
}
</style>
<header id="l--main-header">
<h1 class="visually-hidden">The University of Massachusetts Amherst</h1>
@@ -21,426 +215,66 @@
<div id="mobile-flyout-container">
<div class="primary-navigation">
<nav class="mc--menu mc--main-menu">
<ul class="menu m--menu m--main-menu">
<li class="megamenu menu-item menu-item--expanded">
<ul class="menu m--menu m--main-menu" th:if="${primaryMenu != null and not #lists.isEmpty(primaryMenu.items)}">
<th:block th:each="item : ${primaryMenu.items}" th:if="${item.parent == null}">
<!-- Flat item -->
<li class="megamenu menu-item" th:if="${#lists.isEmpty(item.children)}">
<div class="link-arrow-wrapper">
<a href="https://www.umass.edu/gateway/academics" data-drupal-link-system-path="node/11">Academics</a>
<button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true" aria-label="Display Sub Menu for Academics" data-once="site-header-arrow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve" width="16" height="7">
<a th:href="${item.url}" th:text="${item.label}">Menu Item</a>
</div>
</li>
<!-- Expanded item (has children) -->
<li class="megamenu menu-item menu-item--expanded" th:if="${not #lists.isEmpty(item.children)}">
<div class="link-arrow-wrapper">
<a th:href="${item.url}" th:text="${item.label}">Menu Item</a>
<button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true" data-once="site-header-arrow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 7" width="16" height="7">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" d="M7.88,7L15.75,0H0s7.88,7,7.88,7Z"></path>
</svg>
</button>
</div>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 10" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
</svg> Back </button>
<span class="navigation-title">Academics</span>
<ul class="submenu">
<li class="menu-item menu-item--expanded">
<span>Get Your Degree</span>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
</svg> Back </button>
<span class="navigation-title">Get Your Degree</span>
<span class="navigation-title" th:text="${item.label}">Menu Item</span>
<!-- Mega Menu Content Layout -->
<div class="mega-menu-content">
<!-- Column 1: Info (Title and Text) -->
<div class="mega-col-info">
<h3 th:text="${item.label}">Về Bệnh viện</h3>
<p th:if="${item.label == 'Về Bệnh viện' or item.label == 'VỀ BỆNH VIỆN'}">Bệnh viện Đột quỵ Quốc tế tự hào là đơn vị tiên phong trong việc cung cấp dịch vụ khám chữa bệnh chất lượng cao, mang lại sự tin cậy và an tâm cho bệnh nhân.</p>
<p th:if="${item.label == 'Chuyên khoa' or item.label == 'CHUYÊN KHOA'}">Khám phá các chuyên khoa hàng đầu với đội ngũ bác sĩ chuyên môn cao, trang thiết bị y tế hiện đại đạt tiêu chuẩn quốc tế.</p>
<p th:if="${item.label != 'Về Bệnh viện' and item.label != 'VỀ BỆNH VIỆN' and item.label != 'Chuyên khoa' and item.label != 'CHUYÊN KHOA'}">Khám phá thêm thông tin chi tiết về các dịch vụ, chuyên gia và hoạt động của chúng tôi để bảo vệ sức khỏe của bạn.</p>
</div>
<!-- Column 2: The actual Submenu Links -->
<div class="mega-col-links">
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/undergraduate" data-drupal-link-system-path="node/106">Undergraduate</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/bdic/">Design Your Own Major</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/graduate" data-drupal-link-system-path="node/111">Graduate</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/accelerated-masters-4plus1-degree" data-drupal-link-system-path="node/42816">Accelerated Master's</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/schools-colleges" data-drupal-link-system-path="node/596">Schools &amp; Colleges</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/bachelors-degree-completion-online" title="Complete your bachelor&#39;s degree fully online at UMass Amherst." data-drupal-link-system-path="node/84461">Bachelors Degree Completion</a>
<li class="menu-item" th:each="child : ${item.children}">
<a th:href="${child.url}" th:text="${child.label}">Child Item</a>
</li>
</ul>
</div>
</li>
<li class="menu-item menu-item--expanded">
<span>Ways to Learn</span>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
</svg> Back </button>
<span class="navigation-title">Ways to Learn</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/explore-our-campuses" data-drupal-link-system-path="node/84076">Our Campuses</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/summer-winter-sessions" data-drupal-link-system-path="node/83931">Summer &amp; Winter Sessions</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/study-abroad" data-drupal-link-system-path="node/84116">Study Abroad</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/first-year-launch-programs" data-drupal-link-system-path="node/83936">First-Year Launch Programs</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/lifelong/">Pre-College &amp; Lifelong Learning</a>
</li>
</ul>
</div>
</li>
<li class="menu-item menu-item--expanded">
<span>Resources</span>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
</svg> Back </button>
<span class="navigation-title">Resources</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/university-libraries" data-drupal-link-system-path="node/616">University Libraries</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/academic-advising" data-drupal-link-system-path="node/26366">Academic Advising</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/careers/">Career &amp; Internship Services</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/academics/explore-our-programs" data-drupal-link-system-path="node/251">Explore Our Programs</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Column 3: Featured Image -->
<div class="mega-col-image">
<!-- Try to use a hospital-like image if we can, or fallback to logo -->
<img th:src="@{/theme-assets/umass/images/logo.png}" alt="Featured Image" style="object-fit: contain; background: white; padding: 20px;"/>
</div>
</div>
<!-- End Mega Menu Layout -->
</div>
</li>
<li class="menu-item menu-item--expanded">
<div class="link-arrow-wrapper">
<a href="https://www.umass.edu/admissions" data-drupal-link-system-path="node/36">Admissions &amp; Aid</a>
<button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true" aria-label="Display Sub Menu for Admissions &amp; Aid" data-once="site-header-arrow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve" width="16" height="7">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" d="M7.88,7L15.75,0H0s7.88,7,7.88,7Z"></path>
</svg>
</button>
</div>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
</svg> Back </button>
<span class="navigation-title">Admissions &amp; Aid</span>
<ul class="submenu">
<li class="menu-item menu-item--expanded">
<a href="https://www.umass.edu/admissions/undergraduate-admissions" data-drupal-link-system-path="node/266">Undergraduate Admissions</a>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
</svg> Back </button>
<span class="navigation-title">Undergraduate Admissions</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/admissions/undergraduate-admissions" data-drupal-link-system-path="node/266">Home</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/admissions/explore" data-drupal-link-system-path="node/626">Explore</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/admissions/visit" data-drupal-link-system-path="node/1366">Visit</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/admissions/apply" data-drupal-link-system-path="node/271">Apply</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/admissions/undergraduate-admissions/costs-aid" data-drupal-link-system-path="node/2651">Costs &amp; Aid</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/admissions/connect" data-drupal-link-system-path="node/656">Connect</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/admissions/admitted-students" data-drupal-link-system-path="node/1601">Admitted Students</a>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/graduate/apply">Graduate Admissions</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/universityplus/admissions">Undergraduate Online Admissions</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/uww/pre-college">Pre-College Admissions</a>
</li>
<li class="menu-item menu-item--expanded">
<a href="https://www.umass.edu/financialaid" data-drupal-link-system-path="node/781">Financial Aid</a>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
</svg> Back </button>
<span class="navigation-title">Financial Aid</span>
<ul class="submenu">
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/financialaid/financial-aid-services" data-drupal-link-system-path="node/856">Financial Aid Services</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/financialaid/undergraduate" data-drupal-link-system-path="node/786">Undergraduate</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/financialaid/graduate" data-drupal-link-system-path="node/19936">Graduate</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/financialaid/non-degree-seeking-students" data-drupal-link-system-path="node/20531">Non-Degree</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/financialaid/university" data-drupal-link-system-path="node/991">University+</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/financialaid/student-employment" data-drupal-link-system-path="node/1056">Student Employment</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-item menu-item--expanded">
<div class="link-arrow-wrapper">
<a href="https://www.umass.edu/gateway/campus-life" data-drupal-link-system-path="node/16">Campus Life</a>
<button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true" aria-label="Display Sub Menu for Campus Life" data-once="site-header-arrow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve" width="16" height="7">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" d="M7.88,7L15.75,0H0s7.88,7,7.88,7Z"></path>
</svg>
</button>
</div>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
</svg> Back </button>
<span class="navigation-title">Campus Life</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/campus-life/living-and-dining" data-drupal-link-system-path="node/3666">Living and Dining</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/campus-life/student-activities" data-drupal-link-system-path="node/3676">Student Activities</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/campus-life/student-support-and-wellness" data-drupal-link-system-path="node/3681">Student Support and Wellness</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/campus-life/life-amherst" data-drupal-link-system-path="node/3661">Life in Amherst</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/arts-culture" data-drupal-link-system-path="node/84101">Arts &amp; Culture</a>
</li>
</ul>
</div>
</li>
<li class="menu-item menu-item--expanded">
<div class="link-arrow-wrapper">
<a href="https://www.umass.edu/gateway/why-umass" data-drupal-link-system-path="node/82851">Why UMass?</a>
<button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true" aria-label="Display Sub Menu for Why UMass?" data-once="site-header-arrow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve" width="16" height="7">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" d="M7.88,7L15.75,0H0s7.88,7,7.88,7Z"></path>
</svg>
</button>
</div>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
</svg> Back </button>
<span class="navigation-title">Why UMass?</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/why-umass/discover-ideas" data-drupal-link-system-path="node/83286">Discover Ideas</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/why-umass/choose-your-path" data-drupal-link-system-path="node/83471">Choose Your Path</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/why-umass/find-your-purpose" data-drupal-link-system-path="node/83511">Find Your Purpose</a>
</li>
<li class="menu-item menu-item--expanded">
<a href="https://www.umass.edu/gateway/why-umass/world-class-public-research-university" data-drupal-link-system-path="node/3716">About UMass Amherst</a>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
</svg> Back </button>
<span class="navigation-title">About UMass Amherst</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/umass-edge/about-umass-amherst/umass-history" data-drupal-link-system-path="node/3721">UMass History</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/why-umass/about-umass-amherst/umass-amherst-numbers" data-drupal-link-system-path="node/74316">UMass Amherst By the Numbers</a>
</li>
<li class="menu-item menu-item--collapsed">
<a href="https://www.umass.edu/chancellor/">Office of the Chancellor</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/umass-edge/about-umass-amherst/mascot/sam-minuteman" data-drupal-link-system-path="node/21126">Sam the Minuteman</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/umass-stories" data-drupal-link-system-path="node/55696">UMass Amherst Stories</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="menu-item menu-item--expanded">
<div class="link-arrow-wrapper">
<a href="https://www.umass.edu/gateway/research" data-drupal-link-system-path="node/79406">Research</a>
<button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true" aria-label="Display Sub Menu for Research" data-once="site-header-arrow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve" width="16" height="7">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" d="M7.88,7L15.75,0H0s7.88,7,7.88,7Z"></path>
</svg>
</button>
</div>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
</svg> Back </button>
<span class="navigation-title">Research</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/research/student-research" data-drupal-link-system-path="node/606">Student Research</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/research/faculty-excellence" data-drupal-link-system-path="node/19971">Faculty Excellence</a>
</li>
<li class="menu-item menu-item--expanded">
<a href="https://www.umass.edu/gateway/research/innovation-impact" data-drupal-link-system-path="node/601">Innovation &amp; Impact</a>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
</svg> Back </button>
<span class="navigation-title">Innovation &amp; Impact</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/research/stories" data-drupal-link-system-path="node/35236">Research News &amp; Stories</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/research/timeline" data-drupal-link-system-path="gateway/research/timeline">Timeline of Research Breakthroughs</a>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/research/centers-and-institutes" data-drupal-link-system-path="node/611">Centers and Institutes</a>
</li>
</ul>
</div>
</li>
<li class="menu-item menu-item--expanded">
<div class="link-arrow-wrapper">
<a href="https://www.umass.edu/news/news-events" data-drupal-link-system-path="node/31">News &amp; Events</a>
<button type="button" class="has-submenu arrow-toggle" aria-expanded="false" aria-haspopup="true" aria-label="Display Sub Menu for News &amp; Events" data-once="site-header-arrow">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve" width="16" height="7">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" d="M7.88,7L15.75,0H0s7.88,7,7.88,7Z"></path>
</svg>
</button>
</div>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
</svg> Back </button>
<span class="navigation-title">News &amp; Events</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/news-headlines" data-drupal-link-system-path="node/79501">News Headlines</a>
</li>
<li class="menu-item">
<a href="https://events.umass.edu/">Events</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/experts-umass" data-drupal-link-system-path="node/971">Experts at UMass</a>
</li>
<li class="menu-item menu-item--expanded">
<a href="https://www.umass.edu/news/federal-actions" data-drupal-link-system-path="node/75351">Federal Actions</a>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
</svg> Back </button>
<span class="navigation-title">Federal Actions</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/news/federal-actions/all-updates" data-drupal-link-system-path="node/76176">View All Federal Actions Updates</a>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/olympia-drive-fire-response" data-drupal-link-system-path="node/81266">Olympia Drive Fire Response</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/chancellor/">Office of Chancellor Javier Reyes</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/institutional-effectiveness/strategic-plan">Strategic Plan 20242034</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/news-office-frequently-asked-questions" data-drupal-link-system-path="node/21221">Frequently Asked Questions</a>
</li>
<li class="menu-item menu-item--expanded">
<a href="https://www.umass.edu/news/news-events/inside-umass" data-drupal-link-system-path="node/21016">Inside UMass</a>
<div class="submenu-wrapper">
<button class="button-back">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 5 10" enable-background="new 0 0 5 10" xml:space="preserve" width="5" height="10">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
</svg> Back </button>
<span class="navigation-title">Inside UMass</span>
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/inside-umass/submit-inside-umass-procedures-and-guidelines" data-drupal-link-system-path="node/26211">Submit to Inside UMass</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/news-headlines">View Most Recent News Headlines</a>
</li>
<li class="menu-item">
<a href="https://subscribe.umass.edu/subscriptioncenter/manageList/subscribeFromLink?channel_id=a2w6S000007eAfOQAU">Subscribe to Inside UMass</a>
</li>
</ul>
</div>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/hometown-news-requests" data-drupal-link-system-path="node/21091">Hometown News Requests</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/university-relations/toolkit/social-media/social-media-directory">Social Media Directory</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/video-services" data-drupal-link-system-path="node/20596">Video Services</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/job-opportunities-students" data-drupal-link-system-path="node/20546">Job Opportunities for Students</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/news/news-events/contact-us" data-drupal-link-system-path="node/3751">Contact Us</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</th:block>
</ul>
</nav>
<div data-component-id="umass_base:nav-quicklink-buttons">
<nav class="mc--menu mc--quicklink-button-menu">
<ul class="menu m--menu m--quicklink-button-menu">