[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fvertical-navigation":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":335,"links":336,"dates":385},"\u002Fexamples\u002Fcomponents\u002Fvertical-navigation","collection","components",true,{"example_count":9,"app_count":10},423,275,{"id":12,"title":13,"description":14},209,"Vertical navigation","See how interfaces organize destinations in a sidebar. Explore how navigation groups, icons, and selected states relate to the current page and the product structure.",{"title":16,"description":17,"og_image":18},"Vertical navigation UI examples - Nicelydone","Vertical navigation UI design examples from SaaS apps. See how interfaces organize destinations in a sidebar. Explore how navigation groups, icons, and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Feef4cdbb-1915-4553-8335-fa5827e1728a.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Vertical navigation UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Vertical navigation UI design examples from SaaS apps. See how interfaces organize destinations in a sidebar. Explore how navigation groups, icons, and selected states relate to the current page and the product…",[32],{"title":33,"description":14,"links":34},"About Vertical navigation",[],[36],"423 UI components",[38,68,97,123,150,167,193,219,241,262,292,314],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"6f1d8524-723b-43b1-a106-a2f1416d2cd4","Alloy UI component","A clean user interface featuring a sidebar navigation, a search bar, and a call-to-action card with onboarding steps.","\u002Fexamples\u002Fapps\u002Falloy\u002Fcomponents",632,1831,"UI component from Alloy","component",[48],{"id":12,"title":13,"slug":49},"vertical-navigation",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"alloy","Alloy","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F13110ce9-b228-4dcd-99db-7c3272fae2ce.png","AI prototyping tool for product managers",[56,60,64],{"id":57,"title":58,"slug":59},48,"Developer Tools","developer-tools",{"id":61,"title":62,"slug":63},80,"Artificial Intelligence","artificial-intelligence",{"id":65,"title":66,"slug":67},86,"Product management","product-management",{"uuid":69,"title":70,"description":71,"canonical_path":72,"image":73,"width":74,"height":75,"image_alt":76,"kind":46,"categories":77,"app":79},"ee0fef7a-4b40-40f7-9f78-37507b5a3bf5","Flask UI component","A dark mode sidebar navigation menu displaying a logo, user account information, and primary navigation links.","\u002Fexamples\u002Fapps\u002Fflask\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2ce6bd65-5321-4d4f-8b8a-c60d801381e2.png",593,1846,"UI component from Flask",[78],{"id":12,"title":13,"slug":49},{"slug":80,"title":81,"logo":82,"baseline":83,"categories":84},"flask","Flask","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffb0bfd95-becd-46ec-9917-a82dd6bbe601.png","Give detailed video feedback in minutes without typing comments",[85,89,93],{"id":86,"title":87,"slug":88},100,"Video","video",{"id":90,"title":91,"slug":92},23,"Collaboration","collaboration",{"id":94,"title":95,"slug":96},35,"Feedback","feedback",{"uuid":98,"title":99,"description":100,"canonical_path":101,"image":102,"width":103,"height":104,"image_alt":105,"kind":46,"categories":106,"app":108},"7c839728-a517-43fa-8315-f24c8922bd10","Origin Financial UI component","A sidebar navigation menu for a financial management application.","\u002Fexamples\u002Fapps\u002Fuseorigin\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4261a25e-13cc-4026-9184-a69fd81866f7.png",449,1758,"UI component from Origin Financial",[107],{"id":12,"title":13,"slug":49},{"slug":109,"title":110,"logo":111,"baseline":112,"categories":113},"useorigin","Origin Financial","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15075243-f5d2-4573-9045-2e4c07c4ce88.png","All-in-one financial platform for budgeting, investing, and AI-powered planning",[114,118,122],{"id":115,"title":116,"slug":117},36,"Finance","finance",{"id":119,"title":120,"slug":121},56,"Accounting","accounting",{"id":61,"title":62,"slug":63},{"uuid":124,"title":125,"description":126,"canonical_path":127,"image":128,"width":129,"height":130,"image_alt":131,"kind":46,"categories":132,"app":134},"006563f0-504c-4dbe-803a-729e000b01a1","Zaro UI component","A vertical navigation sidebar for a SaaS application, featuring workspace management, control panel settings, and session details.","\u002Fexamples\u002Fapps\u002Fzaro\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb367c2a4-6328-46d5-b549-6043816947c9.png",724,1858,"UI component from Zaro",[133],{"id":12,"title":13,"slug":49},{"slug":135,"title":136,"logo":137,"baseline":138,"categories":139},"zaro","Zaro","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdcfeb606-2235-48bf-83e3-948e2ac20719.png","AI workspace with agents and apps for business automation",[140,141,142,146],{"id":90,"title":91,"slug":92},{"id":61,"title":62,"slug":63},{"id":143,"title":144,"slug":145},22,"Knowledge Management","knowledge-management",{"id":147,"title":148,"slug":149},46,"Analytics","analytics",{"uuid":151,"title":152,"description":153,"canonical_path":154,"image":155,"width":156,"height":104,"image_alt":157,"kind":46,"categories":158,"app":160},"1295e1e4-1cb8-4bc3-a62b-089197df9362","Riverside UI component","A vertical navigation sidebar with icons and text labels, featuring an active state and a progress indicator.","\u002Fexamples\u002Fapps\u002Friverside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0278b700-b449-4ad2-bd82-5f066ef619eb.png",183,"UI component from Riverside",[159],{"id":12,"title":13,"slug":49},{"slug":161,"title":162,"logo":163,"baseline":164,"categories":165},"riverside","Riverside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcc94468d-7b59-49b7-b969-3aee258a2348.png","HD podcast and video recording and editing software",[166],{"id":86,"title":87,"slug":88},{"uuid":168,"title":169,"description":170,"canonical_path":171,"image":172,"width":173,"height":104,"image_alt":174,"kind":46,"categories":175,"app":177},"7f5e8f05-10e7-4bbe-a1d6-e1d96a4000d6","Axiom UI component","A sidebar navigation panel displaying dataset categories and filters with counts.","\u002Fexamples\u002Fapps\u002Faxiom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F31015964-4e67-4e87-bb32-8106c7c4e3f0.png",435,"UI component from Axiom",[176],{"id":12,"title":13,"slug":49},{"slug":178,"title":179,"logo":180,"baseline":181,"categories":182},"axiom","Axiom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F22cc0be3-ce3f-442a-903f-4da9befc54cd.png","The modern machine data platform.",[183,184,188,192],{"id":147,"title":148,"slug":149},{"id":185,"title":186,"slug":187},57,"Big data","big-data",{"id":189,"title":190,"slug":191},16,"Monitoring","monitoring",{"id":57,"title":58,"slug":59},{"uuid":194,"title":195,"description":196,"canonical_path":197,"image":198,"width":199,"height":104,"image_alt":200,"kind":46,"categories":201,"app":203},"a5c94858-b4ce-4d00-bd8e-b9bbd27e9b7c","Extend UI component","A sidebar navigation for a web application, featuring main sections, activity logs, settings, and help resources, with user account information at the bottom.","\u002Fexamples\u002Fapps\u002Fextend\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd311795a-945c-4db1-9d17-62488985906e.png",395,"UI component from Extend",[202],{"id":12,"title":13,"slug":49},{"slug":204,"title":205,"logo":206,"baseline":207,"categories":208},"extend","Extend","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F15f6030e-2d0f-4381-9480-44902ed125e2.png","Document processing infrastructure for AI agents",[209,213,214,218],{"id":210,"title":211,"slug":212},77,"Machine learning","machine-learning",{"id":61,"title":62,"slug":63},{"id":215,"title":216,"slug":217},37,"Developer APIs","developer-apis",{"id":57,"title":58,"slug":59},{"uuid":220,"title":221,"description":222,"canonical_path":223,"image":224,"width":225,"height":104,"image_alt":226,"kind":46,"categories":227,"app":229},"6e632c3b-ebce-485c-abeb-a2ce3d9b8b0d","Lithic UI component","A vertical sidebar navigation menu for a web application.","\u002Fexamples\u002Fapps\u002Flithic\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe0835d78-4944-4589-9ccd-d2f90ff6a4e0.png",495,"UI component from Lithic",[228],{"id":12,"title":13,"slug":49},{"slug":230,"title":231,"logo":232,"baseline":233,"categories":234},"lithic","Lithic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F29eef334-64df-456e-bb65-9d93c535b644.png","Programmable card issuing and money movement platform",[235,236,240],{"id":115,"title":116,"slug":117},{"id":237,"title":238,"slug":239},39,"Payments","payments",{"id":215,"title":216,"slug":217},{"uuid":242,"title":243,"description":244,"canonical_path":245,"image":246,"width":247,"height":104,"image_alt":248,"kind":46,"categories":249,"app":251},"27806c30-cda1-44a7-9d19-ead0fac9a7ac","Dock UI component","A sidebar navigation menu for a SaaS application, featuring categorized links for collaboration, content, learning, and administration, along with an upgrade call to action and help links.","\u002Fexamples\u002Fapps\u002Fdock\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3af80898-054e-497b-bcc7-63b0c7b0b03a.png",422,"UI component from Dock",[250],{"id":12,"title":13,"slug":49},{"slug":252,"title":253,"logo":254,"baseline":255,"categories":256},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[257,258],{"id":90,"title":91,"slug":92},{"id":259,"title":260,"slug":261},29,"Task Management","task-management",{"uuid":263,"title":264,"description":265,"canonical_path":266,"image":267,"width":268,"height":269,"image_alt":270,"kind":46,"categories":271,"app":273},"750adef9-8a99-472a-b9ae-e734b3095010","Bloom UI component","A sidebar navigation menu displaying project settings options with a selected item.","\u002Fexamples\u002Fapps\u002Fbloom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F921b695d-2330-4ba9-b27a-22cbf19fb4c7.png",522,640,"UI component from Bloom",[272],{"id":12,"title":13,"slug":49},{"slug":274,"title":275,"logo":276,"baseline":277,"categories":278},"bloom","Bloom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F62461f0d-4182-4996-ae7b-cbc623f6ee3f.png","A new way to build commerce",[279,280,284,288],{"id":61,"title":62,"slug":63},{"id":281,"title":282,"slug":283},3,"Shopping","shopping",{"id":285,"title":286,"slug":287},7,"Web Development","web-development",{"id":289,"title":290,"slug":291},96,"No code","no-code",{"uuid":293,"title":294,"description":295,"canonical_path":296,"image":297,"width":298,"height":104,"image_alt":299,"kind":46,"categories":300,"app":302},"1cf23387-d69d-412f-92a8-5e42836684da","Appwrite UI component","A sidebar navigation for a development platform, displaying project overview, build services, deployment options, and settings, with a progress indicator for project setup.","\u002Fexamples\u002Fapps\u002Fappwrite\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd4cccd56-c064-4be3-81b6-87feee71628a.png",530,"UI component from Appwrite",[301],{"id":12,"title":13,"slug":49},{"slug":303,"title":304,"logo":305,"baseline":306,"categories":307},"appwrite","Appwrite","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Faba3119b-0179-4fbd-b6d0-2bb3a0bfda07.png","Open-source backend platform for building and scaling apps with Auth, Database, Storage, Functions, Realtime, Messaging, and Sites.",[308,309,310],{"id":57,"title":58,"slug":59},{"id":215,"title":216,"slug":217},{"id":311,"title":312,"slug":313},45,"Open Source","open-source",{"uuid":315,"title":316,"canonical_path":317,"image":318,"width":319,"height":104,"image_alt":320,"kind":46,"categories":321,"app":323},"ac025338-0c36-4a17-b125-fed104d93cad","Voiceflow UI component","\u002Fexamples\u002Fapps\u002Fvoiceflow\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb58ecf7f-7fe9-4545-a9c6-cf1d7583829f.png",517,"UI component from Voiceflow",[322],{"id":12,"title":13,"slug":49},{"slug":324,"title":325,"logo":326,"baseline":327,"categories":328},"voiceflow","Voiceflow","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fvoiceflow-ba430e40.png","Build amazing conversational assistants",[329,330,334],{"id":61,"title":62,"slug":63},{"id":331,"title":332,"slug":333},47,"Customer Service","customer-service",{"id":289,"title":290,"slug":291},[],[337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382],{"label":338,"to":339},"Empty State","\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":341,"to":342},"Dashboard","\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":344,"to":345},"Getting Started","\u002Fexamples\u002Fscreens\u002Fgetting-started",{"label":347,"to":348},"Add & Create","\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":350,"to":351},"Alloy design examples","\u002Fexamples\u002Fapps\u002Falloy",{"label":353,"to":354},"Flask design examples","\u002Fexamples\u002Fapps\u002Fflask",{"label":356,"to":357},"Origin Financial design examples","\u002Fexamples\u002Fapps\u002Fuseorigin",{"label":359,"to":360},"Zaro design examples","\u002Fexamples\u002Fapps\u002Fzaro",{"label":362,"to":363},"Riverside design examples","\u002Fexamples\u002Fapps\u002Friverside",{"label":365,"to":366},"Axiom design examples","\u002Fexamples\u002Fapps\u002Faxiom",{"label":368,"to":369},"Extend design examples","\u002Fexamples\u002Fapps\u002Fextend",{"label":371,"to":372},"Lithic design examples","\u002Fexamples\u002Fapps\u002Flithic",{"label":374,"to":375},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":377,"to":378},"Bloom design examples","\u002Fexamples\u002Fapps\u002Fbloom",{"label":380,"to":381},"Appwrite design examples","\u002Fexamples\u002Fapps\u002Fappwrite",{"label":383,"to":384},"Voiceflow design examples","\u002Fexamples\u002Fapps\u002Fvoiceflow",{"published_at":386,"updated_at":387},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]