Main Nav
Liander Bootstrap custom component. Main Navigation component
Example!
Main Nav is a singleton absolute positioned component. This make it impossible to demonstratie the component on this documentation page. See the Main Nav example page for a working example.
Below is an example of a MainNav 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.
Level 1
Level 1 is the small top bar of the navigation.
Segments
Within Level 1 there can be Segments (main-nav-segments) that could be segments of your website, like Consumer or Business.
Utils
Within Level 1 there is the utils section (main-nav-utils), normally used for things like an account / login button.
Level 2
Level 2 is the large bottom bar of the navigation.
Sections
Level 2 can contain a main-nav-sections used for the main navigation links.
Sections are shown in Desktop Mode and can only have a single level of main-nav-sections-item.
Mobile Sections
Unlike Sections, Mobile Sections can contain a second level of links by using main-nav-mobile-sections-submenu.
When a main-nav-mobile-sections-item has a main-nav-mobile-sections-submenu, it can be initialized with collapsed or expanded. The sub-menu-toggle is a trigger to toggle the collapsed state of the submenu.
Mobile Menu
The main-nav-mobile is the bar for Main Nav in Mobile Mode.
It has a main-nav-buttons containing main-nav-mobile-toggle for Mobile Menu show/hide, and optionally main-nav-mobile-search-toggle for Mobile Search show/hide and any other custom button.
<div class="notification-banner bg-tertiary text-white text-center py-2 d-none d-lg-block">
<div class="container">
<div class="content text-body d-flex py-2">
<span
class="me-3 fa-regular fa-sharp fa-triangle-exclamation fa-lg align-items-center"
></span>
Er gaat iets fout in een servicegebied. We werken aan een oplossing.
<a class="notification-link link-light ms-2 fw-semibold">Lees meer.</a>
</div>
</div>
</div>
<div class="main-nav-overlay hidden"></div>
<div class="main-nav-dummy"></div>
<nav class="main-nav">
<div class="main-nav-level-1 py-lg-2 mb-lg-3">
<div class="container">
<div class="main-nav-container">
<ul class="main-nav-segments align-items-center">
<li class="main-nav-segments-item active">
<a href="">Segment 1</a>
<span class="main-nav-item-icon">
<span class="far fa-angle-right fa-lg"></span>
</span>
</li>
<li class="main-nav-segments-item">
<a href="">Segment 2</a>
<span class="main-nav-item-icon">
<span class="far fa-angle-right fa-lg"></span>
</span>
</li>
</ul>
<ul class="main-nav-utils align-items-center">
<li>
<a href="">Util 1</a>
<span class="main-nav-item-icon">
<span class="far fa-angle-right fa-lg"></span>
</span>
</li>
<li>
<a href="" class="d-block d-lg-none">Util 2</a>
<a
href=""
class="d-none d-lg-block btn btn-secondary text-white btn-sm"
>Util 2</a
>
<span class="main-nav-item-icon">
<span class="far fa-angle-right fa-lg"></span>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="main-nav-level-2 mt-lg-3">
<div class="container">
<div
class="main-nav-container px-lg-4 py-lg-2 shadow-sm rounded-4 rounded-top-start-0 bg-white align-items-center"
>
<ul class="main-nav-sections align-items-center">
<li class="main-nav-sections-item main-nav-site-id">
<a href="/">
<img
src=""
alt="Home"
/>
</a>
</li>
<li class="main-nav-sections-item active">
<a href="">Section 1</a>
</li>
<li class="main-nav-sections-item">
<a href="">Section 2</a>
</li>
<li class="main-nav-sections-item">
<a href="">Section 3</a>
</li>
</ul>
<ul class="main-nav-mobile-sections">
<li class="collapsed main-nav-mobile-sections-item active">
<a href="">Section 1</a>
<span class="sub-menu-toggle">
<span class="sub-menu-toggle-icon far fa-angle-down fa-lg"></span>
</span>
<ul class="main-nav-mobile-sections-submenu">
<li>
<a href="">Section 1 Sub Link 1</a>
<span class="main-nav-item-icon">
<span class="far fa-angle-right fa-lg"></span>
</span>
</li>
<li>
<a href="">Section 1 Sub Link 2</a>
<span class="main-nav-item-icon">
<span class="far fa-angle-right fa-lg"></span>
</span>
</li>
</ul>
</li>
<li class="expanded main-nav-mobile-sections-item">
<a href="">Section 2</a>
<span class="sub-menu-toggle">
<span class="sub-menu-toggle-icon far fa-angle-up fa-lg"></span>
</span>
<ul class="open main-nav-mobile-sections-submenu">
<li>
<a href="">Section 2 Sub Link 1</a>
<span class="main-nav-item-icon">
<span class="far fa-angle-right fa-lg"></span>
</span>
</li>
<li>
<a href="">Section 2 Sub Link 2</a>
<span class="main-nav-item-icon">
<span class="far fa-angle-right fa-lg"></span>
</span>
</li>
</ul>
</li>
<li class="main-nav-mobile-sections-item">
<a href="">Section 3</a>
<span class="main-nav-item-icon">
<span class="far fa-angle-right fa-lg"></span>
</span>
</li>
</ul>
<div class="main-nav-search">
<form>
<div class="form-group form-group-sm has-feedback">
<input type="text" class="form-control" placeholder="Search">
<span class="fas fa-search form-control-feedback clickable"></span>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
<nav class="main-nav-mobile">
<div class="container">
<div class="main-nav-container">
<div class="main-nav-site-id">
<a href="/">
<img src="" alt="Home">
</a>
</div>
<div class="main-nav-buttons">
<div class="btn btn-default main-nav-mobile-search-toggle me-1">
<span class="fas fa-search"></span>
</div>
<div class="btn btn-default main-nav-mobile-toggle">Menu</div>
</div>
</div>
<div class="main-nav-mobile-search">
<div class="form-group has-feedback">
<form class="mb-3">
<span class="fas fa-search form-control-feedback clickable"></span>
<input
placeholder="Zoeken"
class="form-control form-text"
type="text"
/>
</form>
</div>
</div>
</div>
</nav>