Page header

Design a page header for a product or site that has to do real work: orient the user, expose the main paths, and surface one primary action. Treat it as the top-level control for the page, not just a logo strip.

On desktop, show the full header state: brand mark, primary navigation, optional search or utility links, and a single high-priority CTA. Make the hierarchy clear so users can tell what is global, what is page-specific, and what is action. Include a current-page state for the active section and clear hover/focus treatment for every interactive item.

Define what happens when the page scrolls or space gets tight. If the header collapses, show what stays visible and what gets tucked away. On mobile, reduce the pattern to a compact bar with menu access, branding, and any essential action that must remain reachable. Avoid wrapping or crowded controls; the header should hold together at common breakpoints.

Include states that make it usable, not just polished: default, hover, focus, active, scrolled/collapsed, and mobile menu open. The result should read immediately, support navigation fast, and keep the page identity intact without stealing attention from the content below.

Balance visual appeal with functionality. A good header guides users without overwhelming them and adapts seamlessly across devices.