Sidebar Visual Editor
The sidebar visual editor allows you to visually modify icons, labels and links for your Sidebar Navigation Menu. Change menu item order and add groupings which expand and collapse. Menu items can be added to a group by dragging to the right within the visual editor. Note that icons are optional in sidebar menus.
After entering an Initial URL, we will automatically crawl your site and attempt to pull out various navigation menu options. Please select from one of the pre-populated options, or click "Start from scratch".
Next, enter labels and absolute URLs for each menu option. You may also re-order links, add groupings, and specify icons as demonstrated in the grouping section below.
Grouping Menu Items
You may click and drag a menu item under a grouping. You may also add the item to the subLinks array directly in the JSON. When the item is added to the grouping, it will be indented from the left, and appear under the subLinks when looking at the JSON.
Grouping example
Trigger Javascript Commands from Sidebar Menu Options
If you'd prefer your links to trigger various javascript commands, you may wish to specify URLs in the Visual Editor with the following syntax (Option 1). Alternatively, you can set the URL with the JavaScript command directly in the JSON (Option 2).
javascript:alert('test');
[
{
"subLinks": [],
"url": "javascript:alert('test')", // specify javascript commands like this
"label": "Home",
"icon": "fas fa-home"
}
]
[
{
"icon": null,
"isGrouping": true,
"label": "General",
"subLinks": [
{
"isGrouping": false,
"icon": "fa-tachometer",
"subLinks": [],
"url": "javascript:if (typeof jQuery === 'undefined' || jQuery('div#sidebar-view ul.navigation li.dashboard a span').length == 0) window.location = 'https://dashboard.stripe.com/dashboard'; else jQuery('div#sidebar-view ul.navigation li.dashboard a span').click();",
"name": "Dashboard",
"label": "Dashboard"
},
{
"isGrouping": false,
"icon": "fa-users",
"subLinks": [],
"name": "Customers",
"url": "javascript:if (typeof jQuery === 'undefined' || jQuery('div#sidebar-view ul.navigation li.customers a span').length == 0) window.location = 'https://dashboard.stripe.com/customers'; else jQuery('div#sidebar-view ul.navigation li.customers a span').click();",
"label": "Customers"
},
{
"isGrouping": false,
"icon": "fa-users",
"subLinks": [],
"name": "Recipients",
"url": "javascript:if (typeof jQuery === 'undefined' || jQuery('div#sidebar-view ul.navigation li.recipients a span').length == 0) window.location = 'https://dashboard.stripe.com/recipients'; else jQuery('div#sidebar-view ul.navigation li.recipients a span').click();",
"label": "Recipients"
}
]
},
{
"label": "Transactions",
"isGrouping": true,
"subLinks": [
{
"isGrouping": false,
"icon": "fa-credit-card",
"subLinks": [],
"name": "Payments",
"url": "javascript:if (typeof jQuery === 'undefined' || jQuery('div#sidebar-view ul.navigation li.payments a span').length == 0) window.location = 'https://dashboard.stripe.com/payments/overview'; else jQuery('div#sidebar-view ul.navigation li.payments a span').click();",
"label": "Payments"
},
{
"isGrouping": false,
"icon": "fa-download",
"subLinks": [],
"url": "javascript:if (typeof jQuery === 'undefined' || jQuery('div#sidebar-view ul.navigation li.transfers a span').length == 0) window.location = 'https://dashboard.stripe.com/transfers/overview'; else jQuery('div#sidebar-view ul.navigation li.transfers a span').click();",
"name": "Transfers",
"label": "Transfers"
},
{
"label": "Balance",
"icon": "fa-money",
"url": "javascript:if (typeof jQuery === 'undefined' || jQuery('div#sidebar-view ul.navigation li.balance a span').length == 0) window.location = 'https://dashboard.stripe.com/balance/overview'; else jQuery('div#sidebar-view ul.navigation li.balance a span').click();"
}
]
},
{
"icon": null,
"isGrouping": true,
"label": "Subscriptions",
"subLinks": [
{
"isGrouping": false,
"icon": "fa-calendar",
"subLinks": [],
"url": "javascript:if (typeof jQuery === 'undefined' || jQuery('div#sidebar-view ul.navigation li.plans a span').length == 0) window.location = 'https://dashboard.stripe.com/plans'; else jQuery('div#sidebar-view ul.navigation li.plans a span').click();",
"name": "Plans",
"label": "Plans"
},
{
"isGrouping": false,
"icon": "fa-ticket",
"subLinks": [],
"url": "javascript:if (typeof jQuery === 'undefined' || jQuery('div#sidebar-view ul.navigation li.coupons a span').length == 0) window.location = 'https://dashboard.stripe.com/coupons'; else jQuery('div#sidebar-view ul.navigation li.coupons a span').click();",
"name": "Coupons",
"label": "Coupons"
}
]
},
{
"icon": null,
"isGrouping": true,
"label": "Requests",
"subLinks": [
{
"isGrouping": false,
"icon": "fa-list",
"subLinks": [],
"url": "javascript:if (typeof jQuery === 'undefined' || jQuery('div#sidebar-view ul.navigation li.events a span').length == 0) window.location = 'https://dashboard.stripe.com/events'; else jQuery('div#sidebar-view ul.navigation li.events a span').click();",
"name": "Events & Webhooks",
"label": "Events & Webhooks"
},
{
"isGrouping": false,
"icon": "fa-file",
"subLinks": [],
"url": "javascript:if (typeof jQuery === 'undefined' || jQuery('div#sidebar-view ul.navigation li.logs a span').length == 0) window.location = 'https://dashboard.stripe.com/logs/overview'; else jQuery('div#sidebar-view ul.navigation li.logs a span').click();",
"name": "Logs",
"label": "Logs"
}
]
},
{
"url": "javascript:jQuery('a.logout').click();",
"icon": null,
"isGrouping": false,
"label": "Sign Out",
"subLinks": []
}
]
Updated 10 months ago