Navigation

Navigations are used at the top of a page. It can contain a number of items but try to keep it at a minimum.

@import url(https://vera-ui.netlify.app/styles/navigation.css)

<link rel="stylesheet" href="https://vera-ui.netlify.app/styles/navigation.css">

Desktop Navigation

A navigation bar specifically for the desktop view.

Use a larger screen to view the component

<header class="nav">
  <a href="" class="nav-brand-link">
    <span>
      <img
        src="..."
        alt="Nav brand"
        class="nav-brand-logo"
      />
      <span class="nav-brand-name">VERA UI</span>
    </span>
  </a>
  <ul class="nav-link-section">
    <a href="">
      <li class="nav-link">Components</li>
    </a>
    <a href="">
      <li class="nav-link">Resources</li>
    </a>
    <a href="">
      <li class="nav-link">Documentation</li>
    </a>
  </ul>
</header>