[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fhorizontal-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":336,"links":337,"dates":386},"\u002Fexamples\u002Fcomponents\u002Fhorizontal-navigation","collection","components",true,{"example_count":9,"app_count":10},195,148,{"id":12,"title":13,"description":14},240,"Horizontal navigation","See how interfaces arrange primary or section links across a row. Explore how labels, active states, and secondary menus show the available destinations.",{"title":16,"description":17,"og_image":18},"Horizontal navigation UI examples - Nicelydone","Horizontal navigation UI design examples from SaaS apps. See how interfaces arrange primary or section links across a row. Explore how labels, active…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe9ca5d10-8d73-487b-879d-46c63dafbb49.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Horizontal navigation UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Horizontal navigation UI design examples from SaaS apps. See how interfaces arrange primary or section links across a row. Explore how labels, active states, and secondary menus show the available destinations.",[32],{"title":33,"description":14,"links":34},"About Horizontal navigation",[],[36],"195 UI components",[38,68,101,133,157,183,204,233,251,270,290,309],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"4e102321-a64a-4e95-a7eb-d275ff563dbb","Flask UI component","A top navigation bar displaying a file path, version number, and action buttons for viewing and sharing.","\u002Fexamples\u002Fapps\u002Fflask\u002Fcomponents",3218,331,"UI component from Flask","component",[48],{"id":12,"title":13,"slug":49},"horizontal-navigation",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"flask","Flask","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffb0bfd95-becd-46ec-9917-a82dd6bbe601.png","Give detailed video feedback in minutes without typing comments",[56,60,64],{"id":57,"title":58,"slug":59},100,"Video","video",{"id":61,"title":62,"slug":63},23,"Collaboration","collaboration",{"id":65,"title":66,"slug":67},35,"Feedback","feedback",{"uuid":69,"title":70,"description":71,"canonical_path":72,"image":73,"width":74,"height":75,"image_alt":76,"kind":46,"categories":77,"app":79},"c771ec2b-12c1-4fa3-a25a-37b0db730e4e","Airbnb UI component","A header bar with a brand logo, a call to action, and a user menu.","\u002Fexamples\u002Fapps\u002Fairbnb\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9513fc05-5be3-490a-8104-181252a9156e.png",3024,197,"UI component from Airbnb",[78],{"id":12,"title":13,"slug":49},{"slug":80,"title":81,"logo":82,"baseline":83,"categories":84},"airbnb","Airbnb","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fairbnb-2b8cc5d2.png","Book unique homes and experience a city like a local",[85,89,93,97],{"id":86,"title":87,"slug":88},5,"Travel","travel",{"id":90,"title":91,"slug":92},12,"Hospitality","hospitality",{"id":94,"title":95,"slug":96},17,"Peer to peer","peer-to-peer",{"id":98,"title":99,"slug":100},18,"Marketplace","marketplace",{"uuid":102,"title":103,"description":104,"canonical_path":105,"image":106,"width":74,"height":107,"image_alt":108,"kind":46,"categories":109,"app":111},"074cb9ac-1a4b-46b3-a74a-1a75f4d15dc4","Inference UI component","Application header displaying navigation, user context, and account status","\u002Fexamples\u002Fapps\u002Finference\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffaac04ab-541d-4bb0-886c-dc820d88601e.png",111,"UI component from Inference",[110],{"id":12,"title":13,"slug":49},{"slug":112,"title":113,"logo":114,"baseline":115,"categories":116},"inference","Inference","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F65e2bbca-c37f-44d3-a945-dbb7846ba077.png","Build and monitor self-improving agents.",[117,121,125,129],{"id":118,"title":119,"slug":120},48,"Developer Tools","developer-tools",{"id":122,"title":123,"slug":124},16,"Monitoring","monitoring",{"id":126,"title":127,"slug":128},37,"Developer APIs","developer-apis",{"id":130,"title":131,"slug":132},80,"Artificial Intelligence","artificial-intelligence",{"uuid":134,"title":135,"description":136,"canonical_path":137,"image":138,"width":139,"height":140,"image_alt":141,"kind":46,"categories":142,"app":144},"8c07d754-4996-40dc-bbf9-21dc1059aee7","Steel UI component","A dark-themed web application header with global navigation, team selection, and user profile access.","\u002Fexamples\u002Fapps\u002Fsteel\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F742e6ec3-8952-411f-8cde-45e8bd728f18.png",3280,435,"UI component from Steel",[143],{"id":12,"title":13,"slug":49},{"slug":145,"title":146,"logo":147,"baseline":148,"categories":149},"steel","Steel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F03f0fa43-a227-4dce-b66a-f340f4551973.png","Browser infrastructure for AI agents",[150,151,152,153],{"id":118,"title":119,"slug":120},{"id":130,"title":131,"slug":132},{"id":126,"title":127,"slug":128},{"id":154,"title":155,"slug":156},45,"Open Source","open-source",{"uuid":158,"title":159,"description":160,"canonical_path":161,"image":162,"width":74,"height":163,"image_alt":164,"kind":46,"categories":165,"app":167},"10f7fc56-b304-4421-8580-9d53e45df539","Axiom UI component","An application interface featuring a global navigation bar, a page title, a search input, and a call to action button.","\u002Fexamples\u002Fapps\u002Faxiom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8bafc5fe-56db-430d-98fc-751f8869b06e.png",162,"UI component from Axiom",[166],{"id":12,"title":13,"slug":49},{"slug":168,"title":169,"logo":170,"baseline":171,"categories":172},"axiom","Axiom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F22cc0be3-ce3f-442a-903f-4da9befc54cd.png","The modern machine data platform.",[173,177,181,182],{"id":174,"title":175,"slug":176},46,"Analytics","analytics",{"id":178,"title":179,"slug":180},57,"Big data","big-data",{"id":122,"title":123,"slug":124},{"id":118,"title":119,"slug":120},{"uuid":184,"title":185,"description":186,"canonical_path":187,"image":188,"width":74,"height":189,"image_alt":190,"kind":46,"categories":191,"app":193},"ae70ff89-e3c1-41de-9c52-338687771420","Dock UI component","A top navigation bar with content management and collaboration actions.","\u002Fexamples\u002Fapps\u002Fdock\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe75534a7-58a0-4158-9a21-024925ffe6e9.png",107,"UI component from Dock",[192],{"id":12,"title":13,"slug":49},{"slug":194,"title":195,"logo":196,"baseline":197,"categories":198},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[199,200],{"id":61,"title":62,"slug":63},{"id":201,"title":202,"slug":203},29,"Task Management","task-management",{"uuid":205,"title":206,"description":207,"canonical_path":208,"image":209,"width":74,"height":210,"image_alt":211,"kind":46,"categories":212,"app":214},"0704304e-f10e-4c33-9040-49030138e32e","Bloom UI component","A header bar displaying organization name, development status, credit balance, upgrade option, and user avatar.","\u002Fexamples\u002Fapps\u002Fbloom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Faf8f932f-ad14-4859-b8f2-280439294d53.png",113,"UI component from Bloom",[213],{"id":12,"title":13,"slug":49},{"slug":215,"title":216,"logo":217,"baseline":218,"categories":219},"bloom","Bloom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F62461f0d-4182-4996-ae7b-cbc623f6ee3f.png","A new way to build commerce",[220,221,225,229],{"id":130,"title":131,"slug":132},{"id":222,"title":223,"slug":224},3,"Shopping","shopping",{"id":226,"title":227,"slug":228},7,"Web Development","web-development",{"id":230,"title":231,"slug":232},96,"No code","no-code",{"uuid":234,"title":235,"description":236,"canonical_path":237,"image":238,"width":74,"height":57,"image_alt":239,"kind":46,"categories":240,"app":242},"d6a2a77a-32a4-40c0-8288-6305da3589c0","Appwrite UI component","A top navigation bar featuring project selection, account status, upgrade option, support links, search, and user profile access.","\u002Fexamples\u002Fapps\u002Fappwrite\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F71ed1340-4459-47dd-bb2e-6d3767668532.png","UI component from Appwrite",[241],{"id":12,"title":13,"slug":49},{"slug":243,"title":244,"logo":245,"baseline":246,"categories":247},"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.",[248,249,250],{"id":118,"title":119,"slug":120},{"id":126,"title":127,"slug":128},{"id":154,"title":155,"slug":156},{"uuid":252,"title":253,"description":254,"canonical_path":255,"image":256,"width":257,"height":258,"image_alt":259,"kind":46,"categories":260,"app":262},"e85be796-9846-410b-b2d0-f0fb4f811e40","Header Bar","Top navigation bar providing page title, global search, sort, filter, delete, and notification access for the avatar videos list view","\u002Fexamples\u002Fapps\u002Fheygen\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6f884996-9009-443d-8c12-821dd16c50ed.png",2481,349,"Header Bar from HeyGen",[261],{"id":12,"title":13,"slug":49},{"slug":263,"title":264,"logo":265,"baseline":266,"categories":267},"heygen","HeyGen","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd8cda81f-5b21-444e-8401-676a6cf2f817.png","AI video generator that turns ideas into professional videos in minutes",[268,269],{"id":57,"title":58,"slug":59},{"id":130,"title":131,"slug":132},{"uuid":271,"title":272,"description":273,"canonical_path":274,"image":275,"width":74,"height":276,"image_alt":277,"kind":46,"categories":278,"app":280},"caf1ca8a-2f7f-48df-a232-86210428e12c","Onboarding Header","Shows progress breadcrumbs, logo and help actions during account setup flow","\u002Fexamples\u002Fapps\u002Fcopilot-money\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff49c6890-9db7-4e1f-aafa-ddc4cdb21e3e.png",143,"Onboarding Header from Copilot",[279],{"id":12,"title":13,"slug":49},{"slug":281,"title":282,"logo":283,"baseline":284,"categories":285},"copilot-money","Copilot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F598cc9dd-791e-42fb-9fac-8f3f362f10ac.png","Personal finance app for organizing money across devices",[286],{"id":287,"title":288,"slug":289},36,"Finance","finance",{"uuid":291,"title":292,"description":293,"canonical_path":294,"image":295,"width":74,"height":296,"image_alt":297,"kind":46,"categories":298,"app":300},"782d75d2-a7ab-4dc2-aed4-455bf5473eca","Lovable UI component","A top application bar displaying a project title, a set of functional icons, a selected cloud status, and a close action.","\u002Fexamples\u002Fapps\u002Flovable\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff9eb78be-e939-4279-adfc-e38b519d0b2a.png",103,"UI component from Lovable",[299],{"id":12,"title":13,"slug":49},{"slug":301,"title":302,"logo":303,"baseline":304,"categories":305},"lovable","Lovable","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F371498a3-d8de-4908-8af8-e73a603ffa34.png","Create apps and websites by chatting with AI",[306,307,308],{"id":130,"title":131,"slug":132},{"id":226,"title":227,"slug":228},{"id":230,"title":231,"slug":232},{"uuid":310,"title":311,"description":312,"canonical_path":313,"image":314,"width":315,"height":316,"image_alt":317,"kind":46,"categories":318,"app":320},"d6f084d1-c25b-48c1-980e-0de0d1118181","Amie UI component","A web application header featuring navigation for email and calendar, with date selection and action buttons.","\u002Fexamples\u002Fapps\u002Famie\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F85f8418b-c1f6-4598-b295-f69f8f185b90.png",3223,364,"UI component from Amie",[319],{"id":12,"title":13,"slug":49},{"slug":321,"title":322,"logo":323,"baseline":324,"categories":325},"amie","Amie","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Famie-929f0269.png","The joyful productivity app",[326,330,331,335],{"id":327,"title":328,"slug":329},101,"Calendar","calendar",{"id":201,"title":202,"slug":203},{"id":332,"title":333,"slug":334},30,"Productivity","productivity",{"id":130,"title":131,"slug":132},[],[338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383],{"label":339,"to":340},"Browse","\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":342,"to":343},"Empty State","\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":345,"to":346},"Getting Started","\u002Fexamples\u002Fscreens\u002Fgetting-started",{"label":348,"to":349},"Onboarding Checklist","\u002Fexamples\u002Fscreens\u002Fonboarding-checklist",{"label":351,"to":352},"Flask design examples","\u002Fexamples\u002Fapps\u002Fflask",{"label":354,"to":355},"Airbnb design examples","\u002Fexamples\u002Fapps\u002Fairbnb",{"label":357,"to":358},"Inference design examples","\u002Fexamples\u002Fapps\u002Finference",{"label":360,"to":361},"Steel design examples","\u002Fexamples\u002Fapps\u002Fsteel",{"label":363,"to":364},"Axiom design examples","\u002Fexamples\u002Fapps\u002Faxiom",{"label":366,"to":367},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":369,"to":370},"Bloom design examples","\u002Fexamples\u002Fapps\u002Fbloom",{"label":372,"to":373},"Appwrite design examples","\u002Fexamples\u002Fapps\u002Fappwrite",{"label":375,"to":376},"HeyGen design examples","\u002Fexamples\u002Fapps\u002Fheygen",{"label":378,"to":379},"Copilot design examples","\u002Fexamples\u002Fapps\u002Fcopilot-money",{"label":381,"to":382},"Lovable design examples","\u002Fexamples\u002Fapps\u002Flovable",{"label":384,"to":385},"Amie design examples","\u002Fexamples\u002Fapps\u002Famie",{"published_at":387,"updated_at":388},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]