Top Navigation

The top navigation bar may have arbitrary components inside of it.

The optional top navigation is displayed at the top of the page. Use Bootstrap's float classes to align items to the left or to the right. This page also applies some styling to the top nav content in order to get the items to line up properly.

<ma-top-nav>
  <form (submit)='handleSubmit()'
        role='search'
        class='float-xs-left'>
    <fa name='search' size='lg'></fa>
    <input type='search'
           placeholder='Search'
           [(ngModel)]='searchTerm'>
  </form>
  <div class='float-xs-right buttons'>
    <ma-button size='small'
               href='...'>
      <fa name='github'></fa>
      View On GitHub
    </ma-button>
    <ma-button size='small'
               href='...'>
      <fa name='cloud-download'></fa>
      Download ZIP
    </ma-button>
  </div>
</ma-top-nav>

Note that <ma-button> and input are automatically re-styled to blend in when it appears in the top navigation bar.

The top navigation may be fixed (doesn't move when you scroll the content) or static (scrolls with the content).

You may experiment with the top navigation using the controls above.

Dummy Card

This card is here to take up space.

This card is very tall in order to demonstrate the difference between a fixed and static top navigation. Try scrolling up and down after toggling the "Fixed position" checkbox above.