Guidance
The main navigation component is fundamental to any application or website. It helps visitors explore the information architecture, understand what's available and provide quick access to topics, pages, or features. This component has several options to suit a variety of platforms and experiences, including basic language toggle, cart, mega menu, search, and user account variations. Whatever the configuration, it should remain consistent, responsive, and easy to understand across different screens and contexts.
Do
- Keep it simple and use clear, descriptive labels.
- Keep it consistent across different pages or sections.
- Prioritize essential items focus on the top levels of your information architecture.
Don’t
- Overwhelm users with too many options.
- Change the main navigation's location or behavior.
- Add buttons or links to the main navigation bar that are not shown here. Add links to the mega menu.
You'll need to include gnb-menus-1.0.0.js for this component at the bottom of your page before the closing body tag.
Language toggle
The basic navigation consists of the logo and language toggle. Ideal for use in applications, promotional, project and initiative websites, forms, and application processes. The simplified navigation prevents the user from navigating away from the page while completing a task or process.
HTML
<header class="gnb-header">
<div class="logo">
<a href="https://www.gnb.ca">
<img src="../img/NB.svg" alt="Government of New Brunswick" id="logo" />
</a>
</div>
<div class="gnb-main-nav">
<nav>
<ul>
<li><a href="#">Français</a></li>
</ul>
</nav>
</div>
</header>
Cart
This navigation consists of the logo, language toggle and cart button. Ideal for use for services, forms and application processes that require payment. This simplified navigation bar prevents the user from navigating away from the page while completing a task or process.
HTML
<header class="gnb-header">
<div class="logo">
<a href="https://www.gnb.ca">
<img src="../img/NB.svg" alt="Government of New Brunswick" id="logo" />
</a>
</div>
<div class="gnb-main-nav">
<nav>
<ul>
<li><a href="#">Français</a></li>
<li><button class="btn-cart"><span>Cart</span></button></li>
</ul>
</nav>
</div>
</header>
Mega menu
This navigation consists of the logo, language toggle and mega menu button. A mega menu displays
content and navigation options in a wide, multi-column dropdown format. Use the grid system within
the .gnb-mega-menu section to organize your content.
HTML
<header class="gnb-header">
<div class="logo">
<a href="https://www.gnb.ca">
<img src="../img/NB.svg" alt="Government of New Brunswick" id="logo" />
</a>
</div>
<div class="gnb-main-nav">
<nav>
<ul>
<li><a href="#">Français</a></li>
<li>
<button aria-expanded="false" id="btn-mega-menu"><span>Menu</span></button>
</li>
</ul>
</nav>
</div>
</header>
<section class="gnb-mega-menu" id="gnb-mega-menu">
<div class="container padding-bottom-xl">
<h2>Information and services</h2>
<ul class="gnb-list-nav row row-cols-1 row-cols-md-2 row-cols-lg-3">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
</div>
</section>
<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-menus-1.0.0.js"></script>
Search
Add a global search to your website or application.
Search
HTML
<header class="gnb-header">
<div class="logo">
<a href="https://www.gnb.ca">
<img src="../img/NB.svg" alt="Government of New Brunswick" id="logo" />
</a>
</div>
<div class="gnb-main-nav">
<nav>
<ul>
<li><a href="#">Français</a></li>
<li>
<button aria-expanded="false" id="btn-search" class="btn-search"><span>Search</span></button>
</li>
<li>
<button aria-expanded="false" id="btn-mega-menu"><span>Menu</span></button>
</li>
</ul>
</nav>
</div>
</header>
<section class="gnb-search" id="gnb-search">
<div class="container padding-bottom-xl">
<h2>Search</h2>
<!-- Search with button -->
<form class="gnb-input-pair">
<label class="visually-hidden" for="search">Search</label>
<input id="search" type="search" />
<button class="gnb-btn-search"><span>Search</span></button>
</form>
</div>
</section>
<section class="gnb-mega-menu" id="gnb-mega-menu">
<div class="container padding-bottom-xl">
<h2>Information and services</h2>
<ul class="gnb-list-nav row row-cols-1 row-cols-md-2 row-cols-lg-3">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
</div>
</section>
User account
Add support for user accounts to the main navigation. This has two states:
- Sign in: Before a user signs into their account, this reveals the sign in form.
- Account: After a user signs into their account, this reveals a set of account related menu items.
Before sign in
The menu label says Sign in, and it opens the sign in form.
Search
After sign in
The menu label says Account, and it opens the account menu.
Search
HTML
<header class="gnb-header">
<div class="logo">
<a href="https://www.gnb.ca">
<img src="../img/NB.svg" alt="Government of New Brunswick" id="logo" />
</a>
</div>
<div class="gnb-main-nav">
<nav>
<ul>
<li><a>Français</a></li>
<li>
<button aria-expanded="false" id="btn-search" class="btn-search"><span>Search</span></button>
</li>
<!-- Before a user signs in, they should see the sign-in button -->
<li>
<button aria-expanded="false" id="btn-sign-in" class="btn-sign-in"><span>Sign in</span></button>
</li>
<!-- After a user has signed in, they should see the account button-->
<li>
<button aria-expanded="false" id="btn-account" class="btn-account"><span>Account</span></button>
</li>
<li>
<button aria-expanded="false" id="btn-mega-menu"><span>Menu</span></button>
</li>
</ul>
</nav>
</div>
</header>
<section class="gnb-mega-menu" id="gnb-search">
<div class="container padding-bottom-xl">
<h2>Search</h2>
<!-- Search with button -->
<form class="gnb-input-pair">
<label class="visually-hidden" for="search">Search</label>
<input id="search" type="search" />
<button class="gnb-btn-search"><span>Search</span></button>
</form>
</div>
</section>
<!-- Before a user has signed in, they should see the sign in form -->
<section class="gnb-sign-in" id="gnb-sign-in">
<div class="container padding-bottom-xl">
<div class="row">
<h2 class="margin-bottom-md">Sign in to your account</h2>
<p>
If you don’t have one yet, you can <a href="#">create an account</a>.
</p>
<div class="col col-lg-6">
<form>
<label for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="email@example.com">
<label for="password">Password</label>
<input type="password" id="password" name="password">
<fieldset class="gnb-checkboxes">
<legend class="visually-hidden">Stay logged in</legend>
<div class="pair">
<input type="checkbox" name="default" id="default">
<label for="default">Remember me</label>
</div>
</fieldset>
<button type="submit" class="btn-primary">Sign in</button>
</form>
<hr />
<ul>
<li><a href="#">Forgot password?</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- After a user has signed in, they should see this menu-->
<section class="gnb-account" id="gnb-account">
<div class="container">
<h2>Your account</h2>
<ul class="gnb-list-nav">
<li><a href="#">Edit your profile</a></li>
<li><a href="#">Change your password</a></li>
<li><a href="#">Security questions</a></li>
<li><a href="#">Sign out</a></li>
</ul>
</div>
</section>
<section class="gnb-mega-menu" id="gnb-mega-menu">
<div class="container padding-bottom-xl">
<h2>Information and services</h2>
<ul class="gnb-list-nav row row-cols-1 row-cols-md-2 row-cols-lg-4">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Lorem sit amet</a></li>
<li><a href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
</div>
</section>