Design a sleek and intuitive side navigation menu for a field service management web app. The selected menu item should highlight in purple. Include dropdowns for submenus and group related items under clear parent categories.
Price Book
Submenus: Product & Services, Default Cost Markup
Users & Access Control
Submenus: Users, Roles & Permissions
Inventory & Assets
Submenus: Suppliers, Asset Setup (expandable)
Nested: Vehicles, Tools & Equipment
Integrations
Clicking this should not open a new submenu.
Instead, display QuickBooks as an icon + CTA in the main view.
Subscription & Billing
Submenus: Current Month, Swivl Features, Invoice History, Shop Hardware
Settings
Submenus:
My Profile (expandable): Profile, Work Details
Company Profile
Communication (expandable): SMS, Email
AI Receptionist
Tags & Zones (expandable): Tags, Zones
Style: Modern and clean UI. Use icons for all top-level menu items.
Add a search bar at the top of the menu to help users find settings.
Place info icons (tooltip on hover) next to each submenu item for quick explanations"
I'll create a sleek and intuitive side navigation menu for your field service management web app using the shadcn sidebar components1. The design will feature purple highlighting, collapsible submenus, and a modern interface with icons and tooltips.
I've created a sleek and intuitive side navigation menu for your field service management web app with the following key features:
Key Features
- Purple Highlighting: Active menu items are highlighted with a purple background and border accent
- Collapsible Submenus: All parent categories expand/collapse to show their submenu items
- Nested Navigation: Asset Setup and other expandable items support multiple levels of nesting
- Search Functionality: A search bar at the top helps users quickly find specific settings
- Info Tooltips: Each submenu item has an info icon that shows helpful explanations on hover
- Modern Icons: All menu items use appropriate Lucide React icons for visual clarity
Special Handling
- Integrations: Clicking this item doesn't open a submenu but highlights it as active (ready for your QuickBooks integration display)
- Responsive Design: The sidebar collapses on mobile devices and includes proper touch targets
- Accessibility: Proper ARIA labels, keyboard navigation, and screen reader support
Menu Structure
The navigation follows your exact specifications with:
- Price Book (Product & Services, Default Cost Markup)
- Users & Access Control (Users, Roles & Permissions)
- Inventory & Assets (Suppliers, Asset Setup → Vehicles, Tools & Equipment)
- Integrations (special handling for QuickBooks display)
- Subscription & Billing (Current Month, Swivl Features, Invoice History, Shop Hardware)
- Settings (My Profile → Profile/Work Details, Company Profile, Communication → SMS/Email, AI Receptionist, Tags & Zones → Tags/Zones)
The design uses a clean, modern aesthetic with proper spacing, typography, and the purple accent color you requested for active states.
Sources
I'll remove the info icons and search bar from the sidebar to create a cleaner interface.
The sidebar now has a cleaner, more streamlined appearance without the search functionality and info tooltips, while maintaining all the core navigation features and purple highlighting for active items.