Top navigation
As a component, top navigation will require a more customisation according to the context of the site. Options are available for fixing the navigation to the top of screen, hamburger menus and more.
Simple
The optional site name provides a link to the home page. At small screen sizes (width < 768px), this type is scaled to fit the available space. That being said, site titles should remain relatively short. The nav options displayed on the right should take precedence.
<div class="top-navigation">
<div class="container">
<div class="row">
<!-- START left hand column -->
<div class="col-auto left-nav">
<a href="https://www.rmit.edu.au/" class="rmit-logo"><span class="visually-hidden">RMIT University</span></a>
<!-- Explicitly turn off one bit of text and turn on the other to deal with JAWS bug -->
<h2>
<a href="">
<span aria-hidden="true">Optional site title</span>
<span class="visually-hidden">Optional site title homepage</span>
</a>
</h2>
</div>
<!-- END left hand column -->
</div>
</div>
</div>
Text links
This example omits the site title and shows three basic text links. Text links can be hidden at small screens by adding the class hide-sm to the element.
<div class="top-navigation">
<div class="container">
<div class="row">
<!-- START left hand column -->
<div class="col-auto left-nav">
<a href="https://www.rmit.edu.au/" class="rmit-logo"><span class="visually-hidden">RMIT University</span></a>
</div>
<!-- END left hand column -->
<!-- START right hand column -->
<div class="col">
<ul>
<li><a href="https://www.rmit.edu.au/library">Link 1</a></li>
<li><a href="https://www.rmit.edu.au/library">Link 2</a></li>
<li><a href="https://www.rmit.edu.au/library">Link 3</a></li>
</ul>
</div>
<!-- END right hand column -->
</div>
</div>
</div>
Hamburger
A hamburger menu can be a good way of hiding large and complex navigation menus. Attention must be paid to accessibility to ensure a good experience for visually impaired users. In this example. additional text, is added to the button, "Click for main menu". It is hidden from display but available to screen readers.
<div class="top-navigation">
<div class="container">
<div class="row">
<!-- START left hand column -->
<div class="col-auto left-nav">
<a href="https://www.rmit.edu.au/" class="rmit-logo"><span class="visually-hidden">RMIT University</span></a>
<h2>
<a href="">
<span aria-hidden="true">Optional site title</span>
<span class="visually-hidden">Optional site title homepage</span>
</a>
</h2>
</div>
<!-- END left hand column -->
<!-- START right hand column -->
<div class="col">
<ul>
<li class="menu">
<button id="menu-button4"
class="btn btn-primary collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#context-menu" data-bs-display="static" aria-expanded="false"
aria-controls="context-menu">Click for main menu</button>
</li>
</ul>
</div>
<!-- END right hand column -->
</div>
</div>
</div>
Bootstrap controls the expansion of the target div and the design system uses the addition and subtraction of class collapsed to toggle between the hamburger and close icons. Some additional script, located at the bottom of the page, is used to allow more control over how the menu is displayed. The variable menuCover, when set to true, hides the page content and allows the menu to take over the entire screen.
When set to false, the menu merely pushes the page content down the page. This is suitable for simpler, shorter menus. Here's the required script:
var menuCover = true; //If true, menu covers content. If false, menu pushes content down
var scrollPosition;
var menuDisplay = false;
var menuButton = document.getElementById("menu-button");
var pageContent = document.getElementById("page-content");
if(menuCover) menuButton.addEventListener("click", showHideMenu);
function showHideMenu() {
if(menuDisplay == false)
{
menuDisplay = true;
scrollPosition = window.scrollY;
pageContent.style.display = "none";
}
else
{
menuDisplay = false;
pageContent.style.display = "block";
/* Change scroll behaviour, jump to where the user had scrolled to on the page,
then revert to smooth scrolling again. */
document.documentElement.style.scrollBehavior = "auto";
window.scroll(0, scrollPosition);
document.documentElement.style.scrollBehavior = "smooth";
}
}
Expanded menu format
How the menu is displayed is very much dependent on the context of its parent site. This code should be placed below the <nav> tag but before <div id="page-content">
<nav id="context-menu" class="collapse" aria-label="Main Menu">
<div class="container nav-container">
<div class="row">
<div class="col">
<ul class="link-list-white">
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link3.html">Link 3</a></li>
</ul>
</div>
</div>
</div>
</nav>
Fixed menus
To fix the menu to the top of the screen as the user scrolls, add the class nav-fixed to the html tag.
Submenu
Write about this thing.
<div class="top-navigation">
<div class="container">
<div class="row">
<!-- START left hand column -->
<div class="col-auto left-nav">
<a href="https://www.rmit.edu.au/" class="rmit-logo"><span class="visually-hidden">RMIT University</span></a>
</div>
<!-- END left hand column -->
<!-- START right hand column -->
<div class="col">
<ul>
<li><a href="https://www.rmit.edu.au/library">Link 1</a></li>
<li><a href="https://www.rmit.edu.au/library">Link 2</a></li>
</ul>
</div>
<!-- END right hand column -->
</div>
</div>
</div>
<!-- START submenu desktop only -->
<div id="sub-menu">
<div class="container">
<nav aria-label="Main Menu">
<ul>
<li><a href="">Subnav 1</a></li>
<li><a href="">Subnav 2</a></li>
<li class="selected">Subnav selected</li>
<li><a href="">Subnav 4</a></li>
</ul>
</nav>
</div>
</div>
<!-- END submenu desktop only -->
Learning Lab example
Here, we are presenting three individual links. "Library", linking back to the library home page, is hidden on mobile via hide-sm class due to space reasons. The search link comprises two elements, the text is hidden on smaller screens for space reasons, while the icon is always present. The hamburger menu is always present.
<header>
<a href="#main-content" class="visually-hidden-focusable">Skip to main content</a>
<div class="top-navigation">
<!-- START container -->
<div class="container">
<div class="row">
<!-- START left hand column -->
<div class="col-auto left-nav">
<a href="https://www.rmit.edu.au/" class="rmit-logo"><span class="visually-hidden">RMIT University</span></a>
<h2>
<a href="">
<span aria-hidden="true">Learning lab</span>
<span class="visually-hidden">Learning lab homepage</span>
</a>
</h2>
</div>
<!-- END left hand column -->
<!-- START right hand column -->
<div class="col">
<ul>
<li class="hide-sm">
<a href="https://www.rmit.edu.au/library">Library</a>
</li>
<li class="search">
<a id="search2">
<div class="search-label">Search</div>
<div class="mag-glass"></div>
</a>
</li>
<li class="menu">
<button id="menu-button"
class="btn btn-primary collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#context-menu" data-bs-display="static" aria-expanded="false"
aria-controls="context-menu">Click for main menu</button>
</li>
</ul>
</div>
<!-- END right hand column -->
</div>
</div>
<!-- END container -->
</div>
<nav id="context-menu" class="collapse" aria-label="Main Menu">
<!-- START container -->
<div class="container nav-container">
<div class="row">
<!-- START column -->
<div class="col">
<ul class="link-list-white">
<li><a href="/design-system/">Introduction</a></li>
<li><a href="/design-system/visual/breakpoints/">Visual language</a></li>
<li><a href="/design-system/components-simple/accordions/">Simple components</a></li>
<li><a href="/design-system/components-complex/footer/">Complex components</a></li>
<li><a href="/design-system/examples/example-1">Examples</a></li>
</ul>
</div>
<!-- END column -->
</div>
</div>
<!-- END container -->
</nav>
</header>
