EdgePane Documentation

View on GitHub

Usage

How to Use EdgePane

Once you’ve included the required CSS and JavaScript files (via CDN or local setup), you can set up EdgePane in your project.

Note: The examples in this documentation use Bootstrap Icons for sidebar and menu icons. You may replace them with any icon library of your choice.

Main Navigation

<!-- Sidebar -->
<nav class="egp-sidebar bg-neutral-800" role="navigation">
  <!-- content here -->
</nav>

The main container for the EdgePane sidebar navigation.

Sidebar Header

<!-- Sidebar Header -->
<div class="egp-sidebar-header">
  <img src="./assets/images/logo-d.png" alt="Logo" class="egp-sidebar-logo" />
  <div class="egp-sidebar-title">
    <p class="egp-sidebar-brand-name">EdgePane</p>
    <p class="egp-sidebar-brand-tagline">Pane Perfect Experience</p>
  </div>
</div>

Branding area with logo, product name, and tagline.

Sidebar Menu

<!-- Sidebar Menu -->
<ul class="egp-sidebar-menu">
  <!-- items here -->
</ul>

Wrapper list for all sidebar links, headings, and dropdowns.

Section Headings

<!-- Section Heading -->
<li class="egp-sidebar-section-heading" data-section-heading="MAIN NAVIGATION"></li>

Divides menu into labeled sections like “Main Navigation” or “Settings”.

Sidebar Links

<!-- Sidebar Link -->
<li>
  <a href="#" class="egp-sidebar-link">
    <span class="egp-sidebar-link-icon"><i class="bi bi-house"></i></span>
    <span class="egp-sidebar-link-text">Dashboard</span>
  </a>
</li>

A single clickable link with an icon and text.

Sidebar Dropdowns

<!-- Sidebar Dropdown -->
<li class="egp-has-dropdown">
  <a href="#" class="egp-sidebar-link">
    <span class="egp-sidebar-link-icon"><i class="bi bi-folder"></i></span>
    <span class="egp-sidebar-link-text">Projects</span>
    <span class="egp-sidebar-dropdown-icon"><i class="bi bi-chevron-down"></i></span>
  </a>
  <ul class="egp-sidebar-dropdown-menu">
    <li><a href="#">Project A</a></li>
    <li><a href="#">Project B</a></li>
  </ul>
</li>

Expandable dropdown menu with nested links.

Toggle Button

<!-- Toggle Button -->
<button class="egp-sidebar-toggle">☰</button>

Hamburger button to open and close the sidebar.

Overlay

<!-- Overlay -->
<div class="egp-sidebar-overlay"></div>

Dimmed background layer when sidebar is open (for mobile view).

Full Sidebar Example

<!-- Sidebar -->
<nav class="egp-sidebar bg-neutral-800" role="navigation">

  <!-- Sidebar Header -->
  <div class="egp-sidebar-header">
    <img src="./assets/images/logo-d.png" alt="Logo" class="egp-sidebar-logo" />
    <div class="egp-sidebar-title">
      <p class="egp-sidebar-brand-name">EdgePane</p>
      <p class="egp-sidebar-brand-tagline">Pane Perfect Experience</p>
    </div>
  </div>

  <!-- Sidebar Menu -->
  <ul class="egp-sidebar-menu">
    <li class="egp-sidebar-section-heading" data-section-heading="MAIN NAVIGATION"></li>
    <li>
      <a href="#" class="egp-sidebar-link">
        <span class="egp-sidebar-link-icon"><i class="bi bi-house"></i></span>
        <span class="egp-sidebar-link-text">Dashboard</span>
      </a>
    </li>
    <li>
      <a href="#" class="egp-sidebar-link">
        <span class="egp-sidebar-link-icon"><i class="bi bi-gear"></i></span>
        <span class="egp-sidebar-link-text">Settings</span>
      </a>
    </li>
    <li class="egp-has-dropdown">
      <a href="#" class="egp-sidebar-link">
        <span class="egp-sidebar-link-icon"><i class="bi bi-folder"></i></span>
        <span class="egp-sidebar-link-text">Projects</span>
        <span class="egp-sidebar-dropdown-icon"><i class="bi bi-chevron-down"></i></span>
      </a>
      <ul class="egp-sidebar-dropdown-menu">
        <li><a href="#">Project A</a></li>
        <li><a href="#">Project B</a></li>
      </ul>
    </li>
  </ul>
</nav>

<!-- Main Content -->
<div class="egp-main-content">
  <button class="egp-sidebar-toggle">☰</button>
  <h1>Welcome</h1>
</div>

<!-- Overlay -->
<div class="egp-sidebar-overlay"></div>

Complete working example of EdgePane with header, menu, links, dropdowns, toggle button, and overlay. You can copy and paste it directly into your code to get started quickly.

Previous Next