<header id="header">
<div class="header-logo">
<div class="header-logo__wrap">
<a href="https://www.ucla.edu/">
<img class="header-logo__image" src="https://www.ucla.edu/img/logo-ucla.svg
" alt="UCLA Logo" />
</a>
<ul class="breadcrumb breadcrumb--white">
<li class="breadcrumb__item">
<a href="#">College</a>
</li>
<li class="breadcrumb__item">
<a href="#">School</a>
</li>
</ul>
</div>
</div>
<div class="header-wrap clearfix">
<div class="site-name clearfix">
<a href="#" title="Department Name" rel="home">Department Name</a>
</div>
<div id="menu-secondary">
<div id="nav-second" class="nav-secondary" aria-label="Secondary Menu">
<ul class="nav-secondary__list">
<li class="nav-secondary__item">
<a class="nav-secondary__link" href="#">Nav Item</a>
</li>
<li class="nav-secondary__item">
<a class="nav-secondary__link" href="#">Nav Item</a>
</li>
<li class="nav-secondary__item">
<a class="nav-secondary__link nav-secondary__link--active" href="#">Nav Item</a>
</li>
</ul>
</div>
</div>
<nav id="menu">
<button id="primary-ham" class="hamburger" type="button" aria-label="Menu" aria-controls="navigation" alt="navigation and search">
<span class="hamburger__box">
<span class="hamburger__inner"></span>
</span>
</button>
<nav id="nav-main" class="nav-primary" aria-label="Main Menu">
<ul class="nav-primary__list">
<li>
<div class="nav-primary__search-mobile">
<form role="search" method="get" class="nav-primary__search-form" action="#" id="menu-search-mobile">
<label>
<span class="nav-primary__screen-reader-text visuallyhidden">Search for:</span>
<input type="search" class="nav-primary__search-field" placeholder="Search …" value="" name="s">
</label>
<input type="submit" class="nav-primary__search-submit" value="Search">
</form>
</div>
</li>
<li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
<a class="nav-primary__link nav-primary__link--current-page" href="#">Nav Item</a>
<button class="nav-primary__toggle" aria-label="toggle"></button>
<ul class="nav-primary__sublist nav-primary__sublist--hidden" aria-expanded="false">
<li class="nav-primary__item">
<a class="nav-primary__link" href="#">Nav Item</a>
</li>
<li class="nav-primary__item">
<a class="nav-primary__link nav-primary__link--current-page" href="#">Nav Item</a>
</li>
<li class="nav-primary__item">
<a class="nav-primary__link" href="#">Nav Item</a>
</li>
<li class="nav-primary__item">
<a class="nav-primary__link" href="#">Nav Item</a>
</li>
</ul>
</li>
<li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
<a class="nav-primary__link" href="#">Nav Item</a>
<button class="nav-primary__toggle" aria-label="toggle"></button>
<ul class="nav-primary__sublist nav-primary__sublist--hidden" aria-expanded="false">
<li class="nav-primary__item">
<a class="nav-primary__link" href="#">Nav Item</a>
</li>
<li class="nav-primary__item">
<a class="nav-primary__link" href="#">Nav Item</a>
</li>
</ul>
</li>
<li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
<a class="nav-primary__link" href="#">Nav Item</a>
<button class="nav-primary__toggle" aria-label="toggle"></button>
<ul class="nav-primary__sublist nav-primary__sublist--hidden" aria-expanded="false">
<li class="nav-primary__item">
<a class="nav-primary__link" href="#">Nav Item</a>
</li>
<li class="nav-primary__item">
<a class="nav-primary__link" href="#">Nav Item</a>
</li>
</ul>
</li>
<li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
<a class="nav-primary__link" href="#">Nav Item</a>
<button class="nav-primary__toggle" aria-label="toggle"></button>
<ul class="nav-primary__sublist nav-primary__sublist--hidden" aria-expanded="false">
<li class="nav-primary__item">
<a class="nav-primary__link" href="#">Nav Item</a>
</li>
<li class="nav-primary__item">
<a class="nav-primary__link" href="#">Nav Item</a>
</li>
<li class="nav-primary__item">
<a class="nav-primary__link" href="#">Nav Item</a>
</li>
<li class="nav-primary__item">
<a class="nav-primary__link" href="#">Nav Item</a>
</li>
</ul>
</li>
<li class="nav-primary__item ">
<a class="nav-primary__link" href="#">Nav Item</a>
</li>
<li class="nav-primary__item nav-primary__link--has-children" aria-haspopup="true">
<a class="nav-primary__link" href="#">Nav Item</a>
<button class="nav-primary__toggle" aria-label="toggle"></button>
<ul class="nav-primary__sublist nav-primary__sublist--hidden" aria-expanded="false">
<li class="nav-primary__item">
<a class="nav-primary__link" href="#">Nav Item</a>
</li>
<li class="nav-primary__item">
<a class="nav-primary__link" href="#">Nav Item</a>
</li>
</ul>
</li>
<li>
<div class="nav-primary__search-desktop">
<button id="search-button" class="nav-primary__search-desktop-button">
<svg role="img" aria-label="Search Icon" class="nav-primary__search-icon" width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Search Icon</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-15.000000, -15.000000)">
<g id="Nav-Item">
<g transform="translate(12.000000, 12.000000)">
<polygon class="Path-polygon" points="0 0 24 0 24 24 0 24"></polygon>
<path d="M15.5,14 L14.71,14 L14.43,13.73 C15.41,12.59 16,11.11 16,9.5 C16,5.91 13.09,3 9.5,3 C5.91,3 3,5.91 3,9.5 C3,13.09 5.91,16 9.5,16 C11.11,16 12.59,15.41 13.73,14.43 L14,14.71 L14,15.5 L19,20.49 L20.49,19 L15.5,14 Z M9.5,14 C7.01,14 5,11.99 5,9.5 C5,7.01 7.01,5 9.5,5 C11.99,5 14,7.01 14,9.5 C14,11.99 11.99,14 9.5,14 Z" fill="#00598C" fill-rule="evenodd"></path>
</g>
</g>
</g>
</g>
</svg>
</button>
<div class="nav-primary__search-block-form search-mobile" data-drupal-selector="search-block-form" id="block-search" role="search">
<form role="search" method="get" class="nav-primary__search-form" action="#" id="menu-search-desktop">
<label>
<span class="nav-primary__screen-reader-text visuallyhidden">Search for:</span>
<input type="search" class="nav-primary__search-field" placeholder="Search …" value="" name="s">
</label>
<input type="submit" class="nav-primary__search-submit" value="Search">
</form>
</div>
</div>
</li>
</ul>
</nav>
</nav>
</div>
</header>
<div class="ucla campus">
<ul class="breadcrumb">
<li class="breadcrumb__item breadcrumb__item--first">
<a href="#">Home</a>
</li>
<li class="breadcrumb__item">
<a href="#">Breadcrumb 1</a>
</li>
<li class="breadcrumb__item">
<a href="#">Breadcrumb 2</a>
</li>
</ul>
</div>