Curated collection of the best website navigation bar designs for inspiration
Posted October 9, 2025
Topics
%22%20fill-opacity%3D%220.17%22%2F%3E%0A%3Cpath%20d%3D%22M89.8721%20213.2L78.9281%20213.2C53.7439%20213.2%2033.3281%20192.784%2033.3281%20167.6L33.3281%2081.8721C33.3281%2056.688%2053.7439%2036.2722%2078.9281%2036.2722L89.8721%2036.2722L89.8721%20213.2Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.07%22%2F%3E%0A%3Cpath%20d%3D%22M27.3999%2082.0999C27.3999%2053.7676%2050.3677%2030.7998%2078.7%2030.7998H181.3C209.633%2030.7998%20232.6%2053.7677%20232.6%2082.0999V167.6C232.6%20195.932%20209.633%20218.9%20181.3%20218.9H78.7C50.3677%20218.9%2027.3999%20195.932%2027.3999%20167.6V82.0999Z%22%20fill%3D%22%23292929%22%2F%3E%0A%3Cpath%20d%3D%22M95.8001%2030.7998V218.9M78.7%20218.9H181.3C209.633%20218.9%20232.6%20195.932%20232.6%20167.6V82.0999C232.6%2053.7677%20209.633%2030.7998%20181.3%2030.7998H78.7C50.3677%2030.7998%2027.3999%2053.7676%2027.3999%2082.0999V167.6C27.3999%20195.932%2050.3677%20218.9%2078.7%20218.9Z%22%20stroke%3D%22%23BFBFBF%22%20stroke-width%3D%2210.488%22%2F%3E%0A%3Cg%20clip-path%3D%22url(%23clip0_318_3097)%22%3E%0A%3Cpath%20d%3D%22M97.173%2022.5898L25.125%2073.6618%22%20stroke%3D%22%23BFBFBF%22%20stroke-width%3D%223.42%22%20stroke-dasharray%3D%220%201.82%2036.48%208.66%2013.68%2029.18%22%2F%3E%0A%3Cpath%20d%3D%22M97.173%2050.8618L25.125%20101.934%22%20stroke%3D%22%23BFBFBF%22%20stroke-width%3D%223.42%22%20stroke-dasharray%3D%220%201.82%2036.48%208.66%2013.68%2029.18%22%2F%3E%0A%3Cpath%20d%3D%22M97.173%2079.1338L25.125%20131.118%22%20stroke%3D%22%23BFBFBF%22%20stroke-width%3D%223.42%22%20stroke-dasharray%3D%220%201.82%2036.48%208.66%2013.68%2029.18%22%2F%3E%0A%3Cpath%20d%3D%22M97.173%20108.318L25.125%20159.39%22%20stroke%3D%22%23BFBFBF%22%20stroke-width%3D%223.42%22%20stroke-dasharray%3D%220%201.82%2036.48%208.66%2013.68%2029.18%22%2F%3E%0A%3Cpath%20d%3D%22M97.173%20136.59L25.125%20187.662%22%20stroke%3D%22%23BFBFBF%22%20stroke-width%3D%223.42%22%20stroke-dasharray%3D%220%201.82%2036.48%208.66%2013.68%2029.18%22%2F%3E%0A%3Cpath%20d%3D%22M97.173%20164.862L25.125%20215.934%22%20stroke%3D%22%23BFBFBF%22%20stroke-width%3D%223.42%22%20stroke-dasharray%3D%220%201.82%2036.48%208.66%2013.68%2029.18%22%2F%3E%0A%3Cpath%20d%3D%22M97.173%20193.134L25.125%20245.118%22%20stroke%3D%22%23BFBFBF%22%20stroke-width%3D%223.42%22%20stroke-dasharray%3D%220%201.82%2036.48%208.66%2013.68%2029.18%22%2F%3E%0A%3C%2Fg%3E%0A%3Cpath%20d%3D%22M168.988%20143.888C161.033%20138.135%20153.899%20131.401%20147.767%20123.86C146.878%20122.767%20146.878%20121.232%20147.767%20120.139C153.899%20112.598%20161.033%20105.864%20168.988%20100.111%22%20stroke%3D%22%23BFBFBF%22%20stroke-width%3D%2210.488%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Cdefs%3E%0A%3CradialGradient%20id%3D%22paint0_radial_318_3097%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientUnits%3D%22userSpaceOnUse%22%20gradientTransform%3D%22translate(30.9721%20124.736)%20scale(58.9%20158.13)%22%3E%0A%3Cstop%20stop-color%3D%22%23A5A5A5%22%2F%3E%0A%3Cstop%20offset%3D%220.681138%22%20stop-color%3D%22%23A5A5A5%22%20stop-opacity%3D%220%22%2F%3E%0A%3C%2FradialGradient%3E%0A%3CclipPath%20id%3D%22clip0_318_3097%22%3E%0A%3Cpath%20d%3D%22M27.3999%2030.7998H95.7999V213.2H72.9999C47.8157%20213.2%2027.3999%20192.784%2027.3999%20167.6V30.7998Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E%0A)