The mod.navigation_bar() method automatically attaches event listeners for a <nav class="mod-navigation-bar-(<style>)"></nav> tag and handles interaction events for the element. This method supports multiple navigation bar styles including marketing-style-1, marketing-style-2, and app-style-1.
Method API
// Using mod(-plus).iife.min.js
window.mod.navigation_bar(style: string);
// Using mod(-plus).esm.min.js
import { navigation_bar } from 'path/to/mod(-plus).esm.min.js';
navigation_bar(style: string);Usage Examples
Use the following usage examples to guide your implementation.
Examples Use Global JavaScript
For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.
Marketing Style #1
Marketing Style 1 HTML
<nav class="mod-navigation-bar-marketing-style-1">
<a class="mod-navigation-bar-logo" href="#"><img src="/mod_logo.svg" alt="Mod" /></a>
<div class="mod-navigation-bar-items">
<ul>
<li>
<a href="#">Platform <i class="mod-icon-chevron-right"></i></a>
<div class="mod-navigation-bar-dropdown">
<div class="mod-navigation-bar-dropdown-items">
<section class="mod-navigation-bar-dropdown-items-section">
<ul class="mod-navigation-items-list">
<li>
<a href="#">
<div class="navigation-item-icon">
<i class="mod-icon-activity"></i>
</div>
<div class="navigation-item-content">
<p class="navigation-item-title">Website Monitoring</p>
<p class="navigation-item-description">Monitor any website. Check any user flow.</p>
</div>
</a>
</li>
</ul>
</section>
</div>
</div>
</li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Community</a></li>
</ul>
<div class="mod-navigation-bar-actions">
<button class="mod-button">Log In</button>
<button class="mod-button mod-button-brand">Sign Up</button>
</div>
</div>
<i class="mod-icon-menu"></i>
</nav>Marketing Style 1 JavaScript
window.mod.navigation_bar('marketing-style-1');App Style #1
App Style 1 HTML
<nav class="mod-navigation-bar-app-style-1">
<div class="mod-navigation-bar-container">
<a class="mod-navigation-bar-logo" href="#"><img src="/mod_logo.svg" alt="Mod" /></a>
<div class="mod-navigation-bar-items">
<ul>
<li>
<a href="#">Platform <i class="mod-icon-chevron-right"></i></a>
<div class="mod-navigation-bar-dropdown">
<div class="mod-navigation-bar-dropdown-items">
<section class="mod-navigation-bar-dropdown-items-section">
<ul class="mod-navigation-items-list">
<li>
<a href="#">
<div class="navigation-item-icon">
<i class="mod-icon-activity"></i>
</div>
<div class="navigation-item-content">
<p class="navigation-item-title">Website Monitoring</p>
<p class="navigation-item-description">Monitor any website. Check any user flow.</p>
</div>
</a>
</li>
</ul>
</section>
</div>
</div>
</li>
<li><a href="#">Pricing</a></li>
</ul>
</div>
<i class="mod-icon-menu"></i>
</div>
</nav>App Style 1 JavaScript
window.mod.navigation_bar('app-style-1');Marketing Style #2
Marketing Style 2 HTML
<nav class="mod-navigation-bar-marketing-style-2">
<a class="mod-navigation-bar-logo" href="#"><img src="/mod_logo.svg" alt="Mod" /></a>
<div class="mod-navigation-bar-items">
<ul>
<li>
<a href="#">Platform <i class="mod-icon-chevron-right"></i></a>
<div class="mod-navigation-bar-dropdown">
<div class="mod-navigation-bar-dropdown-items">
<section class="mod-navigation-bar-dropdown-items-section">
<ul class="mod-navigation-items-list">
<li>
<a href="#">
<div class="navigation-item-icon">
<i class="mod-icon-activity"></i>
</div>
<div class="navigation-item-content">
<p class="navigation-item-title">Website Monitoring</p>
<p class="navigation-item-description">Monitor any website. Check any user flow.</p>
</div>
</a>
</li>
</ul>
</section>
</div>
</div>
</li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Community</a></li>
</ul>
<div class="mod-navigation-bar-actions">
<button class="mod-button mod-button-rounded">Log In</button>
<button class="mod-button mod-button-brand mod-button-rounded">Sign Up</button>
</div>
</div>
<i class="mod-icon-menu"></i>
</nav>Marketing Style 2 JavaScript
window.mod.navigation_bar('marketing-style-2');API
- style string required
-
A string matching the value of a navigation bar style class. Supported values:
marketing-style-1,marketing-style-2,app-style-1.