{"id":2785,"date":"2026-02-06T07:10:14","date_gmt":"2026-02-06T07:10:14","guid":{"rendered":"https:\/\/demo.materiamedica.net\/demo6\/?p=2785"},"modified":"2026-02-06T07:10:14","modified_gmt":"2026-02-06T07:10:14","slug":"chapter-11-top-navigation","status":"publish","type":"post","link":"https:\/\/demo.materiamedica.net\/demo6\/chapter-11-top-navigation\/","title":{"rendered":"Chapter 11: Top Navigation"},"content":{"rendered":"

How to create a good Top Navigation bar<\/strong> (also called navbar<\/strong>, header navigation<\/strong>, top bar<\/strong>, main menu<\/strong>).<\/p>\n

We\u2019ll go through different common styles and real-world patterns that are actually used in 2025\u20132026 websites and web applications.<\/p>\n

What makes a good top navigation bar?<\/h3>\n

Before we write any code, let\u2019s agree on the most important goals:<\/p>\n

    \n
  1. Clear hierarchy<\/strong> \u2014 logo \u2192 main links \u2192 secondary actions (search, login, cart, profile)<\/li>\n
  2. Easy to scan<\/strong> \u2014 users should understand where they are and where they can go in 1\u20132 seconds<\/li>\n
  3. Good spacing & touch targets<\/strong> \u2014 especially on mobile<\/li>\n
  4. Responsive behavior<\/strong> \u2014 collapses gracefully on small screens<\/li>\n
  5. Visual feedback<\/strong> \u2014 hover, active page, mobile menu open\/close<\/li>\n
  6. Accessibility<\/strong> \u2014 keyboard navigation, screen reader support<\/li>\n
  7. Performance<\/strong> \u2014 doesn\u2019t slow down the page<\/li>\n<\/ol>\n

    Most common patterns in 2025\u20132026<\/h3>\n
    \n
    \n\n\n\n\n\n\n\n\n\n
    Pattern<\/th>\nBest for<\/th>\nMobile behavior<\/th>\nExamples you know<\/th>\n<\/tr>\n<\/thead>\n
    Classic centered logo + links<\/td>\nCorporate, blogs, marketing sites<\/td>\nHamburger menu<\/td>\nMost company websites<\/td>\n<\/tr>\n
    Logo left + links center + CTA right<\/td>\nSaaS products, tools, dashboards<\/td>\nHamburger or bottom tab bar<\/td>\nNotion, Linear, Figma, Stripe<\/td>\n<\/tr>\n
    Logo left + minimal links + right icons<\/td>\nE-commerce, apps<\/td>\nHamburger + bottom bar sometimes<\/td>\nAmazon, Flipkart, Medium<\/td>\n<\/tr>\n
    Full-width with mega menu<\/td>\nLarge sites with many categories<\/td>\nAccordion or full-screen overlay<\/td>\nNike, Apple, Samsung<\/td>\n<\/tr>\n
    Sticky + shrinking on scroll<\/td>\nLong content pages<\/td>\nStays visible<\/td>\nMany modern marketing sites<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    <\/div>\n<\/div>\n<\/div>\n

    Let\u2019s build the most common and versatile version<\/strong> first \u2014 then we\u2019ll look at variations.<\/p>\n

    Pattern 1 \u2013 Modern Classic Top Navigation (very widely used)<\/h3>\n

    HTML Structure<\/h4>\n
    \n
    \n
    \n
    HTML<\/div>\n
    \n
    <header class=\"site-header\">\r\n  <nav class=\"navbar container\">\r\n    \r\n    <!-- Logo \/ brand -->\r\n    <a href=\"\/\" class=\"logo\">\r\n      <img src=\"\/logo.svg\" alt=\"Company Name\" width=\"140\" height=\"36\">\r\n      <!-- or just text: <strong>Company<\/strong> -->\r\n    <\/a>\r\n\r\n    <!-- Main navigation links (desktop) -->\r\n    <ul class=\"nav-links\">\r\n      <li><a href=\"\/features\" class=\"active\">Features<\/a><\/li>\r\n      <li><a href=\"\/pricing\">Pricing<\/a><\/li>\r\n      <li><a href=\"\/customers\">Customers<\/a><\/li>\r\n      <li><a href=\"\/resources\">Resources<\/a><\/li>\r\n    <\/ul>\r\n\r\n    <!-- Right side actions -->\r\n    <div class=\"nav-actions\">\r\n      <button class=\"search-btn\" aria-label=\"Search\">\r\n        <svg width=\"20\" height=\"20\">\u2026<\/svg>\r\n      <\/button>\r\n      \r\n      <a href=\"\/login\" class=\"btn-login\">Log in<\/a>\r\n      <a href=\"\/signup\" class=\"btn-primary\">Get Started<\/a>\r\n    <\/div>\r\n\r\n    <!-- Mobile menu button -->\r\n    <button class=\"menu-toggle\" aria-label=\"Toggle menu\" aria-expanded=\"false\">\r\n      <span class=\"bar\"><\/span>\r\n      <span class=\"bar\"><\/span>\r\n      <span class=\"bar\"><\/span>\r\n    <\/button>\r\n\r\n  <\/nav>\r\n\r\n  <!-- Mobile menu (hidden by default) -->\r\n  <div class=\"mobile-menu\" hidden>\r\n    <ul>\r\n      <li><a href=\"\/features\">Features<\/a><\/li>\r\n      <li><a href=\"\/pricing\">Pricing<\/a><\/li>\r\n      <li><a href=\"\/customers\">Customers<\/a><\/li>\r\n      <li><a href=\"\/resources\">Resources<\/a><\/li>\r\n      <li class=\"divider\"><\/li>\r\n      <li><a href=\"\/login\">Log in<\/a><\/li>\r\n      <li><a href=\"\/signup\" class=\"btn-primary\">Get Started<\/a><\/li>\r\n    <\/ul>\r\n  <\/div>\r\n<\/header><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    CSS \u2013 Desktop + Mobile<\/h4>\n
    \n
    \n
    \n
    CSS<\/div>\n
    \n
    .site-header {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1000;\r\n  background: white;\r\n  border-bottom: 1px solid #e5e7eb;\r\n  box-shadow: 0 1px 3px rgba(0,0,0,0.04);\r\n}\r\n\r\n.navbar {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 1rem 1.5rem;\r\n  max-width: 1400px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.logo {\r\n  font-size: 1.5rem;\r\n  font-weight: 700;\r\n  color: #111;\r\n  text-decoration: none;\r\n}\r\n\r\n.nav-links {\r\n  display: flex;\r\n  gap: 2.5rem;\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.nav-links a {\r\n  color: #374151;\r\n  text-decoration: none;\r\n  font-weight: 500;\r\n  padding: 0.5rem 0;\r\n  transition: color 0.15s;\r\n}\r\n\r\n.nav-links a:hover,\r\n.nav-links a.active {\r\n  color: #2563eb;\r\n}\r\n\r\n.nav-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 1.25rem;\r\n}\r\n\r\n.btn-login {\r\n  color: #374151;\r\n  font-weight: 500;\r\n  text-decoration: none;\r\n}\r\n\r\n.btn-primary {\r\n  background: #2563eb;\r\n  color: white;\r\n  padding: 0.65rem 1.4rem;\r\n  border-radius: 6px;\r\n  text-decoration: none;\r\n  font-weight: 500;\r\n}\r\n\r\n\/* Mobile menu button *\/\r\n.menu-toggle {\r\n  display: none;\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 0.5rem;\r\n}\r\n\r\n.bar {\r\n  display: block;\r\n  width: 26px;\r\n  height: 3px;\r\n  background: #111;\r\n  margin: 5px auto;\r\n  transition: all 0.3s;\r\n}\r\n\r\n\/* Mobile styles *\/\r\n@media (max-width: 1024px) {\r\n  .nav-links,\r\n  .nav-actions > *:not(.menu-toggle) {\r\n    display: none;\r\n  }\r\n\r\n  .menu-toggle {\r\n    display: block;\r\n  }\r\n\r\n  .mobile-menu {\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 0;\r\n    right: 0;\r\n    background: white;\r\n    border-top: 1px solid #e5e7eb;\r\n    padding: 1.5rem;\r\n    box-shadow: 0 10px 20px rgba(0,0,0,0.1);\r\n  }\r\n\r\n  .mobile-menu ul {\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n\r\n  .mobile-menu a {\r\n    display: block;\r\n    padding: 1rem 0;\r\n    font-size: 1.1rem;\r\n    color: #111;\r\n    text-decoration: none;\r\n  }\r\n\r\n  .mobile-menu .btn-primary {\r\n    display: block;\r\n    text-align: center;\r\n    margin-top: 1rem;\r\n  }\r\n}\r\n\r\n\/* When mobile menu is open *\/\r\n.mobile-menu[aria-hidden=\"false\"] {\r\n  display: block;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    JavaScript \u2013 Mobile menu toggle<\/h4>\n
    \n
    \n
    \n
    JavaScript<\/div>\n
    \n
    document.addEventListener('DOMContentLoaded', () => {\r\n  const toggle = document.querySelector('.menu-toggle');\r\n  const menu = document.querySelector('.mobile-menu');\r\n\r\n  toggle.addEventListener('click', () => {\r\n    const isExpanded = toggle.getAttribute('aria-expanded') === 'true';\r\n    \r\n    toggle.setAttribute('aria-expanded', !isExpanded);\r\n    menu.hidden = isExpanded;\r\n    \r\n    \/\/ Optional: animate hamburger to X\r\n    toggle.classList.toggle('active');\r\n  });\r\n});<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    Add this CSS for nice X animation:<\/p>\n
    \n
    \n
    \n
    CSS<\/div>\n
    \n
    .menu-toggle.active .bar:nth-child(1) {\r\n  transform: translateY(8px) rotate(45deg);\r\n}\r\n.menu-toggle.active .bar:nth-child(2) {\r\n  opacity: 0;\r\n}\r\n.menu-toggle.active .bar:nth-child(3) {\r\n  transform: translateY(-8px) rotate(-45deg);\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    Quick variations you should know<\/h3>\n
    1. Shrinking header on scroll<\/strong> (very modern look)<\/p>\n
    \n
    \n
    \n
    CSS<\/div>\n
    \n
    .site-header.scrolled {\r\n  padding: 0.6rem 1.5rem;\r\n  box-shadow: 0 4px 12px rgba(0,0,0,0.08);\r\n}\r\n\r\n.site-header.scrolled .logo img {\r\n  width: 110px;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    JavaScript:<\/p>\n
    \n
    \n
    \n
    window.addEventListener('scroll', () => {\r\n  document.querySelector('.site-header').classList.toggle('scrolled', window.scrollY > 50);\r\n});<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n
    2. With search in center<\/strong> (common in SaaS)<\/p>\n
    \n
    \n
    \n
    HTML<\/div>\n
    \n
    <div class=\"nav-center\">\r\n  <input type=\"search\" placeholder=\"Search docs, components...\" class=\"search-input\">\r\n<\/div><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    3. Mega menu on hover<\/strong> (for categories)<\/p>\n
    We usually show a big dropdown panel when hovering \u201cProducts\u201d or \u201cSolutions\u201d.<\/p>\n
    Summary \u2013 What to decide when building a top nav<\/h3>\n
    \n
    \n\n\n\n\n\n\n\n\n\n\n\n
    Question<\/th>\nCommon choice 2025\u20132026<\/th>\n<\/tr>\n<\/thead>\n
    Logo left or center?<\/td>\nLeft (almost always)<\/td>\n<\/tr>\n
    How many main links?<\/td>\n3\u20136 (more \u2192 dropdown)<\/td>\n<\/tr>\n
    Sticky or not?<\/td>\nSticky in most cases<\/td>\n<\/tr>\n
    Hamburger on mobile?<\/td>\nYes (from ~1024px)<\/td>\n<\/tr>\n
    CTA button?<\/td>\nYes \u2014 bright color<\/td>\n<\/tr>\n
    Search?<\/td>\nIcon or full field<\/td>\n<\/tr>\n
    Icons on right?<\/td>\nCart, profile, notifications, search<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    <\/div>\n<\/div>\n<\/div>\n
    Would you like to go much deeper into any of these variations?<\/p>\n
    Examples:<\/p>\n
      \n
    • Mega menu (dropdown with columns and images)<\/li>\n
    • Centered logo style<\/li>\n
    • Transparent header over hero section<\/li>\n
    • Bottom navigation bar for mobile-first apps<\/li>\n
    • Dashboard-style sidebar + top bar combo<\/li>\n
    • Animated underline on active link<\/li>\n
    • Dark mode navbar<\/li>\n<\/ul>\n
      Just tell me which direction you want \u2014 I\u2019ll explain it with complete code, slowly and clearly. \ud83d\ude0a<\/p>\n","protected":false},"excerpt":{"rendered":"
      How to create a good Top Navigation bar (also called navbar, header navigation, top bar, main menu). We\u2019ll go through different common styles and real-world patterns that are actually used in 2025\u20132026 websites and...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[],"class_list":["post-2785","post","type-post","status-publish","format-standard","hentry","category-how-to"],"_links":{"self":[{"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/posts\/2785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/comments?post=2785"}],"version-history":[{"count":1,"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/posts\/2785\/revisions"}],"predecessor-version":[{"id":2786,"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/posts\/2785\/revisions\/2786"}],"wp:attachment":[{"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/media?parent=2785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/categories?post=2785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demo.materiamedica.net\/demo6\/wp-json\/wp\/v2\/tags?post=2785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}