The main navigation is a general branding component of the MSState theme. It appears on all pages as part of the general header except those with the full screen hero components. It can also be removed on single page websites.

Usage

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

<nav id="main-menu" class="main-menu navbar navbar-expand-lg d-none d-lg-block color-black" aria-label="Primary Desktop Navigation">
	<div class="container-fluid clearfix">
		<div id="main-menu-container" class="menu-container bootstrap-dropdown-hover"> 

			<ul class="menu--main navbar-nav">
				<li class="nav-item">
					<a href="#" id="menu-main--home" class="nav-link">Home</a>
				</li>
				<li class="nav-item dropdown">
					<a href="#" id="menu-main--academics" class="nav-link" aria-haspopup="true" aria-expanded="false">Academics</a>
					<div class="dropdown-menu px-3">
						<a href="#" class="dropdown-item">Academic Opportunities</a>
						<a href="#" class="dropdown-item">Concentrations in Pre-Professional Programs</a>
						<a href="#" class="dropdown-item">Important Dates</a>
					</div>
				</li>
				<li class="nav-item">
					<a href="#" id="menu-main--visit-msu" class="nav-link">Visit MSU</a>
				</li>
				<li class="nav-item">
					<a href="#" id="menu-main--news" class="nav-link">News</a>
				</li>
				<li class="nav-item">
					<a href="#" id="menu-main--about" class="nav-link">About</a>
				</li>
			</ul>

		</div>	
	</div>
</nav>

Usage

• Use the .color-white class on the nav#main-menu tag to set the color as white.

<nav id="main-menu" class="main-menu navbar navbar-expand-lg d-none d-lg-block color-white" aria-label="Primary Desktop Navigation">
	<div class="container-fluid clearfix">
		<div id="main-menu-container" class="menu-container bootstrap-dropdown-hover"> 

			<ul class="menu--main navbar-nav">
				<li class="nav-item">
					<a href="#" id="menu-main--home" class="nav-link">Home</a>
				</li>
				<li class="nav-item dropdown">
					<a href="#" id="menu-main--academics" class="nav-link" aria-haspopup="true" aria-expanded="false">Academics</a>
					<div class="dropdown-menu px-3">
						<a href="#" class="dropdown-item">Academic Opportunities</a>
						<a href="#" class="dropdown-item">Concentrations in Pre-Professional Programs</a>
						<a href="#" class="dropdown-item">Important Dates</a>
					</div>
				</li>
				<li class="nav-item">
					<a href="#" id="menu-main--visit-msu" class="nav-link">Visit MSU</a>
				</li>
				<li class="nav-item">
					<a href="#" id="menu-main--news" class="nav-link">News</a>
				</li>
				<li class="nav-item">
					<a href="#" id="menu-main--about" class="nav-link">About</a>
				</li>
			</ul>

		</div>	
	</div>
</nav>

Usage

• Use the .color-gray class on the nav#main-menu tag to set the color as white.

<nav id="main-menu" class="main-menu navbar navbar-expand-lg d-none d-lg-block color-gray" aria-label="Primary Desktop Navigation">
	<div class="container-fluid clearfix">
		<div id="main-menu-container" class="menu-container bootstrap-dropdown-hover"> 

			<ul class="menu--main navbar-nav">
				<li class="nav-item">
					<a href="#" id="menu-main--home" class="nav-link">Home</a>
				</li>
				<li class="nav-item dropdown">
					<a href="#" id="menu-main--academics" class="nav-link" aria-haspopup="true" aria-expanded="false">Academics</a>
					<div class="dropdown-menu px-3">
						<a href="#" class="dropdown-item">Academic Opportunities</a>
						<a href="#" class="dropdown-item">Concentrations in Pre-Professional Programs</a>
						<a href="#" class="dropdown-item">Important Dates</a>
					</div>
				</li>
				<li class="nav-item">
					<a href="#" id="menu-main--visit-msu" class="nav-link">Visit MSU</a>
				</li>
				<li class="nav-item">
					<a href="#" id="menu-main--news" class="nav-link">News</a>
				</li>
				<li class="nav-item">
					<a href="#" id="menu-main--about" class="nav-link">About</a>
				</li>
			</ul>

		</div>	
	</div>
</nav>

Dropdown menus used in the main navigation can be split into columns for those websites with more advanced menus and structures.

Usage

• Use .span-* on .dropdown-menu and .row-col-* on the child .row to help adjust dropdown width. Do not go higher than 4.
• To create headings within the dropdown menu, add .menu-depth-1.has-children to the .dropdown-item.

<nav id="main-menu" class="main-menu navbar navbar-expand-lg d-none d-lg-block color-black" aria-label="Primary Desktop Navigation">
	<div class="container-fluid clearfix">
		<div id="main-menu-container" class="menu-container bootstrap-dropdown-hover"> 

			<ul class="menu--main navbar-nav">
				<li class="nav-item">
					<a href="#" id="menu-main--home" class="nav-link">Home</a>
				</li>
				<li class="nav-item dropdown active menu-depth-0">
					<a href="#" id="menu-main--apply" class="nav-link active" aria-haspopup="true" aria-expanded="false">Apply</a>
					<div class="dropdown-menu span-3" style="display: none;">
						<div class="row g-0 row-col-3">
							<div class="col px-3">
								<a href="#" class="dropdown-item menu-depth-1 has-children">Apply Now</a>
								<a href="#" class="dropdown-item menu-depth-2">Check Your Application Status</a>
								<a href="#" class="dropdown-item menu-depth-2">Apply to MSU</a>
							</div>
							<div class="col px-3">
								<a href="#" class="dropdown-item menu-depth-1 has-children">Admission Process</a>
								<a href="#" class="dropdown-item menu-depth-2">Freshman Admissions</a>
								<a href="#" class="dropdown-item menu-depth-2">How to Send Transcripts</a>
								<a href="#" class="dropdown-item menu-depth-2">Transfer Admissions</a>
								<a href="#" class="dropdown-item menu-depth-2">Online</a>
							</div>
							<div class="col px-3">
								<a href="#" class="dropdown-item menu-depth-1 has-children">Connect With MSU</a>
								<a href="#" class="dropdown-item menu-depth-2">Directory</a>
								<a href="#" class="dropdown-item menu-depth-2">Request Information</a>
								<a href="#" class="dropdown-item menu-depth-2">Frequently Asked Questions</a>
							</div>
						</div>        
					</div>
				</li>
				<li class="nav-item">
					<a href="#" id="menu-main--visit-msu" class="nav-link">Visit MSU</a>
				</li>
				<li class="nav-item">
					<a href="#" id="menu-main--news" class="nav-link">News</a>
				</li>
				<li class="nav-item">
					<a href="#" id="menu-main--about" class="nav-link">About</a>
				</li>
			</ul>

		</div>	
	</div>
</nav>