Dashboard Navigation Guide
This guide covers every part of the navigation system — the sidebar, the header bar, dashboard tabs, and how they adapt on mobile devices.
Sidebar
The sidebar is the primary way to move between sections of the platform. It sits on the left edge of the screen and contains two groups of links separated by a divider:
- Core items — Dashboard (always first), plus admin-related links when your role permits
- Plugin items — one link per enabled plugin (Chat, Files, Knowledge, Agents, etc.), each opening its full-page interface
Expanding and Collapsing
- Expanded mode (default) — shows icons and labels; the sidebar is 240 px wide
- Collapsed mode — shows icons only; the sidebar shrinks to a narrow strip
- Toggle between modes by clicking the chevron at the top of the sidebar
In collapsed mode, hover over an icon to see a tooltip with the link label.
Logo and Product Name
At the top of the expanded sidebar you see the Booga logo followed by the active product name (e.g. "Booga Financial"). If your tenant has multiple products, use the Product selector in the header to switch.
Bottom Controls
At the bottom of the sidebar you find:
- Theme toggle — switch between light and dark mode
- Container width — cycle through content-area widths for wider or narrower layouts
- Logout — sign out of the platform
Header Bar
The header bar runs along the top of the screen. Its contents depend on whether you are on the main dashboard or a plugin page.
Desktop Header Elements
From left to right:
| Element | Purpose |
|---|---|
| Hamburger icon (mobile only) | Opens the sidebar drawer |
| Company search bar | Search for organizations and resources across the platform |
| Product selector | Switch between products when your tenant has more than one |
| Stack selector | Choose the AI infrastructure stack (hidden for developer tenants) |
| Background task indicator | Shows a spinner while long-running jobs complete |
| User info | Displays your name and opens account actions |
Pin and Unpin
On desktop, you can pin the header so it is always visible, or unpin it so it slides away when you scroll. When unpinned, move your mouse near the top of the page to reveal it again. A small pin icon on the right edge of the header toggles this behavior.
Mobile Header
On mobile the header simplifies: most actions move into an overflow menu (the three-dot icon). A Dashboard Tabs button appears so you can open the tab drawer.
Dashboard Tabs
When you navigate to the main /dashboard route, the content area is organized into tabs. Tabs are defined by your product configuration and may include Overview, Analytics, Reports, Settings, and more.
Desktop Tab Bar
On desktop a vertical tab bar appears as a floating strip to the left of the content area (inside the main panel, separate from the sidebar). Click a tab to switch views.
Managing Tabs
- Reorder — drag a tab to a new position
- Close — click the close icon on optional tabs to hide them
- Add — click the + button to bring back previously closed tabs
- Restore defaults — reset tabs to the product's default order and visibility
Subtabs
Some tabs contain subtabs for finer navigation. For example, Settings may have subtabs for Chat Configuration, Persona Configuration, and more. The active subtab determines the help context so you always see relevant contextual help.
Mobile Tabs
On phones and small tablets, the tab bar moves into a right-edge drawer. Tap the grid icon in the header to open it, then select a tab. The drawer closes automatically when you make a selection.
Plugin Page Navigation
When you click a plugin link in the sidebar (e.g. Chat, Files), the URL changes to /dashboard/{plugin} and the main content area loads that plugin's interface. The sidebar and header remain visible so you can switch to another plugin or return to the dashboard at any time.
Tip: On mobile, use the Back to Dashboard button in the header to return from a plugin page.
Responsive Behavior
| Screen Size | Sidebar | Header | Tabs |
|---|---|---|---|
| Desktop (≥ 960 px) | Permanent, collapsible | Pinnable / auto-hide | Vertical strip |
| Tablet / Mobile (< 960 px) | Slide-out drawer | Always visible, overflow menu | Right-edge drawer |
On mobile:
- Tap the hamburger menu to open the sidebar drawer
- Tap the grid icon to open the tab drawer
- The sidebar and tab drawers hide the header while open to maximize space
Quick Reference
| Action | How |
|---|---|
| Open sidebar | Click hamburger (mobile) or it is always visible (desktop) |
| Collapse sidebar | Click the chevron at the top of the sidebar |
| Switch product | Use the Product selector in the header |
| Switch stack | Use the Stack selector in the header |
| Toggle dark mode | Click the moon/sun icon at the bottom of the sidebar |
| Change content width | Use the width arrows at the bottom of the sidebar |
| Pin / unpin header | Click the pin icon on the right edge of the header |
| Open help | Click the floating ? button |
Related Topics
⏱️ Read time: 10 minutes | 📊 Difficulty: beginner | 🔄 Last updated: 2026-03-28