Let me guess. You tried generating a sidebar with AI and got a static list of links that looks like it crawled out of 2015 Bootstrap. Or worse—a "collapsible" sidebar that collapses all right... into a broken mess of overlapping icons.
Yeah. Been there. About 25 times last month, actually.
Here's the thing nobody tells you about AI sidebar prompts: the difference between a gorgeous, functional SaaS sidebar and a complete disaster often comes down to six words in your prompt. Get those words wrong, and you're debugging CSS at 2am wondering why your navigation menu thinks it's a slideshow.
Key Takeaways:
- Specify sidebar behavior upfront (fixed, collapsible, floating) or AI guesses wrong
- Always include icon + text states—AI often forgets one or the other
- Mobile drawer menus need separate prompts; desktop sidebars don't translate well
- Include active state styling or your users won't know where they are
In This Article
- Why Your Sidebar Keeps Breaking
- Basic Collapsible Sidebar Prompts
- Fixed vs Floating Sidebar Prompts
- Nested Navigation Prompts
- Icon-Only Collapsed State
- Mobile Drawer Menu Prompts
- Dark Mode Sidebar Prompts
- Pro Tips
- FAQ
Why Your Sidebar Keeps Breaking
Here's the uncomfortable truth: AI tools have a massive bias toward navbars. They've seen thousands of top navbars in their training data, but sidebars? Especially good SaaS sidebars? Those are hidden behind logins in apps most people never screenshot.
So when you ask for "a sidebar," the AI is basically winging it.
The fix is brutal specificity. Where you'd normally write one sentence, write three. Where you'd assume something is obvious, spell it out like you're explaining to someone who's never seen Notion or Linear.
I've been building dashboards and admin panels with AI tools for months now. After a lot of trial and error (and one memorable incident involving a sidebar that only appeared on Tuesdays—don't ask), I've narrowed down what actually works.
Let's get into the prompts.
Basic Collapsible Sidebar Prompts That Actually Collapse
This is where most people start, and where most people fail. The word "collapsible" means different things to different AI models.
Prompt Template #1: The Reliable Collapsible
Create a collapsible sidebar navigation for a SaaS dashboard. Requirements: - Sidebar width: 260px expanded, 64px collapsed - Toggle button at the top (hamburger icon) - Navigation items: Dashboard, Projects, Team, Settings, Analytics - Each item has an icon (use Lucide icons) and text label - On collapse: hide text labels, show only centered icons - Smooth 200ms transition on expand/collapse - Sidebar background: slate-900, text: slate-100 - Active item: purple-500 left border, slate-800 background - Hover: slate-800 background - Fixed position, full viewport height - React component with useState for collapsed state
Want to try this yourself?
This prompt is long for a reason. Every line you skip is a line the AI will guess at—and AI guessing at sidebar behavior is like a toddler guessing which buttons do what on an airplane cockpit.
Prompt Template #2: The Minimal Starter
If you want something simpler to iterate on:
Build a React sidebar component with: - Fixed left sidebar, 240px wide - Logo at top, navigation links below - Icons + text for: Home, Messages, Calendar, Files, Settings - Dark theme (slate-800 background) - Highlighted active state - Use Tailwind CSS
This gets you 80% there. You'll probably need a follow-up prompt for the collapse behavior.
Fixed vs Floating Sidebar Prompts
This is the hill I'll die on: most AI-generated sidebars are "fixed" when they should be "floating" (or vice versa). If you don't specify, you're gambling.
| Type | Use Case | Main Content Behavior |
|---|---|---|
| Fixed | Admin panels, dashboards | Content shifts to accommodate sidebar |
| Floating | Marketing sites, docs | Content stays centered, sidebar overlays |
| Persistent | Complex SaaS apps | Always visible, content adjusts |
Prompt Template #3: Fixed Sidebar (Content Shifts)
Create a fixed sidebar layout for a project management app. Layout structure: - Sidebar: 280px fixed on left, full height, slate-900 background - Main content area: fills remaining width (calc 100vw - 280px) - Main content has its own scrolling, sidebar stays fixed - No overlap between sidebar and content Sidebar contents: - App logo (24px height) with margin below - Section label "WORKSPACE" in uppercase, small text, slate-500 - Nav items: Inbox, My Tasks, Projects, Goals - Divider line - Section label "FAVORITES" - Nav items: Q4 Planning, Marketing Sprint, Design System - Bottom: User avatar + name + settings gear icon
Prompt Template #4: Floating/Overlay Sidebar
Create a floating sidebar component that overlays content. Behavior: - Sidebar hidden by default (off-screen left) - Trigger button in top-left corner of page - On trigger: sidebar slides in from left (300ms ease-out) - Semi-transparent dark overlay covers main content - Click overlay or X button to close - Sidebar width: 300px - Sidebar has higher z-index than content Include: Logo, navigation links, and close button in sidebar header. Style with Tailwind, white background, subtle shadow.
The floating version is what you want for documentation sites or when sidebar content is secondary to the main experience.
Nested Navigation with Expandable Sections
Alright, this is where AI sidebar prompts get tricky. Nested navigation—those expandable/collapsible menu sections you see in complex apps—requires explicit state management instructions.
If you just ask for "nested menu items," you'll get nested items that are always expanded. Or worse, they'll all share the same toggle state.
Prompt Template #5: Expandable Nested Navigation
Build a sidebar with expandable nested navigation sections. Structure: - Main nav items: Dashboard, Products, Orders, Customers, Analytics - "Products" expands to show: All Products, Categories, Inventory - "Orders" expands to show: All Orders, Pending, Shipped, Returns - Each parent item has expand/collapse chevron icon - Only one section expanded at a time (accordion behavior) - Child items indented 16px from parent State management: - Track which section is currently expanded (null means all collapsed) - Clicking a parent toggles its children visibility - Clicking a different parent closes previous and opens new Visual: - Expanded section has subtle background highlight - Chevron rotates 90 degrees when expanded - Smooth height transition for child items appearing
Prompt Template #6: Multi-Level Deep Navigation
For those monster enterprise sidebars:
Create a three-level deep navigation sidebar. Hierarchy example: - Settings (level 1) - Account (level 2) - Profile (level 3) - Security (level 3) - Billing (level 3) - Workspace (level 2) - General (level 3) - Members (level 3) - Reports (level 1) - Sales (level 2) - Traffic (level 2) Behavior: - Level 1 items always visible - Level 2 items show on level 1 click - Level 3 items show on level 2 click - Multiple sections can be expanded simultaneously - Each level has increasing left padding (0, 16px, 32px) - Active item at any level shows accent color
Pro tip: if your navigation is this deep, you might want to reconsider your IA. But if you're stuck with it, this prompt handles it.
Icon-Only Collapsed Sidebar Prompts
This is the pattern you see in Slack, Discord, and basically every modern productivity app. Full sidebar with labels, but it collapses to just icons to give users more screen real estate.
Getting this right requires thinking about two UI states in one component.
Prompt Template #7: Icon-Only Collapse with Tooltips
Build a sidebar that collapses to icon-only mode with tooltips. Expanded state (280px): - Icon + label for each nav item - Labels truncate with ellipsis if too long Collapsed state (64px): - Only icons visible, centered - Hover on icon shows tooltip with item label - Tooltip appears to the right of the icon - Tooltip has slight delay before appearing (300ms) Toggle: - Collapse button at sidebar top (double chevron icon) - Keyboard shortcut: Cmd+B to toggle (show in tooltip) - Remember state in localStorage Nav items: Dashboard, Projects, Messages (show unread count badge), Calendar, Documents, Team, Settings
Want to try this yourself?
That localStorage bit is clutch. Without it, your users collapse the sidebar, refresh the page, and it's back. Nothing screams "amateur hour" like state that doesn't persist.
Mobile Drawer Menu Prompts
Here's what most people get wrong: they try to make their desktop sidebar "responsive." Don't do this. Mobile drawer menus are fundamentally different components.
On desktop, sidebars are spatial navigation—always there, orienting users. On mobile, drawers are modal interruptions—they appear, you act, they disappear.
Prompt Template #8: Mobile Hamburger Drawer
Create a mobile navigation drawer component. Trigger: - Hamburger icon button in top-left of mobile header - Button fixed position, visible on scroll Drawer behavior: - Slides in from left side - Width: 85vw (max 320px) - Full viewport height - Background overlay covers rest of screen (rgba black 50%) - Tap overlay or X button to close - Trap focus inside drawer when open - Close on escape key Contents: - Close X button top-right of drawer - Logo below close button - Full-width nav links: Home, Features, Pricing, Blog, Contact - CTA button at bottom: "Start Free Trial" Animation: - Drawer slides in 250ms ease-out - Overlay fades in simultaneously - Body scroll locked when drawer open
Prompt Template #9: Bottom Sheet Drawer (Modern Mobile)
The bottom sheet pattern has taken over mobile because it's thumb-friendly:
Create a mobile bottom sheet navigation drawer. Trigger: - Tab bar at bottom of screen with 4 icons - Last icon (hamburger/menu) opens bottom sheet Sheet behavior: - Rises from bottom of screen - Two snap points: 50% height (peek) and 90% height (full) - Draggable handle bar at top to resize - Swipe down to close - Starts at 50% height on open Contents in sheet: - Handle bar centered at top - Navigation links as large tap targets (48px height minimum) - Grouped sections with dividers - Account section at bottom with user info
Bottom sheets are having a moment. If you're building anything mobile-first, this pattern is worth mastering.
Dark Mode Sidebar Prompts
Your sidebar needs to work in both light and dark modes. But here's the annoying part: you can't just slap dark: classes on everything and call it a day. Sidebars often have their own dark aesthetic even in light mode apps.
Check out the dark mode implementation guide for the full system, but here's sidebar-specific prompts.
Prompt Template #10: Theme-Aware Sidebar
Create a sidebar that adapts to light/dark mode. Light mode appearance: - Background: white - Border right: 1px gray-200 - Nav text: gray-700 - Active item: blue-50 background, blue-600 text - Hover: gray-100 background Dark mode appearance: - Background: gray-900 - Border right: 1px gray-800 - Nav text: gray-300 - Active item: blue-900/50 background, blue-400 text - Hover: gray-800 background Implementation: - Use Tailwind dark: variants - Respect system preference (prefers-color-scheme) - Also allow manual toggle override - Store preference in localStorage
Prompt Template #11: Always-Dark Sidebar (In Light App)
Some apps keep the sidebar dark regardless of theme (like Slack):
Create a permanently dark sidebar that works in light-themed apps. Sidebar (always dark): - Background: slate-900 - Text: slate-100 - Icons: slate-400 - Hover: slate-800 background - Active: white text, purple-600 left border Main content area (follows theme): - Light mode: white background, gray-900 text - Dark mode: gray-900 background, gray-100 text The sidebar color scheme never changes between themes. Clear visual separation between sidebar and content.
User Profile & Notification Badges
Two quick patterns that every real sidebar needs:
Prompt Template #12: User Profile in Sidebar
Add a user profile section to the sidebar bottom. Profile section: - User avatar (40px circle, initials fallback if no image) - User name (truncate if long) - Role/email below name in smaller text - Dropdown menu on click: Profile, Preferences, Sign Out - Dropdown appears above the profile section (not below) Styling: - Subtle top border separating from nav - Hover state on entire profile block - Dropdown has shadow and matches sidebar theme
Prompt Template #13: Notification Badges
Add notification badges to sidebar navigation items. Badge behavior: - Small circular badge on Messages item showing unread count - Badge shows number (1-99), shows "99+" for higher - Badge positioned top-right of icon - Red background (#ef4444), white text - Badge pulses briefly when count increases - Badge hidden when count is 0 Apply same pattern to: - Notifications item (bell icon) - Tasks item (show incomplete count)
Pro Tips: What Makes Sidebar Prompts Work
After building dozens of sidebars, here's what I've learned:
1. Always specify widths in pixels, not percentages. AI gets weird with percentage-based sidebar widths. 260px is unambiguous. 25% will give you different results every time.
2. Include the collapsed width. If you don't specify what happens when collapsed, the AI assumes you don't want collapse functionality. Even if you explicitly said "collapsible."
3. State management is not optional. Always tell the AI whether you want useState, useReducer, or a state management library. Left to its own devices, it might use CSS-only toggles that break in exciting ways.
4. Mention accessibility. Add "keyboard navigable, proper ARIA labels, focus states" to your prompt. It costs you ten words and saves accessibility headaches later.
5. Think about what's NOT in the sidebar. The main content area needs to know the sidebar exists. Include instructions for how main content should behave—does it shift? Resize? Stay fixed while sidebar overlays?
For more on building complete navigation systems, check out our guide on navbar and footer prompts—sidebar navigation often needs to coordinate with these elements.
Common Mistakes That Break Your Sidebar
Let me save you some debugging time:
| Mistake | What Happens | Fix |
|---|---|---|
| No z-index specified | Sidebar hides behind content | Add "z-index: 50 or higher" |
| Forgot body overflow | Page scrolls behind open drawer | Add "body scroll lock when open" |
| Missing transition | Collapse feels janky/instant | Specify transition duration (200-300ms) |
| No icon fallback | Collapsed state shows nothing | Require icons for all items |
| Single expand state | All nested sections move together | Specify per-section state |
The z-index one bites everyone at least once. There's no shame in it.
Bringing It All Together
If you're building a serious SaaS dashboard or admin panel with AI, you probably need multiple sidebar patterns working together. Here's a combined prompt that covers most cases:
Prompt Template #14: The Everything Sidebar
Create a complete sidebar navigation system for a SaaS app. Desktop (>1024px): - Fixed sidebar, 260px expanded / 64px collapsed - Collapsible with toggle button and Cmd+B shortcut - Nested navigation with accordion sections - User profile at bottom with dropdown - Notification badges on relevant items - Dark themed (slate-900 base) - Active states with left border accent Mobile (<1024px): - No sidebar visible - Hamburger button in header - Full-screen drawer slides from left - Same navigation items as desktop - Larger touch targets (48px min height) - Close button and overlay dismiss Shared: - React component with responsive behavior - Tailwind CSS styling - localStorage persistence for collapsed state - Smooth transitions throughout
This is essentially your sidebar starter kit. Copy it, customize the nav items, and you're 90% of the way to a production sidebar.
If you need the rest of your dashboard, we've got you covered with SaaS dashboard prompts and data table prompts that play nicely with these sidebar patterns.
You Might Also Like
- AI Navbar & Footer Prompts: 40+ Templates - Complete your navigation system with matching headers and footers.
- Build an Admin Panel with AI: Prompts That Work - The full admin panel workflow including layouts, tables, and forms.
- AI Dark Mode Prompts That Actually Work - Make your sidebar (and everything else) theme-aware.
Frequently Asked Questions
What's the ideal sidebar width for SaaS apps?
Most successful SaaS apps use 240-280px for expanded sidebars and 60-72px for collapsed/icon-only mode. Wider than 300px starts eating too much screen real estate; narrower than 200px makes text labels feel cramped.
Should I use a fixed or floating sidebar?
Fixed if your app is primarily about the content in that main area (dashboards, document editors, admin panels). Floating/overlay if the sidebar is secondary or occasional (marketing sites, mobile menus, settings panels). When in doubt, fixed is usually the safer choice for SaaS.
How do I make AI-generated sidebars accessible?
Add this to your prompts: "Include keyboard navigation with arrow keys for menu items, proper ARIA roles (navigation, menuitem), visible focus states, and screen reader announcements for expand/collapse state changes." Most AI tools will handle this well if you ask explicitly.
Why does my collapsed sidebar break on mobile?
Desktop collapsed states (64px icon-only) rarely work on mobile touch targets. The icons are too small and too close together. Always design a separate mobile drawer experience rather than trying to make your desktop sidebar responsive.
How do I handle nested navigation state?
Explicitly tell the AI you want either accordion behavior (one section open at a time) or independent sections (multiple can be open). Then specify whether expanded state should persist in localStorage or reset on page load. These two decisions prevent 90% of nested nav bugs.
Written by the Fardino Team. We build AI tools for frontend developers. Try Fardino free →
<!-- SCHEMA_DATA { "article": { "@type": "Article", "headline": "AI Sidebar Prompts: 30+ Templates That Work", "description": "I built 25 sidebars with AI. Most collapsed into chaos. Here are the 30+ prompts that actually generate clean SaaS navigation.", "author": { "@type": "Organization", "name": "Fardino", "url": "https://fardino.com" }, "datePublished": "2025-12-21", "dateModified": "2025-12-21" }, "faq": [ { "question": "What's the ideal sidebar width for SaaS apps?", "answer": "Most successful SaaS apps use 240-280px for expanded sidebars and 60-72px for collapsed/icon-only mode. Wider than 300px starts eating too much screen real estate; narrower than 200px makes text labels feel cramped." }, { "question": "Should I use a fixed or floating sidebar?", "answer": "Fixed if your app is primarily about the content in that main area (dashboards, document editors, admin panels). Floating/overlay if the sidebar is secondary or occasional (marketing sites, mobile menus, settings panels). When in doubt, fixed is usually the safer choice for SaaS." }, { "question": "How do I make AI-generated sidebars accessible?", "answer": "Add this to your prompts: Include keyboard navigation with arrow keys for menu items, proper ARIA roles (navigation, menuitem), visible focus states, and screen reader announcements for expand/collapse state changes. Most AI tools will handle this well if you ask explicitly." }, { "question": "Why does my collapsed sidebar break on mobile?", "answer": "Desktop collapsed states (64px icon-only) rarely work on mobile touch targets. The icons are too small and too close together. Always design a separate mobile drawer experience rather than trying to make your desktop sidebar responsive." }, { "question": "How do I handle nested navigation state?", "answer": "Explicitly tell the AI you want either accordion behavior (one section open at a time) or independent sections (multiple can be open). Then specify whether expanded state should persist in localStorage or reset on page load. These two decisions prevent 90% of nested nav bugs." } ], "howto": { "name": "How to Create AI-Generated Sidebar Navigation", "steps": [ {"name": "Choose sidebar type", "text": "Decide between fixed, floating, or collapsible sidebar based on your app's needs."}, {"name": "Specify dimensions", "text": "Include exact pixel widths for both expanded (240-280px) and collapsed (60-72px) states."}, {"name": "Define navigation items", "text": "List all nav items with their icons and any nested sub-items."}, {"name": "Add state management", "text": "Specify how collapse state, active items, and nested sections should behave."}, {"name": "Include mobile handling", "text": "Add separate drawer menu prompts for mobile viewports."} ] }, "breadcrumb": ["Home", "Blog", "Guides", "AI Sidebar Prompts: 30+ Templates That Work"] } SCHEMA_DATA -->
