Nav Main
Liander Bootstrap custom component. Main Navigation component
Example!
Nav Main is a singleton absolute positioned component. This make it impossible to demonstratie the component on this documentation page. See the Nav Main example page for a working example.
Below is an example of a Nav Main and the important parts are explained.
The Notification Banner
The notification banner is used to display important service messages. In the example it is only visible on desktop.
Main Navigation
The main element .nav-main contains all navigation elements, except nav-main-mobile. This part is visualised as the top dark bar on desktop and page covered blue container on mobile.
The element .nav-main-container contains .nav-main-secondary and .nav-main-utils.
Secondary Navigation
The .nav-main-secondary is similar to Segments in Main Nav, secondary items can be used to link to different segments/parts of the webiste. Each secondary item contains a .nav-main-primary, when a secondary item is active the Primary Navigation of that item will be shown as the main part of the navigation.
Adding a sibling element next to .nav-main-primary will create a container that’s aligned to the right. Can be used for example for a search button.
Utils
Similar to Utils in Main Nav. Normally used for things like an account/login button.
Primary Navigation
The .nav-main-navigation element is the main part of the navigation containing the Site Id (.nav-main-site-id) and the main links or buttons for the selected secondary item.
Primary items can be links (<a>) or buttons (<button>). Button variants are used to open a sub menu (.nav-main-sub-menu).
Sub Menu
The .nav-main-sub-menu element can consist out of a max of three groups of sub menu links. A group is built up out of a .nav-main-sub-menu-heading and .nav-main-sub-menu-items
Mobile Navigation
The .nav-main-mobile element is the only item not contained in .nav-main. It visualises the fixed white navigation bar on mobile, containing a Site Id and a mobile menu toggle.
Code Example
<nav class="nav-main open">
<div class="nav-main-container">
<ul class="nav-main-secondary">
<li class="nav-main-secondary-item">
<a class="nav-main-secondary-link" href="">Segment 1</a>
<div class="nav-main-primary-container">
<ul class="nav-main-primary">
<li class="nav-main-site-id">
<a href="/">
<img src="logo.png" alt="Home" />
</a>
</li>
<li class="nav-main-primary-item">
<button class="nav-main-primary-link">
Primary Button 1.1
<span class="fal fa-angle-up nav-main-primary-link-icon"></span>
</button>
<div class="nav-main-sub-menu">
<div class="nav-main-sub-menu-container">
<h3 class="nav-main-sub-menu-heading">Sub Menu Heading 1.1.1</h3>
<ul class="nav-main-sub-menu-items">
<li>
<div class="nav-main-sub-menu-item-icon">
<span class="fas fa-angle-right"></span>
</div>
<div>
<a class="nav-main-sub-menu-link" href="">Sub Menu Item 1.1.1</a>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</li>
<li class="nav-main-secondary-item active">
<a class="nav-main-secondary-link" href="">Segment 2</a>
<div class="nav-main-primary-container">
<ul class="nav-main-primary">
<li class="nav-main-site-id">
<a href="/">
<img src="logo.png" alt="Home" />
</a>
</li>
<li class="nav-main-primary-item">
<button class="nav-main-primary-link">
Primary Button 2.1
<span class="fal fa-angle-up nav-main-primary-link-icon"></span>
</button>
<div class="nav-main-sub-menu">
<div class="nav-main-sub-menu-container">
<h3 class="nav-main-sub-menu-heading">Sub Menu Heading 2.1.1</h3>
<ul class="nav-main-sub-menu-items">
<li>
<div class="nav-main-sub-menu-item-icon">
<span class="fas fa-angle-right"></span>
</div>
<div>
<a class="nav-main-sub-menu-link" href="">Sub Menu Item 2.1.1.1</a>
</div>
</li>
<li>
<div class="nav-main-sub-menu-item-icon">
<span class="fas fa-angle-right"></span>
</div>
<div>
<a class="nav-main-sub-menu-link" href="">Sub Menu Item 2.1.1.2</a>
</div>
</li>
</ul>
<h3 class="nav-main-sub-menu-heading">Sub Menu Heading 2.1.2</h3>
<ul class="nav-main-sub-menu-items">
<li>
<div class="nav-main-sub-menu-item-icon">
<span class="fas fa-angle-right"></span>
</div>
<div>
<a class="nav-main-sub-menu-link" href="">Sub Menu Item 2.1.2.1</a>
</div>
</li>
</ul>
<h3 class="nav-main-sub-menu-heading">Sub Menu Item 2.1.3</h3>
<ul class="nav-main-sub-menu-items">
<li>
<div class="nav-main-sub-menu-item-icon">
<span class="fas fa-angle-right"></span>
</div>
<div>
<a class="nav-main-sub-menu-link" href="">Sub Menu Item 2.1.3.1</a>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-main-primary-item">
<div>
<hr class="nav-main-divider">
</div>
<a class="nav-main-primary-link" href="">
Primary Link 2.2
</a>
</li>
</ul>
</div>
</li>
<li class="nav-main-secondary-item">
<a class="nav-main-secondary-link" href="">Segment 3</a>
<div class="nav-main-primary-container">
<ul class="nav-main-primary">
<li class="nav-main-site-id">
<a href="/">
<img src="logo.png" alt="Home" />
</a>
</li>
<li class="nav-main-primary-item">
<a class="nav-main-primary-link" href="">
Primary Link 3.1
</a>
</li>
</ul>
</div>
</li>
</ul>
<ul class="nav-main-utils">
<li>
<a class="nav-main-utils-link" href="">Util Link 1</a>
</li>
<li>
<a class="nav-main-utils-link d-lg-none" href="">Util Button 2</a>
<button class="btn btn-secondary btn-sm d-none d-lg-inline-block" href="">Util Button 2</button>
</li>
</ul>
</div>
</nav>
<nav class="nav-main-mobile open">
<div class="nav-main-mobile-container">
<div class="nav-main-site-id">
<a href="/">
<img src="logo.png" alt="Home" />
</a>
</div>
<div>
<button class="btn btn-icon-md btn-icon-primary rounded-3 nav-main-mobile-open-btn" data-lbs-toggle="nav-main-mobile">
<span class="fas fa-bars"></span>
</button>
<button class="btn btn-icon-md btn-icon-secondary rounded-3 nav-main-mobile-close-btn" data-lbs-toggle="nav-main-mobile">
<span class="fas fa-xmark-large"></span>
</button>
</div>
</div>
</nav>