--- title: "Navbar UI: anatomy, variants and examples | Kombai" description: "A navbar is the bar across the top of a site or app with the logo, the main links and the account actions." canonical_url: https://kombai.com/glossary/navbar/ author: "The Kombai Team" --- # Navbar A navbar is the bar across the top of a site or app with the logo, the main links and the account actions. - Also called: navigation bar, top bar, header - Platforms: Web, Mobile - In the Kombai gallery: [299 web designs](https://kombai.com/gallery/web/navbar/), [3 mobile designs](https://kombai.com/gallery/mobile/navbar/) - [Tandrel](https://kombai.com/gallery/inspirations/navbar-web-111/) (Web) - [Roamly](https://kombai.com/gallery/inspirations/header-ios-21/) (Mobile) - [Hemvik](https://kombai.com/gallery/inspirations/navbar-web-133/) (Web) ## What is a navbar? A navbar is the strip at the top of every page that holds the logo, links to the main sections and actions like Sign in. It stays the same from page to page, so people always know how to get home, jump to a section or reach their account. - The logo sits at the start and links to the home page. - On small screens the links fold behind a menu button. ## When to use navbar - **A few top sections.** Destinations people need from any page, like Product, Pricing and Docs. - **Account actions.** Sign in, search, the cart or the profile menu that every screen shares. - **The main call to action.** A Start free or Book a demo button that stays in reach on every page. ## When not to use one - **Many sections.** Past a handful of links, group them in a mega menu or move to a side navigation. - **Focused flows.** Checkout and sign-up work better with just the logo and a way back. - **Views of one thing.** To switch between Overview and Settings on one page, use tabs. ## Anatomy 1. **Logo**: Links back home 2. **Links**: The main sections 3. **Actions**: Sign in and the main button 4. **Menu button**: Holds the links on phones 5. **States**: Current page, focus, menu open ## Variants We sorted every navbar design in the Kombai gallery and found six patterns. ### 1. Logo, links and actions The default. Logo on the left, section links next to it or centered, and Sign in with a primary button on the right. Links often open dropdowns. - [Slatequill](https://kombai.com/gallery/inspirations/navbar-web-222/) (Web) - [Kalibrook](https://kombai.com/gallery/inspirations/navbar-web-214/) (Web) - [Bellbird](https://kombai.com/gallery/inspirations/navbar-web-252/) (Web) ### 2. Floating pill bars The whole bar sits in a rounded capsule that floats over the page, a common look on software marketing sites. - [Cindral](https://kombai.com/gallery/inspirations/navbar-web-107/) (Web) - [Halcyra](https://kombai.com/gallery/inspirations/navbar-web-157/) (Web) - [Fluxwell](https://kombai.com/gallery/inspirations/navbar-web-286/) (Web) ### 3. Centered logo The wordmark sits in the middle with links or icons on both sides. Newspapers, magazines and property sites use it. - [ASHWEIR](https://kombai.com/gallery/inspirations/navbar-web-138/) (Web) - [Gablecourt](https://kombai.com/gallery/inspirations/navbar-web-120/) (Web) - [Nation](https://kombai.com/gallery/inspirations/navbar-web-38/) (Web) ### 4. Transparent over the hero No background of its own. Light text sits straight on a photo or video, so the hero image starts at the top edge. - [Broadloft](https://kombai.com/gallery/inspirations/navbar-web-103/) (Web) - [Xovia](https://kombai.com/gallery/inspirations/navbar-web-250/) (Web) - [Kelvane](https://kombai.com/gallery/inspirations/navbar-web-235/) (Web) ### 5. Two-row store headers A top row with the logo, a wide search box, account and cart, and a second row of shop categories. - [Hedgebarrow](https://kombai.com/gallery/inspirations/navbar-web-176/) (Web) - [Driftforge](https://kombai.com/gallery/inspirations/navbar-web-152/) (Web) - [Bramblecart](https://kombai.com/gallery/inspirations/navbar-web-163/) (Web) ### 6. Mobile menus On a phone the links move into a panel or sheet that opens from the bar, often with photo cards for each section. - [Sonder](https://kombai.com/gallery/inspirations/navbar-ios-1/) (Mobile) - [Ossia](https://kombai.com/gallery/inspirations/navbar-ios-2/) (Mobile) - [Everwell](https://kombai.com/gallery/inspirations/navbar-ios-3/) (Mobile) ## Where navbars show up ### Marketing sites Product, pricing and docs links beside Log in and a trial button, often under an announcement strip. - [Arbormill](https://kombai.com/gallery/inspirations/navbar-web-168/) (Web) - [Duskfern](https://kombai.com/gallery/inspirations/navbar-web-171/) (Web) - [Bellframe](https://kombai.com/gallery/inspirations/navbar-web-200/) (Web) ### Product apps The app bar: a few workspace sections, notifications and the account avatar above the work itself. - [Perchford](https://kombai.com/gallery/inspirations/navbar-web-130/) (Web) - [Hazelquay](https://kombai.com/gallery/inspirations/navbar-web-212/) (Web) - [Byrewood](https://kombai.com/gallery/inspirations/navbar-web-193/) (Web) ### Phone screens A slim bar with a back button, a title and one to three icon actions, like share or more. - [Larkspur](https://kombai.com/gallery/inspirations/header-ios-28/) (Mobile) - [Bramble](https://kombai.com/gallery/inspirations/header-ios-24/) (Mobile) - [Vireo](https://kombai.com/gallery/inspirations/header-ios-26/) (Mobile) ## Navbar vs similar components | | [Navbar](https://kombai.com/glossary/navbar/) | [Side navigation](https://kombai.com/glossary/side-navigation/) | [Tabs](https://kombai.com/glossary/tabs/) | [Mega menu](https://kombai.com/glossary/mega-menu/) | |---|---|---|---|---| | Sits | Across the top of every page | Down one edge of the app | Above the content it switches | Drops down from the navbar | | Holds | Logo, main links, actions | Many sections, often grouped | A few views of one thing | Many grouped links at once | | Best for | Sites with a few top sections | Apps with many sections | Switching views on one page | Large sites with many products | ## Build notes - Wrap the links in a