Reference
EdgePane CSS Classes
This page lists all the custom CSS classes available in EdgePane, grouped by category.
These classes are designed to provide structure, layout, and styling for the sidebar and main content
area.
Note: Utility classes from TailwindCSS and icons from
Bootstrap Icons are also used throughout the examples.
Sidebar Structure
| Class |
Description |
| .egp-sidebar |
Main sidebar container, fixed to the left. |
| .egp-sidebar-header |
Header area inside the sidebar (logo, brand, tagline). |
| .egp-sidebar-logo |
Logo image inside the sidebar header. |
| .egp-sidebar-title |
Container for brand name + tagline. |
Sidebar Menu
| Class |
Description |
| .egp-sidebar-menu |
The main menu list inside the sidebar. |
| .egp-sidebar-section-heading |
Label divider for grouping menu links. |
| .egp-sidebar-link |
Base class for each navigation link. |
| .egp-sidebar-link-icon |
Icon wrapper for a link (Bootstrap Icons recommended). |
| .egp-sidebar-link-text |
Text label for the sidebar link. |
| .egp-sidebar-dropdown |
A dropdown menu inside the sidebar. |
| .egp-sidebar-dropdown-toggle |
Clickable parent link that expands/collapses a dropdown. |
| .egp-sidebar-dropdown-menu |
Nested list inside a dropdown. |
Main Content
| Class |
Description |
| .egp-main-content |
Wrapper for the page’s main content (sits next to the sidebar). |
Toggle Button
| Class |
Description |
| .egp-sidebar-toggle |
Button used to open/close the sidebar. |
Overlay
| Class |
Description |
| .egp-overlay |
Fullscreen background overlay, shown when sidebar is open in mobile
view. |
State Classes
| Class |
Description |
| .active |
Marks the currently active link. |
| .open |
Marks a dropdown as expanded. |
| .collapsed |
Marks the sidebar when it’s collapsed (narrow mode). |
💡 You can copy and paste these classes directly into your project.
Combine them with TailwindCSS utilities for further customization.
