Navigation Bar Component
The navigation bar (nav bar) is a crucial component in web design, providing users with easy access to different sections of a website or application.
Navigation Bar
<nav class="navbar">
<input type="checkbox" class="navbar-toggle" id="BasicNavbarToggle"/>
<a href="#" class="branding-logo">Arts Oven UI</a>
<div class="navbar-content">
<ul>
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#" class="nav-link">Features</a></li>
<li><a href="#" class="nav-link">Pricing</a></li>
<li><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
<label for="BasicNavbarToggle" class="navbar-toggle-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 8.52V3.98C22 2.57 21.36 2 19.77 2H15.73C14.14 2 13.5 2.57 13.5 3.98V8.51C13.5 9.93 14.14 10.49 15.73 10.49H19.77C21.36 10.5 22 9.93 22 8.52Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 19.77V15.73C22 14.14 21.36 13.5 19.77 13.5H15.73C14.14 13.5 13.5 14.14 13.5 15.73V19.77C13.5 21.36 14.14 22 15.73 22H19.77C21.36 22 22 21.36 22 19.77Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 8.52V3.98C10.5 2.57 9.86 2 8.27 2H4.23C2.64 2 2 2.57 2 3.98V8.51C2 9.93 2.64 10.49 4.23 10.49H8.27C9.86 10.5 10.5 9.93 10.5 8.52Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 19.77V15.73C10.5 14.14 9.86 13.5 8.27 13.5H4.23C2.64 13.5 2 14.14 2 15.73V19.77C2 21.36 2.64 22 4.23 22H8.27C9.86 22 10.5 21.36 10.5 19.77Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</label>
</nav>
<nav className="navbar">
<input type="checkbox" className="navbar-toggle" id="BasicNavbarToggle"/>
<a href="#" className="branding-logo">Arts Oven UI</a>
<div className="navbar-content">
<ul>
<li><a href="#" className="nav-link">Home</a></li>
<li><a href="#" className="nav-link">Features</a></li>
<li><a href="#" className="nav-link">Pricing</a></li>
<li><a href="#" className="nav-link">Contact</a></li>
</ul>
</div>
<label for="navbarToggle" className="navbar-toggle-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 8.52V3.98C22 2.57 21.36 2 19.77 2H15.73C14.14 2 13.5 2.57 13.5 3.98V8.51C13.5 9.93 14.14 10.49 15.73 10.49H19.77C21.36 10.5 22 9.93 22 8.52Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 19.77V15.73C22 14.14 21.36 13.5 19.77 13.5H15.73C14.14 13.5 13.5 14.14 13.5 15.73V19.77C13.5 21.36 14.14 22 15.73 22H19.77C21.36 22 22 21.36 22 19.77Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 8.52V3.98C10.5 2.57 9.86 2 8.27 2H4.23C2.64 2 2 2.57 2 3.98V8.51C2 9.93 2.64 10.49 4.23 10.49H8.27C9.86 10.5 10.5 9.93 10.5 8.52Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 19.77V15.73C10.5 14.14 9.86 13.5 8.27 13.5H4.23C2.64 13.5 2 14.14 2 15.73V19.77C2 21.36 2.64 22 4.23 22H8.27C9.86 22 10.5 21.36 10.5 19.77Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</label>
</nav>
With Logo
<nav class="navbar">
<input type="checkbox" class="navbar-toggle" id="AdvanceNavbarToggle"/>
<a href="#">
<svg class="size-8" id="Layer_2" fill="currentColor" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 543.15 674.35">
<defs>
<linearGradient id="linear-gradient" x1=".52" y1="261.59" x2="543.15" y2="261.59" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffb9ef"/>
<stop offset=".23" stop-color="#887df6"/>
<stop offset=".28" stop-color="#6f79f7"/>
<stop offset=".49" stop-color="#0f6efe"/>
<stop offset=".55" stop-color="#1274fb"/>
<stop offset=".63" stop-color="#1d88f5"/>
<stop offset=".73" stop-color="#2fa7eb"/>
<stop offset=".75" stop-color="#33aee9"/>
<stop offset="1" stop-color="#4ffff3"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0" y1="262.18" x2="357.26" y2="262.18" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-3" x1="233.8" y1="218.69" x2="210.32" y2="357.21" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" stop-opacity=".5"/>
<stop offset=".26" stop-color="#fff" stop-opacity=".3"/>
<stop offset=".59" stop-color="#fff" stop-opacity=".05"/>
<stop offset=".75" stop-color="#fff" stop-opacity="0"/>
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
<linearGradient id="linear-gradient-4" x1="322.5" y1="363.28" x2="466.39" y2="449.1" xlink:href="#linear-gradient-3"/>
<linearGradient id="linear-gradient-5" x1="-893.64" y1="538.14" x2="-564.13" y2="636.93" gradientTransform="translate(-406.8 1168.87) rotate(-180)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f15a29"/>
<stop offset=".26" stop-color="#f17864"/>
<stop offset=".59" stop-color="#fe251a"/>
<stop offset=".75" stop-color="#ff4e4f"/>
<stop offset="1" stop-color="#ffc0ad"/>
</linearGradient>
<linearGradient id="linear-gradient-6" x1="-879.98" y1="510.82" x2="-555.29" y2="623.94" gradientTransform="translate(-406.8 1168.87) rotate(-180)" xlink:href="#linear-gradient-3"/>
</defs>
<g id="Layer_1-2" data-name="Layer 1">
<g>
<g>
<path class="cls-1" d="M534.19,389.26c-22.9-92.81-65.56-181.46-119.58-260.11C379.93,78.68,319.73-28.57,244.09,7.14c-53.29,25.16-91.96,82.95-123.1,130.68-20.12,30.83-39.04,62.83-55.31,95.88,0,0-123.9,241.54-30.01,282.42,93.89,40.87,233.27-109.16,233.27-109.16,0,0,135.51,132.61,237.14,105.5,51.31-13.68,37.29-85.98,28.1-123.21ZM279.53,300.01c-26.23,45.43-66.19,71.46-89.27,58.14-23.07-13.32-20.51-60.95,5.71-106.38,26.23-45.43,66.19-71.46,89.27-58.14,23.07,13.32,20.51,60.95-5.71,106.38Z"/>
<path class="cls-4" d="M310.61,38.41c-19-15.58-43.54-20.48-67.52-17.28-9.69,1.29-25.9,3.27-33.97,9.7-73.38,58.45-135.19,186.94-135.19,186.94C-19.47,398.3,2.17,467.89,2.17,467.89c16.83,30.91,65.45,73.63,186.44-25.1,60.54-49.4,115.14-110.01,145.27-182.97,28.35-68.65,41.48-168.32-23.27-221.41ZM279.53,300.01c-26.23,45.43-66.19,71.46-89.27,58.14-23.07-13.32-20.51-60.95,5.71-106.38,26.23-45.43,66.19-71.46,89.27-58.14,23.07,13.32,20.51,60.95-5.71,106.38Z"/>
<path class="cls-5" d="M189.62,358.15c-23.07-13.32-20.51-60.95,5.71-106.38,26.23-45.43,66.19-71.46,89.27-58.14,7.79,4.5,12.65,12.91,14.67,23.82-1.85-17.26-8.92-31.04-21.19-38.13-28.53-16.47-74.35,9.47-102.34,57.95-27.99,48.48-27.55,101.13.99,117.6,4.92,2.84,10.36,4.42,16.14,4.84-1.11-.44-2.2-.97-3.24-1.57Z"/>
<path class="cls-6" d="M269.13,407.1s79.63-99.59,197.69-48.99c0,0,58.53,29.76,56.55,101.19,0,0-2.97,41.21-46.62,54.34,0,0-76.93,14.88-207.62-106.54Z"/>
</g>
<g>
<path class="cls-3" d="M496.25,611.04s-53.65,74.8-143.03,61.79c-13.16-1.92-25.84-6.29-37.53-12.64-11.75-6.39-28.3-16.66-44.99-31.23-31.03-27.1-37.59-33.66-37.59-33.66,0,0-44.58-46.77-80.86-41.96,0,0,49.83-79.99,156.48-59.01,0,0,34.09,5.68,66.88,38.9l38.47,38.47s31.91,37.59,82.18,39.34Z"/>
<path class="cls-2" d="M233.12,595.3s6.56,6.56,37.59,33.66c16.68,14.57,33.24,24.84,44.99,31.23,11.68,6.35,24.37,10.72,37.53,12.64,89.38,13.01,143.03-61.79,143.03-61.79-.18,0-.35-.02-.52-.02-23.79,13.52-55.3,23.62-93.19,18.14-13.25-1.92-26.02-6.29-37.78-12.64-11.82-6.39-28.49-16.66-45.29-31.23-31.24-27.1-37.84-33.66-37.84-33.66,0,0-44.38-46.24-80.79-42.03-32.81,18.41-48.58,43.74-48.58,43.74,36.28-4.81,80.86,41.96,80.86,41.96Z"/>
</g>
</g>
</g>
</svg>
</a>
<div class="navbar-content">
<ul>
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#" class="nav-link">Features</a></li>
<li><a href="#" class="nav-link">Pricing</a></li>
<li><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
<a class="btn btn-primary">Sign In</a>
<label for="AdvanceNavbarToggle" class="navbar-toggle-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 8.52V3.98C22 2.57 21.36 2 19.77 2H15.73C14.14 2 13.5 2.57 13.5 3.98V8.51C13.5 9.93 14.14 10.49 15.73 10.49H19.77C21.36 10.5 22 9.93 22 8.52Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 19.77V15.73C22 14.14 21.36 13.5 19.77 13.5H15.73C14.14 13.5 13.5 14.14 13.5 15.73V19.77C13.5 21.36 14.14 22 15.73 22H19.77C21.36 22 22 21.36 22 19.77Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 8.52V3.98C10.5 2.57 9.86 2 8.27 2H4.23C2.64 2 2 2.57 2 3.98V8.51C2 9.93 2.64 10.49 4.23 10.49H8.27C9.86 10.5 10.5 9.93 10.5 8.52Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 19.77V15.73C10.5 14.14 9.86 13.5 8.27 13.5H4.23C2.64 13.5 2 14.14 2 15.73V19.77C2 21.36 2.64 22 4.23 22H8.27C9.86 22 10.5 21.36 10.5 19.77Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</label>
</nav>
<nav className="navbar">
<input type="checkbox" className="navbar-toggle" id="AdvanceNavbarToggle"/>
<a href="#">
<svg className="size-8" id="Layer_2" fill="currentColor" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 543.15 674.35">
<defs>
<linearGradient id="linear-gradient" x1=".52" y1="261.59" x2="543.15" y2="261.59" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ffb9ef"/>
<stop offset=".23" stop-color="#887df6"/>
<stop offset=".28" stop-color="#6f79f7"/>
<stop offset=".49" stop-color="#0f6efe"/>
<stop offset=".55" stop-color="#1274fb"/>
<stop offset=".63" stop-color="#1d88f5"/>
<stop offset=".73" stop-color="#2fa7eb"/>
<stop offset=".75" stop-color="#33aee9"/>
<stop offset="1" stop-color="#4ffff3"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0" y1="262.18" x2="357.26" y2="262.18" xlink:href="#linear-gradient"/>
<linearGradient id="linear-gradient-3" x1="233.8" y1="218.69" x2="210.32" y2="357.21" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" stop-opacity=".5"/>
<stop offset=".26" stop-color="#fff" stop-opacity=".3"/>
<stop offset=".59" stop-color="#fff" stop-opacity=".05"/>
<stop offset=".75" stop-color="#fff" stop-opacity="0"/>
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
<linearGradient id="linear-gradient-4" x1="322.5" y1="363.28" x2="466.39" y2="449.1" xlink:href="#linear-gradient-3"/>
<linearGradient id="linear-gradient-5" x1="-893.64" y1="538.14" x2="-564.13" y2="636.93" gradientTransform="translate(-406.8 1168.87) rotate(-180)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f15a29"/>
<stop offset=".26" stop-color="#f17864"/>
<stop offset=".59" stop-color="#fe251a"/>
<stop offset=".75" stop-color="#ff4e4f"/>
<stop offset="1" stop-color="#ffc0ad"/>
</linearGradient>
<linearGradient id="linear-gradient-6" x1="-879.98" y1="510.82" x2="-555.29" y2="623.94" gradientTransform="translate(-406.8 1168.87) rotate(-180)" xlink:href="#linear-gradient-3"/>
</defs>
<g id="Layer_1-2" data-name="Layer 1">
<g>
<g>
<path class="cls-1" d="M534.19,389.26c-22.9-92.81-65.56-181.46-119.58-260.11C379.93,78.68,319.73-28.57,244.09,7.14c-53.29,25.16-91.96,82.95-123.1,130.68-20.12,30.83-39.04,62.83-55.31,95.88,0,0-123.9,241.54-30.01,282.42,93.89,40.87,233.27-109.16,233.27-109.16,0,0,135.51,132.61,237.14,105.5,51.31-13.68,37.29-85.98,28.1-123.21ZM279.53,300.01c-26.23,45.43-66.19,71.46-89.27,58.14-23.07-13.32-20.51-60.95,5.71-106.38,26.23-45.43,66.19-71.46,89.27-58.14,23.07,13.32,20.51,60.95-5.71,106.38Z"/>
<path class="cls-4" d="M310.61,38.41c-19-15.58-43.54-20.48-67.52-17.28-9.69,1.29-25.9,3.27-33.97,9.7-73.38,58.45-135.19,186.94-135.19,186.94C-19.47,398.3,2.17,467.89,2.17,467.89c16.83,30.91,65.45,73.63,186.44-25.1,60.54-49.4,115.14-110.01,145.27-182.97,28.35-68.65,41.48-168.32-23.27-221.41ZM279.53,300.01c-26.23,45.43-66.19,71.46-89.27,58.14-23.07-13.32-20.51-60.95,5.71-106.38,26.23-45.43,66.19-71.46,89.27-58.14,23.07,13.32,20.51,60.95-5.71,106.38Z"/>
<path class="cls-5" d="M189.62,358.15c-23.07-13.32-20.51-60.95,5.71-106.38,26.23-45.43,66.19-71.46,89.27-58.14,7.79,4.5,12.65,12.91,14.67,23.82-1.85-17.26-8.92-31.04-21.19-38.13-28.53-16.47-74.35,9.47-102.34,57.95-27.99,48.48-27.55,101.13.99,117.6,4.92,2.84,10.36,4.42,16.14,4.84-1.11-.44-2.2-.97-3.24-1.57Z"/>
<path class="cls-6" d="M269.13,407.1s79.63-99.59,197.69-48.99c0,0,58.53,29.76,56.55,101.19,0,0-2.97,41.21-46.62,54.34,0,0-76.93,14.88-207.62-106.54Z"/>
</g>
<g>
<path class="cls-3" d="M496.25,611.04s-53.65,74.8-143.03,61.79c-13.16-1.92-25.84-6.29-37.53-12.64-11.75-6.39-28.3-16.66-44.99-31.23-31.03-27.1-37.59-33.66-37.59-33.66,0,0-44.58-46.77-80.86-41.96,0,0,49.83-79.99,156.48-59.01,0,0,34.09,5.68,66.88,38.9l38.47,38.47s31.91,37.59,82.18,39.34Z"/>
<path class="cls-2" d="M233.12,595.3s6.56,6.56,37.59,33.66c16.68,14.57,33.24,24.84,44.99,31.23,11.68,6.35,24.37,10.72,37.53,12.64,89.38,13.01,143.03-61.79,143.03-61.79-.18,0-.35-.02-.52-.02-23.79,13.52-55.3,23.62-93.19,18.14-13.25-1.92-26.02-6.29-37.78-12.64-11.82-6.39-28.49-16.66-45.29-31.23-31.24-27.1-37.84-33.66-37.84-33.66,0,0-44.38-46.24-80.79-42.03-32.81,18.41-48.58,43.74-48.58,43.74,36.28-4.81,80.86,41.96,80.86,41.96Z"/>
</g>
</g>
</g>
</svg>
</a>
<div className="navbar-content">
<ul>
<li><a href="#" className="nav-link">Home</a></li>
<li><a href="#" className="nav-link">Features</a></li>
<li><a href="#" className="nav-link">Pricing</a></li>
<li><a href="#" className="nav-link">Contact</a></li>
</ul>
</div>
<a className="btn btn-primary">Sign In</a>
<label for="AdvanceNavbarToggle" className="navbar-toggle-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 8.52V3.98C22 2.57 21.36 2 19.77 2H15.73C14.14 2 13.5 2.57 13.5 3.98V8.51C13.5 9.93 14.14 10.49 15.73 10.49H19.77C21.36 10.5 22 9.93 22 8.52Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 19.77V15.73C22 14.14 21.36 13.5 19.77 13.5H15.73C14.14 13.5 13.5 14.14 13.5 15.73V19.77C13.5 21.36 14.14 22 15.73 22H19.77C21.36 22 22 21.36 22 19.77Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 8.52V3.98C10.5 2.57 9.86 2 8.27 2H4.23C2.64 2 2 2.57 2 3.98V8.51C2 9.93 2.64 10.49 4.23 10.49H8.27C9.86 10.5 10.5 9.93 10.5 8.52Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 19.77V15.73C10.5 14.14 9.86 13.5 8.27 13.5H4.23C2.64 13.5 2 14.14 2 15.73V19.77C2 21.36 2.64 22 4.23 22H8.27C9.86 22 10.5 21.36 10.5 19.77Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</label>
</nav>