Skip to content

Sidebar menu

Main navigation for FleekDash

The sidebar is the main navigation for FleekDash.

Structure

  • Header – Logo (or brand image), optional site title, and a settings (gear) popover. The popover can include: sidebar behavior (e.g. bubble style, dark mode toggle, auto-hide), and Reset pinned items or Reset menu (clears cache and reloads menu from backend).

  • Search – A search bar filters menu items by name so you can jump to a section quickly. Clearing search or clicking "Reset Menu" (when no results) reloads the full list.

  • Pinned items – You can pin frequently used items so they appear at the top in a dedicated section. Pinned state is stored in localStorage. Use the pin control on each item (e.g. pin icon) to add or remove.

  • Menu items – Main items (Dashboard, Posts, Media, Users, Settings, etc.) and their submenus. Items come from the WordPress admin menu API; each has a label, icon, href (e.g. #/posts, #/wp/edit.php), and optional children. Clicking an item navigates (FleekDash route or WP iframe route). The selected item is highlighted based on the current URL.

  • User menu – At the bottom of the sidebar: your avatar, name, and a popover with profile, theme, language, notifications, and optionally Menu (opens Menu Management drawer) or Role management.

Behavior

  • Expand / collapse – Submenus expand and collapse when you click the parent. Expanded state is synced with the URL so the right section stays open.

  • Collapsed sidebar – On smaller widths or when "auto-hide" is on, the sidebar can collapse to icons only (or hide off-screen and show on hover). A trigger zone or hamburger reopens it.

  • URL sync – The selected item and expanded parents follow the current hash route. When you navigate (e.g. from Dashboard to Posts), the sidebar updates automatically.

  • Loading – While the menu is loading, a skeleton is shown. Menu data is cached (e.g. React Query and optional backend cache); "Reset Menu" clears cache and forces a fresh load.

Pointer shortcuts (2.6.3+)

Available on every sidebar item (main items, submenus, collapsed popover items). Added in 2.6.3.

Click and hold means pressing the mouse button on a menu item and keeping it down for about 750 ms before release. Same idea as long press on a touchscreen, but with a mouse or trackpad.

ActionResult
Click
Open that screen inside the FleekDash window (same browser tab)
Ctrl/Cmd + click
Open the same FleekDash route in a new tab
Click and hold (~750 ms)
Open that WordPress screen in a new browser tab (not inside the FleekDash window)
Ctrl/Cmd + click and hold
Open native classic wp-admin for that item (fleekdash=off) in a new tab
Middle-click
Same as click and hold: new browser tab, outside the FleekDash window

Use click for everyday in-shell navigation. Use click and hold or middle-click to open full WordPress admin in its own tab while FleekDash stays open in the current tab. Use Ctrl/Cmd + click and hold for classic admin on that menu item only (toolbar Classic mode, but per item).

One browser tab can stay on classic wp-admin while another keeps the FleekDash experience. Each tab keeps its own mode when you switch between them.