31 published examples
Logo on the left, a short destination list in the middle, one filled action on the right. Dropdowns appear only when a single label would hide a whole product area. The button is the point; the links stay quieter so the conversion path stays obvious.
The brand sits in the optical middle. Destinations live on one side, search, shipping, account, or booking on the other. The layout feels editorial, but it only holds if both wings have similar mass. Uneven wings make the logo look parked, not composed.
Shopping and service sites push cart, search, account, or calendar into compact icons so catalog labels can stay words. The risk is a row of identical outlines. Stronger examples give the bag or booking action a different shape or weight than the rest.
I tend to read a nav at 80% zoom and ask one question: can I name the product and the next step in under two seconds? If the logo, destinations, and action compete for the same visual weight, none of them win. Filled buttons work when the rest of the bar stays quiet; they fail when every link is already shouting. Centered wordmarks look confident until the link list on the left and the utilities on the right get out of balance—then the brand starts to feel like leftover space. Commerce icons are cheap to add and expensive to scan; three identical outline glyphs next to a wordmark is a smell. Watch contrast on photography and translucent bars. A nav that only works on a pale hero is not a system. Also test the collapse: if five peer destinations become a hamburger with no priority, you have not designed a small-screen nav, you have hidden the IA.
Enough to name the main product areas, and no more. Four to six peer labels is the range most of these bars can carry before they start to look like a sitemap. If a seventh item is a true peer, the bar is the wrong container. If it is a subset, nest it. If it is an action, make it a button instead of another text link.
When destinations are long, branded, or need supporting lists underneath them. Stacked full-bleed labels give each item room to be a chapter, not a chip. Inline links win when people already know the nouns and just need to hop. A giant menu that only repeats five short words is theater.
Local or supporting paths: a studio’s project filters, a section index, language or legal switches that do not define the product. Secondary nav orients people inside a cluster. If a link would still make sense on every page, it probably belongs in the primary bar.
Compare section designs that serve a similar purpose on your page.
