<link rel="stylesheet" href="https://cdn.byu.edu/byu-theme-components/latest/byu-theme-components.min.css">
<script src="https://cdn.byu.edu/byu-theme-components/latest/byu-theme-components.min.js"></script>

<byu-header>
  <a slot="site-title" href="some-site.byu.edu">Site Title</a>
  <byu-menu slot="nav">
    <a href="#link1">Link 1</a>
    <a href="#link2">Link 2</a>
    <a href="#link3">Link 3</a>
    <a href="#link4">Link 4</a>
  </byu-menu>
  <byu-search slot="search" action="submit-form">
    <form action="search.php">
      <input type="search" name="search" />
    </form>
  </byu-search>
  <byu-user-info slot="user">
    <a slot="login" href="#login">Sign In</a>
    <a slot="logout" href="#logout">Sign Out</a>
    <span slot="user-name">Joe Student</span>
  </byu-user-info>
</byu-header>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.