HighFive Design System

Molecules

Header Quick Navigation: Maroon (Default)

The quick navigation is a general branding component of the MSState theme. While not required, it appears on most pages as part of the general header except those with the full screen hero components.

Usage

  • Use the .color-maroon class on the nav#quick-menu tag to set the color as maroon. Maroon is the default and most commonly used color.
  • The only required part of this component is the .navbar-nav containing the myState and Directory links. The .site-links, .social-header, and .search-form should are all option and should be aligned to the right hand side. To align the items to the right, the element immediately following the first .navbar-nav containing myState should have .ms-auto class on it to force the spread and alignment.

HTML

<nav id="quick-menu" class="quick-menu navbar navbar-expand-lg d-none d-lg-block color-maroon" aria-label="Quick Navigation Links">
	<div class="container-fluid clearfix">

		<ul class="navbar-nav">
			<li class="nav-item university"><a class="nav-link" href="https://my.msstate.edu/">myState <span class="sr-only"> on Mississippi State University</span></a></li>
			<li class="nav-item university"><a class="nav-link" href="https://www.msstate.edu/directory/">Directory <span class="sr-only"> on Mississippi State University</span></a></li>
		</ul>

		<ul class="navbar-nav ms-auto site-links site-links--black">
			<li class="nav-item"><a class="nav-link" href="#">Apply Now</a></li>
			<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
		</ul>

		<ul id="social-header" class="social-header navbar-nav" role="navigation" aria-label="Social Media Header Links">
			<li class="nav-item">
				<a class="nav-link social-icon facebook" href="#" title="Find Website Name on Facebook">
					<span class="sr-only">Find Website Name on Facebook</span>
					<span class="fab fa-facebook"></span>
				</a>
			</li>
		</ul>

		<form class="search-form d-flex" role="search" action="https://www.msstate.edu/site-index/" method="get" aria-label="Search MSState">
			<label for="search-terms" class="sr-only">Search MSState</label>
			<button class="btn btn-white" title="Search MSState" aria-label="Toggle quick search field" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-search-quick" aria-expanded="false" aria-controls="collapse-search-quick">
				<span class="fas fa-search"></span>
				<span class="fas fa-times d-none"></span>
				<span class="sr-only">Toggle quick search field</span>
			</button>
			<div class="input-group collapse" id="collapse-search-quick">
				<input class="form-control" id="search-terms" name="terms" placeholder="Search MSState" type="text">
				<button class="btn btn-gray-200 text-black" title="Search" aria-label="Search" type="submit">
					Search
				</button>
			</div>
		</form>
		
	</div>
</nav>

Example: Required university links with search

HTML

<nav id="quick-menu" class="quick-menu navbar navbar-expand-lg d-none d-lg-block color-maroon" aria-label="Quick Navigation Links">
	<div class="container-fluid clearfix">

		<ul class="navbar-nav">
			<li class="nav-item university"><a class="nav-link" href="https://my.msstate.edu/">myState <span class="sr-only"> on Mississippi State University</span></a></li>
			<li class="nav-item university"><a class="nav-link" href="https://www.msstate.edu/directory/">Directory <span class="sr-only"> on Mississippi State University</span></a></li>
		</ul>

		<form class="search-form d-flex ms-auto" role="search" action="https://www.msstate.edu/site-index/" method="get" aria-label="Search MSState">
			<label for="search-terms" class="sr-only">Search MSState</label>
			<button class="btn btn-white" title="Search MSState" aria-label="Toggle quick search field" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-search-quick" aria-expanded="false" aria-controls="collapse-search-quick">
				<span class="fas fa-search"></span>
				<span class="fas fa-times d-none"></span>
				<span class="sr-only">Toggle quick search field</span>
			</button>
			<div class="input-group collapse" id="collapse-search-quick">
				<input class="form-control" id="search-terms" name="terms" placeholder="Search MSState" type="text">
				<button class="btn btn-gray-200 text-black" title="Search" aria-label="Search" type="submit">
					Search
				</button>
			</div>
		</form>
		
	</div>
</nav>
Molecules

Header Quick Navigation: Black

Usage

  • Use the .color-black class on the nav#quick-menu tag to set the color as maroon. Maroon is the default and most commonly used color.

HTML

<nav id="quick-menu" class="quick-menu navbar navbar-expand-lg d-none d-lg-block color-black" aria-label="Quick Navigation Links">
	<div class="container-fluid clearfix">

		<ul class="navbar-nav">
			<li class="nav-item university"><a class="nav-link" href="https://my.msstate.edu/">myState <span class="sr-only"> on Mississippi State University</span></a></li>
			<li class="nav-item university"><a class="nav-link" href="https://www.msstate.edu/directory/">Directory <span class="sr-only"> on Mississippi State University</span></a></li>
		</ul>

		<ul class="navbar-nav ms-auto site-links site-links--black">
			<li class="nav-item"><a class="nav-link" href="#">Apply Now</a></li>
			<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
		</ul>

		<ul id="social-header" class="social-header navbar-nav" role="navigation" aria-label="Social Media Header Links">
			<li class="nav-item">
				<a class="nav-link social-icon facebook" href="#" title="Find Website Name on Facebook">
					<span class="sr-only">Find Website Name on Facebook</span>
					<span class="fab fa-facebook"></span>
				</a>
			</li>
		</ul>

		<form class="search-form d-flex" role="search" action="https://www.msstate.edu/site-index/" method="get" aria-label="Search MSState">
			<label for="search-terms" class="sr-only">Search MSState</label>
			<button class="btn btn-white" title="Search MSState" aria-label="Toggle quick search field" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-search-quick" aria-expanded="false" aria-controls="collapse-search-quick">
				<span class="fas fa-search"></span>
				<span class="fas fa-times d-none"></span>
				<span class="sr-only">Toggle quick search field</span>
			</button>
			<div class="input-group collapse" id="collapse-search-quick">
				<input class="form-control" id="search-terms" name="terms" placeholder="Search MSState" type="text">
				<button class="btn btn-gray-200 text-black" title="Search" aria-label="Search" type="submit">
					Search
				</button>
			</div>
		</form>
		
	</div>
</nav>
Molecules

Header Quick Navigation: White

Usage

  • Use the .color-white class on the nav#quick-menu tag to set the color as maroon. Maroon is the default and most commonly used color.

HTML

<nav id="quick-menu" class="quick-menu navbar navbar-expand-lg d-none d-lg-block color-white" aria-label="Quick Navigation Links">
	<div class="container-fluid clearfix">

		<ul class="navbar-nav">
			<li class="nav-item university"><a class="nav-link" href="https://my.msstate.edu/">myState <span class="sr-only"> on Mississippi State University</span></a></li>
			<li class="nav-item university"><a class="nav-link" href="https://www.msstate.edu/directory/">Directory <span class="sr-only"> on Mississippi State University</span></a></li>
		</ul>

		<ul class="navbar-nav ms-auto site-links site-links--black">
			<li class="nav-item"><a class="nav-link" href="#">Apply Now</a></li>
			<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
		</ul>

		<ul id="social-header" class="social-header navbar-nav" role="navigation" aria-label="Social Media Header Links">
			<li class="nav-item">
				<a class="nav-link social-icon facebook" href="#" title="Find Website Name on Facebook">
					<span class="sr-only">Find Website Name on Facebook</span>
					<span class="fab fa-facebook"></span>
				</a>
			</li>
		</ul>

		<form class="search-form d-flex" role="search" action="https://www.msstate.edu/site-index/" method="get" aria-label="Search MSState">
			<label for="search-terms" class="sr-only">Search MSState</label>
			<button class="btn btn-white" title="Search MSState" aria-label="Toggle quick search field" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-search-quick" aria-expanded="false" aria-controls="collapse-search-quick">
				<span class="fas fa-search"></span>
				<span class="fas fa-times d-none"></span>
				<span class="sr-only">Toggle quick search field</span>
			</button>
			<div class="input-group collapse" id="collapse-search-quick">
				<input class="form-control" id="search-terms" name="terms" placeholder="Search MSState" type="text">
				<button class="btn btn-gray-200 text-black" title="Search" aria-label="Search" type="submit">
					Search
				</button>
			</div>
		</form>
		
	</div>
</nav>