@travlrcom/uikit/site/components/header.html

TRAVLR UiKit

<header class="t-navbar-top t-background-white t-position-fixed">
  <div class="t-container t-clearfix">
    <div class="t-navbar-top-left t-float-left t-display-table">

      <div class="t-navbar-top-left-logo t-display-table-cell t-v-align-middle t-p-r-16">
        <a href="/">
          <img
            src="./../../src/assets/images/statics/travlr-uikit-logo.svg"
            alt="TRAVLR Logo"
            title="TRAVLR Logo"
            class="t-navbar-top-left-logo-image">
        </a>
      </div>

      <nav class="t-navbar-top-left-menus t-display-table-cell t-v-align-middle t-hidden-mobile">
        <ul class="t-navbar-top-left-menus-list t-no-margin t-clearfix">
          <li class="t-navbar-top-left-menus-list-item t-float-left">
            <a
              href="/documentations.html"
              class="t-navbar-top-left-menus-list-item-link t-color-grey-darkest t-text-callout"
              title="Documentations">
              Documentations
            </a>

            <ul class="t-navbar-top-left-menus-list-item-child t-background-white t-position-absolute t-primary-box-shadow">
              <li class="t-navbar-top-left-menus-list-item-child-item">
                <a
                  href="colour-pallete.html"
                  class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
                  title="Colour Pallete">
                  Colour Pallete
                  <i class="t-icon icon-angle-right-small"></i>
                </a>

                <ul class="t-navbar-top-left-menus-list-item-child-item-grandchild t-background-white t-position-absolute t-primary-box-shadow">
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/theme-colours.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Theme Colours">
                      Theme Colours
                    </a>
                  </li>
                </ul>
              </li>
              <li class="t-navbar-top-left-menus-list-item-child-item">
                <a
                  href="typography.html"
                  class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
                  title="Typography">
                  Typography
                  <i class="t-icon icon-angle-right-small"></i>
                </a>

                <ul class="t-navbar-top-left-menus-list-item-child-item-grandchild t-background-white t-position-absolute t-primary-box-shadow">
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/hierarchy.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Hierarchy">
                      Hierarchy
                    </a>
                  </li>
                </ul>
              </li>
              <li class="t-navbar-top-left-menus-list-item-child-item">
                <a
                  href="assets.html"
                  class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
                  title="News &amp; Articles">
                  Assets
                  <i class="t-icon icon-angle-right-small"></i>
                </a>

                <ul class="t-navbar-top-left-menus-list-item-child-item-grandchild t-background-white t-position-absolute t-primary-box-shadow">
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/ui-icons.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="UI Icons">
                      UI Icons
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/content-icons.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Content Icons">
                      Content Icons
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/brands-icons.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Brands Icons">
                      Brands Icons
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/loading-spinners.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Loading Spinners">
                      Loading Spinners
                    </a>
                  </li>
                </ul>
              </li>
              <li class="t-navbar-top-left-menus-list-item-child-item">
                <a
                  href="elements.html"
                  class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
                  title="Top Users">
                  Elements
                  <i class="t-icon icon-angle-right-small"></i>
                </a>

                <ul class="t-navbar-top-left-menus-list-item-child-item-grandchild t-background-white t-position-absolute t-primary-box-shadow">
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/button.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Button">
                      Button
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/radio-button.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Radio button">
                      Radio button
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/checkbox.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Checkbox">
                      Checkbox
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/toggle-button.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Toggle button">
                      Toggle button
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/text-input.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Text Input">
                      Text Input
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/selection-input.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Selection Input">
                      Selection Input
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/badge.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Badge">
                      Badge
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/tags.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Tags">
                      Tags
                    </a>
                  </li>                  
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/image.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Image">
                      Image
                    </a>
                  </li>
                </ul>
              </li>
              <li class="t-navbar-top-left-menus-list-item-child-item">
                <a
                  href="components.html"
                  class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
                  title="Top Users">
                  Components
                  <i class="t-icon icon-angle-right-small"></i>
                </a>

                <ul class="t-navbar-top-left-menus-list-item-child-item-grandchild t-background-white t-position-absolute t-primary-box-shadow">
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/dropdown.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Dropdown">
                      Dropdown
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/date-picker.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Date Picker">
                      Date Picker
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/number-picker.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Number picker">
                      Number picker
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/slider.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Slider">
                      Slider
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/alert.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Alert">
                      Alert
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/notification.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Notification">
                      Notification
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/message.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Message">
                      Message
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/tooltip.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Tooltip">
                      Tooltip
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/modal.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Modal">
                      Modal
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/cards.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Cards">
                      Cards
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/panel.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Panel">
                      Panel
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/tabs.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Tabs">
                      Tabs
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/breadcrumb.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Breadcrumb">
                      Breadcrumb
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/steps.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Steps">
                      Steps
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/pagination.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Pagination">
                      Pagination
                    </a>
                  </li>
                </ul>
              </li>
              <li class="t-navbar-top-left-menus-list-item-child-item">
                <a
                  href="layouts.html"
                  class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
                  title="Typography">
                  Layouts
                  <i class="t-icon icon-angle-right-small"></i>
                </a>

                <ul class="t-navbar-top-left-menus-list-item-child-item-grandchild t-background-white t-position-absolute t-primary-box-shadow">
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/grid.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Grid">
                      Grid
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/navbar.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Navbar">
                      Navbar
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/hero.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Hero">
                      Hero
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/carousel.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Carousel">
                      Carousel
                    </a>
                  </li>
                  <li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
                    <a
                      href="/image-slideshow.html"
                      class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
                      title="Image Slideshow">
                      Image Slideshow
                    </a>
                  </li>
                </ul>
              </li>
            </ul>

          </li>

          <li class="t-navbar-top-left-menus-list-item t-float-left">
            <a
              href="https://github.com/travlrcom/UiKit/issues"
              class="t-navbar-top-left-menus-list-item-link t-color-grey-darkest t-text-callout"
              title="Issues">
              Issues
            </a>
          </li>
          <li class="t-navbar-top-left-menus-list-item t-float-left">
            <a
              href="https://github.com/travlrcom/Travlr/"
              target="_blank"
              class="t-navbar-top-left-menus-list-item-link t-color-grey-darkest t-text-callout"
              title="Contribute">
              Contribute
            </a>
          </li>
        </ul>
      </nav>

    </div>

    <div class="t-navbar-top-right t-float-right t-display-table">
      <nav class="t-navbar-top-right-auth-container t-display-table-cell t-v-align-middle">
        <ul class="t-navbar-top-right-menus-list t-clearfix t-no-margin t-display-table t-p-l-20">
          <li class="t-navbar-top-right-menus-list-item t-display-table-cell t-hidden-mobile">
            <a
              href="http://"
              class="t-btn t-btn-small t-btn-tertiary"
              title="Download v1.0.0">Download v1.0.0
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>