The mod.documentation_header() method automatically attaches event listeners for all <header class="mod-documentation-header"></header> tags on the page and handles mobile navigation toggle functionality.
Method API
// Using mod(-plus).iife.min.js
window.mod.documentation_header();
// Using mod(-plus).esm.min.js
import { documentation_header } from 'path/to/mod(-plus).esm.min.js';
documentation_header();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.
Documentation Header HTML
<header class="mod-documentation-header">
<div class="mod-documentation-header-container">
<a class="mod-documentation-header-brand" href="#"><img src="/logo.svg" alt="API Documentation" /></a>
<div class="mod-dropdown-button">
<button class="mod-button mod-button-small mod-button-icon-suffixed">v2024-03 <i class="mod-icon-chevron-down"></i></button>
<div class="mod-dropdown">
<ul>
<li class="is-active"><a href="#">v2024-03 <span class="mod-dropdown-action"><i class="mod-icon-check"></i></span></a></li>
<li><a href="#">v2024-02</a></li>
<li><a href="#">v2024-01</a></li>
</ul>
</div>
</div>
<nav class="mod-documentation-header-navigation">
<div class="mod-documentation-header-navigation-items">
<ul>
<li><a href="#">API Reference</a></li>
<li><a href="#">Libraries</a></li>
<li><a href="#">Guides</a></li>
<li><a href="#">Changelog</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div class="mod-documentation-header-navigation-actions">
<ul>
<li class="mod-hide-on-mobile"><a href="#"><i class="mod-icon-brand-github"></i></a></li>
<li class="mod-hide-on-desktop"><a href="#"><i class="mod-icon-search"></i></a></li>
<li class="mod-hide-on-desktop"><a href="#"><i class="mod-icon-ellipsis-vertical"></i></a></li>
</ul>
</div>
</nav>
</div>
</header>Documentation Header JavaScript
window.mod.documentation_header();