Navigation and search

Design the navigation and search system for a content-heavy web app. The screen should help people move between top-level sections, jump to specific pages, and refine results without losing orientation.

Focus on the shell around the content: global nav, secondary nav, search field, and result filtering. Show how the system behaves when search is idle, active, and empty. Include a clear hierarchy for primary destinations versus utility actions like settings, help, or account.

The layout should scale down cleanly on smaller screens. Show how the nav collapses, where search lives on mobile, and how users get back to the current section after filtering or drilling into a result. Keep the pattern simple enough to scan, with one obvious path to navigation and one obvious path to search.

Inject personality into your design by customizing the visual elements of the search bar and navigation menus. This detail can make your mock stand out!