EdgePane Documentation

View on GitHub

Reference

EdgePane JavaScript Options

These options let you customize how EdgePane behaves and looks. You can pass them into edgePane.init() to override the defaults.

Option Type Default Description
dropdownMode string "multi" Defines dropdown behavior. "multi" allows multiple open dropdowns, "single" keeps only one open at a time.
sidebarState string "open" Initial state of the sidebar ("open" | "closed").
hoverExpand boolean true Expand sidebar automatically on hover when collapsed.
closeOnClickOutside boolean true Closes the sidebar when clicking outside (mobile/overlay mode).
rememberDropdowns boolean true Remembers open/closed state of dropdowns between page reloads.
sidebarColor string "rgba(225,225,225,1)" Background color of the sidebar.
fontFamily string "'Montserrat', sans-serif" Font family for sidebar text.
sidebarWidth string "16rem" Width of the sidebar when expanded.
textColor string "rgba(70,70,70,1)" Default text color for links. Accepts HEX, RGB, or RGBA.
activeLinkBg string "rgba(180,180,180,1)" Background color for the active link. Accepts HEX, RGB, or RGBA.
activeLinkColor string "rgba(70,70,70,1)" Text color for the active link. Accepts HEX, RGB, or RGBA.
showBrand boolean true Whether to display brand section in the sidebar.
brand.brandLogoSrc string "" Logo image URL in the brand section.
brand.brandName string "" Brand name displayed in the sidebar.
brand.brandTagline string "" Small tagline text under brand name.
onSidebarToggle function function(state){} Callback triggered when sidebar is toggled. Receives state ("open" or "closed").
onDropdownToggle function function(id,isOpen){} Callback triggered when a dropdown toggles. Receives id and isOpen.

Usage Example

EdgePane CSS

edgePane.init({
    sidebarState: "open",
    hoverExpand: true,
    closeOnClickOutside: true,
    dropdownMode: "single",
    rememberDropdowns: true,
    fontFamily: "'Montserrat', sans-serif",
    sidebarWidth: "18rem",
    sidebarColor: "rgba(225,225,225,1)",
    textColor: "rgba(70,70,70,1)",
    activeLinkBg: "rgba(180,180,180,1)",
    activeLinkColor: "rgba(70,70,70,1)",
    showBrand: true,
    onSidebarToggle: function (state) {
        console.log("Sidebar state changed →", state);
        // Example: update a status badge
        document.querySelector("#sidebarStatus").textContent = state;
    },
    onDropdownToggle: function (id, isOpen) {
        console.log("Dropdown toggled →", id, "Open:", isOpen);
        // Example: highlight the dropdown if open
        const el = document.getElementById(id);
        if (el) {
            el.style.backgroundColor = isOpen ? "rgba(0,150,136,0.1)" : "transparent";
        }
    },
});

💡 All options are optional. If not provided, defaults will be used.

Previous Next