The mod.documentation_sidebar() method automatically attaches event listeners for all <aside class="mod-documentation-sidebar"></aside> tags on the page and handles mobile navigation toggle functionality.
Method API
// Using mod(-plus).iife.min.js
window.mod.documentation_sidebar();
// Using mod(-plus).esm.min.js
import { documentation_sidebar } from 'path/to/mod(-plus).esm.min.js';
documentation_sidebar();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 Sidebar HTML
<aside class="mod-documentation-sidebar">
<div class="mod-documentation-sidebar-mobile-navigation">
<i class="mod-icon-menu"></i>
<div class="mod-breadcrumbs">
<ol>
<li><a href="#">API Reference</a></li>
<li><a href="#">Contacts</a></li>
<li>Create Contact</li>
</ol>
</div>
</div>
<div class="mod-documentation-sidebar-content">
<div class="mod-search-input">
<i class="mod-icon-search"></i>
<input type="text" class="mod-input" name="search" placeholder="Search the docs..." />
</div>
<section class="mod-documentation-sidebar-featured-items">
<ul>
<li class="mod-documentation-sidebar-featured-item is-active">
<a href="#">
<div class="mod-documentation-sidebar-featured-item-icon">
<i class="mod-icon-rocket"></i>
</div>
Quickstart Guide
<span class="mod-badge mod-badge-brand">New</span>
</a>
</li>
<li class="mod-documentation-sidebar-featured-item">
<a href="#">
<div class="mod-documentation-sidebar-featured-item-icon">
<i class="mod-icon-key"></i>
</div>
Authentication
</a>
</li>
</ul>
</section>
<section class="mod-documentation-sidebar-primary-items">
<ul>
<li>
<h5>Core Concepts</h5>
<ul>
<li><a href="#">API Overview</a></li>
<li><a href="#">Webhooks</a></li>
<li><a href="#">Error Handling</a></li>
<li><a href="#">Pagination</a></li>
</ul>
</li>
<li>
<h5>Contacts</h5>
<ul>
<li><a href="#">List Contacts</a></li>
<li class="is-active"><a href="#">Create Contact</a></li>
<li><a href="#">Update Contact</a></li>
<li><a href="#">Delete Contact</a></li>
</ul>
</li>
</ul>
</section>
</div>
</aside>Documentation Sidebar JavaScript
window.mod.documentation_sidebar();