Web Docs

Header: With navigation and search 

<header role="banner" class="byu-header">
    <div class="byu-site-banner">

        <a class="byu-link" href="https://byu.edu">
            <span class="visually-hidden">BYU</span>
        </a>

        <div class="byu-titles">

            <h1 class="byu-site-title">
                <a href="/">College of Life Sciences</a>
            </h1>

            <button class="byu-menu-button" aria-expanded="false">Menu</button>

        </div>

        <div class="byu-action-id-search">

            <form class="byu-search" action="/">
                <label class="byu-search-label" for="site-search">Search</label>
                <input type="search" id="byu-site-search" name="q" aria-label="Site search" placeholder="Search">
                <button class="byu-search-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <style>.st{stroke-width:10;fill:none;stroke:currentColor;stroke-linecap:round;}</style>
                        <circle class="st" cx="45.5" cy="45.5" r="24.5"/><path class="st" d="M63 63l16 16"/>
                    </svg>
                </button>
            </form>

        </div>
    </div>

    <nav class="byu-site-navigation">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/programs">Programs</a></li>
            <li><a href="/students">Students</a></li>
            <li><a href="/alumni">Alumni</a></li>
            <li><a href="/giving">Giving</a></li>
        </ul>
    </nav>

</header>
 
<header role="banner" class="byu-header{{#if classes}} {{ classes }}{{/if}}">
    <div class="byu-site-banner">

        <a class="byu-link" href="https://byu.edu">
            <span class="visually-hidden">BYU</span>
        </a>

        <div class="byu-titles">
            {{#if breadcrumbLinks }}
                <nav class="byu-breadcrumb">
                {{#each breadcrumbLinks }}<a href="{{ url }}">{{ title }}</a>{{/each}}
                </nav>
            {{/if}}
            {{#if supertitle }}<h2 class="byu-site-subtitle">{{ supertitle }}</h2>{{/if}}
            <h1 class="byu-site-title">
                <a href="{{ url }}">{{ title }}</a>
            </h1>
            {{#if subtitle }}<h2 class="byu-site-subtitle">{{ subtitle }}</h2>{{/if}}

            <button class="byu-menu-button" aria-expanded="false">Menu</button>

        </div>

        <div class="byu-action-id-search">

            {{#with search }}
            <form class="byu-search" action="{{action}}">
                <label class="byu-search-label" for="site-search">Search</label>
                <input type="search" id="byu-site-search" name="{{paramName}}" aria-label="Site search" placeholder="Search">
                <button class="byu-search-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <style>.st{stroke-width:10;fill:none;stroke:currentColor;stroke-linecap:round;}</style>
                        <circle class="st" cx="45.5" cy="45.5" r="24.5"/><path class="st" d="M63 63l16 16"/>
                    </svg>
                </button>
            </form>
            {{/with}}

            {{#with byuID}}
            <div class="byu-id">
                {{#if username}}
                <a class="byu-netID" href="https://my.byu.edu">{{username}}</a>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="currentcolor" d="M50 95c-26 0-34-18-34-18 3-12 8-18 17-18 5 5 10 7 17 7s12-2 17-7c9 0 14 6 17 18 0 0-7 18-34 18z"/><circle cx="50" cy="50" r="45" fill="none" stroke="currentcolor" stroke-width="10"/><circle fill="currentcolor" cx="50" cy="40" r="20"/></svg>
                <a class="byu-cas cas-signout" href="http://cas.byu.edu/cas/logout">Sign out</a>
                {{/if}}
                
                {{#unless username}}                
                <a class="byu-cas cas-signin" href="http://cas.byu.edu/cas/login">Sign in</a>
                {{/unless}}
            </div>
            {{/with}}

            {{#with actionBtn}}
            <div class="byu-action-btn"><a href="{{url}}">{{title}}</a></div>
            {{/with}}

        </div>
    </div>


    {{#if nav }}
    <nav class="byu-site-navigation">
        <ul>
            {{#each nav}}<li><a href="{{url}}">{{title}}</a></li>{{/each}}
        </ul>
    </nav>
    {{/if}}

</header>
  • Content: 
    var byu_header = (function() {

	'use strict';

	var doc = document; // Put this in a variable to enable smaller compression
	var menuOpenDuration = 300;

	// For compression: if a string is used more than once, put it in a variable
	var jsInitClass = 'js-enabled';
	var expandedAttr = 'aria-expanded';
	var menuOpenClass = 'menu-open';
	var siteNavClass = 'byu-site-navigation';
	var siteActionClass = 'byu-action-id-search';




	// Execute the initialize function
	byu_main.executeOnLoad( init );





	/*
	 * Func: init
	 * Desc: Initialize the header button for all BYU headers on page
	 * 		 (handles multiple heders )
	 * Args: none
	 */
	function init() {

		var headerEls = doc.getElementsByClassName('byu-header');

		Array.prototype.forEach.call(headerEls, function(el) {
			enableMobileMenu( el );
		});

	} // init




	/*
	 * Func: enableMobileMenu
	 * Desc: Initialize the header button
	 * Args: @headerEl - HTML Element - The header that contains the mobile menu to enable
	 */
	function enableMobileMenu( headerEl ) {

		headerEl.hasNav = byu_main.elExists(siteNavClass, headerEl);
		headerEl.hasActions = byu_main.hasChildren(siteActionClass, headerEl);

		var showMenuButton = headerEl.hasNav || headerEl.hasActions;

		if ( showMenuButton ) {
			headerEl.addClass(jsInitClass);
			initMenuButton( headerEl );

			headerEl.navEl = headerEl.getElementsByClassName( siteNavClass )[0];
			headerEl.actionsEl = headerEl.getElementsByClassName( siteActionClass )[0];
		}

	} // enableMobileMenu




	/*
	 * Func: initMenuButton
	 * Desc: 
	 * Args: @headerEl - HTML Element - The header element that contains the menu button to enable
	 */
	function initMenuButton( headerEl ) {
		var menuButton = headerEl.getElementsByClassName('byu-menu-button')[0];

		menuButton.addEventListener('click', function(e){
			clickMenuButton( e.target, headerEl );
		});
	} // initMenuButton




	/*
	 * Func: clickMenuButton
	 * Desc: Handle click events on a mobile menu button within a header
	 * Args: @btn - HTML Element - The button element that has been clicked
	 *		 @headerEl - HTML Element - The header element whose menu button has been clicked
	 */
	function clickMenuButton( btn, headerEl ) {
		var open = btn.getAttribute(expandedAttr) != 'false';
		var opening = false;
		
		// Open
		if ( !open && !opening ) {
			openMenu( btn, headerEl );
		}

		// Close
		else {
			closeMenu( btn, headerEl );
		}
	} // clickMenuButton




	/*
	 * Func: openMenu
	 * Desc: Open a mobile menu within a header
	 * Args: @btn - HTML Element - The button element that controls the menu which should be opened
	 *		 @headerEl - HTML Element - The header element whose menu should be opened
	 */
	function openMenu( btn, headerEl ) {

		// Set the open/closed attribute on the button
		btn.setAttribute(expandedAttr, true);

		// Set the open/closed attribute on the header
		function addOpenClass() {
			if ( !headerEl.hasClass( menuOpenClass ) ) {
				headerEl.addClass( menuOpenClass );
			}
		}

		// Animate the elements
		if ( headerEl.hasNav ) {
			var nav = headerEl.navEl;
			var navHeight = nav.offsetHeight;
			var navEndHeight = animate.getNaturalHeight( nav );

			animate.animateHeight( nav, { start: navHeight, end: navEndHeight, duration: menuOpenDuration, finish: addOpenClass } );
		}

		if ( headerEl.hasActions ) {
			var actions = headerEl.actionsEl;
			var actionsHeight = actions.offsetHeight;
			var actionsEndHeight = animate.getNaturalHeight( actions, "actionsHeightWrapper" );

			animate.animateHeight( actions, { start: actionsHeight, end: actionsEndHeight, duration: menuOpenDuration, finish: addOpenClass } );
		}

	} // openMenu



	/*
	 * Func: closeMenu
	 * Desc: Close a mobile menu within a header
	 * Args: @btn - HTML Element - The button element that controls the menu which should be closed
	 *		 @headerEl - HTML Element - The header element whose menu should be closed
	 */
	function closeMenu( btn, headerEl ) {

		// Set the open/closed attribute on the button
		btn.setAttribute(expandedAttr, false);

		// Set the open/closed attribute on the header

		function removeOpenClass() {
			headerEl.removeClass( menuOpenClass );			
		}

		// Animate the elements
		if ( headerEl.hasNav ) {
			var nav = headerEl.navEl;
			var navHeight = nav.offsetHeight;

			animate.animateHeight( nav, { start: navHeight, end: 0, finish: removeOpenClass } );
		}

		if ( headerEl.hasActions ) {
			var actions = headerEl.actionsEl;
			var actionsHeight = actions.offsetHeight;

			animate.animateHeight( actions, { start: actionsHeight, end: 0, finish: removeOpenClass } );
		}

	} // closeMenu


})();
  • URL: /components/raw/header/header.js
  • Filesystem Path: src/components/headers/header/header.js
  • Size: 4.6 KB
  • Content: 
    $dividerColor: mix(#fff, $byuNavy, 20%)


.byu-header
	z-index: 10
	font-size: 1.125rem
	box-shadow: 0 0 10px rgba(0,0,0,.16)
	border-bottom: 1px solid #ddd
	font-family: $font-heading

	a, a:link, a:visited
		color: #fff
		text-decoration: none
		transition: opacity 200ms ease


	@media( min-width: $breakMdSm )
		font-size: 1.3125rem

	@media( min-width: $breakMdLg )
		font-size: 1.5rem

	.byu-site-banner, .actionsHeightWrapper
		background: $byuNavy
		@supports(display: grid)
			@media(min-width: $breakSm)
				display: grid
				grid-template-columns: 4em auto

			@media(min-width: $breakMdSm)
				grid-template-columns: 4.75em auto

			@media(min-width: $breakMd)
				grid-template-columns: 4.75em auto min-content

	.byu-link
		background: $byuNavy url('../img/byu-monogram-white.png') 0.6em center / 3em auto  no-repeat // Default: png format
		background-image: url('../img/byu-monogram-white.svg')
		display: block
		height: 2em
		width: 4em

		@supports(display: grid)
			@media(min-width: $breakSm)
				// flex: 0 0 5em
				// min-width: 3.5em
				height: auto

			@media(min-width: $breakMdSm)
				width: 4.75em
				background-position: 1em center

	.byu-titles
		padding: 0.5em 0.75em
		flex-grow: 1

		// Add a line separating BYU from the titles
		&:before
			content: " "
			display: block
			position: absolute
			width: 94%
			height: 1px
			right: 3%
			top: 0
			background: $dividerColor

		@supports(display: grid)
			@media(min-width: $breakSm)
				align-self: center

				// Line should be vertical if header is in horizontal layout
				&:before
					width: 1px
					height: 74%
					right: auto
					left: 0
					top: 13%

			@media(min-width: $breakMdSm)
				padding: 0.5em 1em


	// Main site title
	.byu-site-title
		color: #fff
		font-size: inherit
		font-weight: 400
		margin: $spacing1 0
		bottom: 1px


	// Subtitle AND supertitle (only difference is placement)
	.byu-site-subtitle
		color: #fff
		font-size: 0.67em
		font-weight: 400
		margin: $spacing1 0


	// Breadcrumb above the titles
	.byu-breadcrumb
		line-height: 1.4
		font-size: 0.67em
		a
			opacity: 0.75
			&:hover, &:focus
				opacity: 1



//********************
// Action Button, Sign-in and Search Section
//********************

.byu-action-id-search
	font-size: $fontSize16

	a, svg
		font-size: 1rem

	@supports(display: grid)
		@media(min-width: $breakSm)
			grid-column: 1 / 3
			display: grid
			grid-template-columns: auto min-content

		@media(min-width: $breakMd)
			grid-column: 3 / 4
			display: flex
			flex-direction: row
			font-size: 0.9375rem
			align-items: center
			background: transparent none

		@media(min-width: $breakMdLg)
			font-size: 1rem


//********************
// Search
//********************

.byu-search

	@supports(display: grid)
		@media(min-width: $breakSm)
			grid-column: 1 / 3

		@media(min-width: $breakMd)
			min-width: 9em
			order: 3
			margin: 0 1em 0 0.5em

		@media(min-width: $breakLg)
			margin: 0 1em
			min-width: 13em

	.byu-search-label
		@extend .visually-hidden

	#byu-site-search
		padding: $spacing3 0.65em
		width: 100%
		margin-right: 2em
		display: block
		line-height: 1.2
		border: 1px solid #fff
		font-size: 1rem
		box-sizing: border-box

		@media(min-width: $breakMdSm)
			padding: $spacing3 1.25em

		@supports(display: grid)
			@media(min-width: $breakMd)
				padding: 0.4em 1em
				border-radius: 0.9625em

	.byu-search-btn
		@extend %button-reset
		color: $byuNavy
		display: block
		position: absolute
		top: $spacing1
		right: 0
		height: $spacing2 + $spacing2 + 1em
		width: $spacing2 + $spacing2 + 1em
		background: transparent
		border: 1px solid transparent
		font-size: 1rem

		svg
			width: 100%
			height: 100%

		&:hover, &:focus
			background: $grey10
			color: $byuNavy

		&:focus
			border: 1px solid #ccc

		@supports(display: grid)
			@media(min-width: $breakMd)
				width: 1.8em
				height: 1.8em
				top: 0



//********************
// Sign in
//********************


.byu-id
	background: $grey05
	background-image: linear-gradient($grey10, #fff 4px, #fff 100%)
	padding: 0.25em 0.65em
	color: $byuNavy
	text-align: right

	@media(min-width: $breakMdSm)
		padding: 0.25em 1.1em

	a, a:link, a:visited
		color: $byuNavy
		display: inline-block
		padding: 0.5em 0 0.6em

	svg
		width: 1.25em
		height: 1.25em
		display: inline-block
		vertical-align: baseline
		top: 0.25em
		margin: 0 0.25em

	@supports(display: grid)

		@media(min-width: $breakSm)
			white-space: nowrap

		@media(min-width: $breakMd)
			background: transparent
			order: 2
			color: #fff
			padding: 0 0.5em
			display: flex
			align-items: center
			justify-content: flex-end

			svg
				top: 0
				margin: 0 0.5em

			a, a:link, a:visited
				color: #fff
				white-space: nowrap

		@media(min-width: $breakMdLg)
			padding: 0 1em


//********************
// Action Button
//********************


.byu-action-btn
	padding: 0.25em 0.4em
	white-space: nowrap
	background: #fff


	a
		background: $royalWeb
		padding: 0.4em 1.5em
		display: inline-block
		font-size: 1rem
		transition: background 250ms ease

		&:hover, &:focus
			background: mix( $royalWeb, #fff, 90% )
			text-shadow: 0 0 $spacing2 rgba($byuNavy, 0.75)

	@media(min-width: $breakMdSm)
		padding: 0.25em 0.85em

	@supports(display: grid)
		@media(min-width: $breakSm)
			padding: 0.5em
			grid-column: 1 / 2
			grid-row: 2 / 3
			background-image: linear-gradient($grey10, #fff 5px, #fff 100%)

		@media(min-width: $breakMd)
			background: transparent
			order: 1
			padding: 0 0.5em
			a
				background: $royalWeb
				padding: 0.25em 1em

		@media(min-width: $breakMdLg)
			padding: 0 1em
			a
				padding: 0.25em 1.5em







//********************
// Navigation Menu
//********************


.byu-site-navigation
	margin: 0
	padding: 0
	font-size: $fontSize16
	letter-spacing: 0
	border-top: 1px solid $grey05
	background: #fff
	// height: 0
	// overflow: hidden
	a
		&, &:link, &:visited
			color: $byuNavy
			display: block
			padding: 0.5em 0.75em
			font-size: 1rem
			transition: background 250ms ease

		&:hover, &:focus
			background: $grey10

	@media(min-width: $breakMdSm)
		padding: 0 0.5em

	@media(min-width: $breakMd)
		padding-left: 5.5em
		background: transparent

	ul
		margin: 0
		padding: 0
		list-style: none

		li
			margin: 0
			padding: 0

		// @supports(display: grid)
		// 	display: grid
		// 	grid-template-columns: repeat(auto-fill, minmax(6em, auto))
		// 	grid-gap: 0.25em
		// 	align-items: center

		@media(min-width: $breakMd)
			display: block

			li
				display: inline-block

			a, a:link, a:visited
				padding: 0.5em 1.35em
				white-space: nowrap




//********************
// JS-Enabled Header Styles
//********************

$menuButtonSize: 1.8em

.byu-menu-button
	border-radius: $cornerRadius
	display: none
	height: $menuButtonSize
	margin-top: $menuButtonSize * -0.5
	overflow: hidden
	padding: 0
	position: absolute
	right: 0.5rem
	text-indent: 50em
	top: 50%
	width: $menuButtonSize
	border: 1px solid $dividerColor
	background: transparent
	transition: background 200ms ease, transform 200ms ease
	background-position: center center
	
	color: #fff
	&:hover
		background-color: mix($byuNavy, $royalWeb)
	&:focus
		border-color: mix($byuNavy, #fff)
		outline: none
	&[aria-expanded=true]
		background-color: $royalWeb
	
	&:before, &:after
		content: " "
		position: absolute
		display: block
		top: 0
		left: 0
		width: $menuButtonSize
		height: $menuButtonSize
		background-position: center center
		transition: background 200ms ease, transform 200ms ease
		
	&:before
		opacity: 1
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path fill="none" stroke="white" stroke-width="0.75" d="M2 3h6M2 5h6M2 7h6"/></svg>')
	&:after
		opacity: 0
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path fill="none" stroke="white" stroke-width="0.75" d="M 2.5,2.5 L 7.5,7.5"/><path fill="none" stroke="white" stroke-width="0.75" d="M 2.5,7.5 L 7.5,2.5"/></svg>')
	&[aria-expanded=true]:after, &[aria-expanded=true]:before
		transform: rotate(360deg)
	 &[aria-expanded=true]:before
		opacity: 0	
	&[aria-expanded=true]:after
		opacity: 1

	
.byu-header.js-enabled
	// Hide the search and menu
	@media( max-width: ($breakMd - $break0) )
		.byu-action-id-search, .byu-site-navigation
			height: 0
			overflow: hidden

		.byu-titles
			padding-right: 2em

		.byu-menu-button
			display: block


.byu-header.js-enabled.menu-open
	// Hide the search and menu
	@media( max-width: ($breakMd - $break0) )

		.byu-action-id-search, .byu-site-navigation
			height: auto
  • URL: /components/raw/header/header.sass
  • Filesystem Path: src/components/headers/header/header.sass
  • Size: 8.6 KB 
{
  "url": "/",
  "title": "College of Life Sciences",
  "search": {
    "action": "/",
    "paramName": "q"
  },
  "nav": [
    {
      "url": "/",
      "title": "Home"
    },
    {
      "url": "/about",
      "title": "About"
    },
    {
      "url": "/programs",
      "title": "Programs"
    },
    {
      "url": "/students",
      "title": "Students"
    },
    {
      "url": "/alumni",
      "title": "Alumni"
    },
    {
      "url": "/giving",
      "title": "Giving"
    }
  ]
}