FREE CSS COMPONENT

Navigation Bar

Keep navigation focused on the most important destinations and make the mobile state explicit.

Live preview

HTML

<nav class="demo-nav" aria-label="Primary"><strong>WEBCRAFT</strong><div><a href="#">Work</a><a href="#">Contact</a></div></nav>

CSS

.demo-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border:1px solid #ddd;background:#fff;color:#111}.demo-nav strong{font:700 15px Inter,sans-serif}.demo-nav div{display:flex;gap:16px;font:12px Inter,sans-serif}