NavBar

The header of the website, which includes the logo and navigation items.

React
CSS

<NavBar
  logo={
    <Link to="/" exact>
      <img
        src="/pallote-logo.svg"
        alt="Logo for Pallote"
      />
    </Link>
  }
>
  <NavItem label='Home' active component={Link} to='' />
  <NavItem
    label='About'
    dropdown={
      <>
        <NavItem label='Services' component={Link} to='' />
        <NavItem label='Teams' component={Link} to='' />
      </>
    }
  />
  <NavItem label='Contact' component={Link} to='' />
</NavBar>

<header>
  <div class="section navbar">
    <div class="section_container">
      <div class="navbar_main">
        <a href="/" class="navbar_logo">
          <img alt="Logo for Pallote" src="/logos-logo.svg">
        </a>
        <button aria-label="Open mobile menu" class="navbar_button">
          <span></span>
        </button>
      </div>
      <nav aria-label="main-nav" class="navbar_nav nav">
        <div class="nav_container">
          <div class="nav_item">
            <a class="nav_trigger nav_trigger-active" href="">Home</a>
          </div>
          <div class="nav_item nav_item-dropdown">
            <button class="nav_trigger">About</button>
            <div class="nav_target">
              <div class="nav_item">
                <a class="nav_trigger" href="">Services</a>
              </div>
              <div class="nav_item">
                <a class="nav_trigger" href="">Teams</a>
              </div>
            </div>
          </div>
          <div class="nav_item">
            <a class="nav_trigger" href="">Contact</a>
          </div>
        </div>
      </nav>
    </div>
  </div>
</header>

Props

Align

React
CSS

<NavBar
  logo={
    <Link to="/" exact>
      <img
        src="/pallote-logo.svg"
        alt="Logo for Pallote"
      />
    </Link>
  }
>
  {/* insert nav items */}
</NavBar>

<NavBar
  logo={
    <Link to="/" exact>
      <img
        src="/pallote-logo.svg"
        alt="Logo for Pallote"
      />
    </Link>
  }
  align="right"
>
  {/* insert nav items */}
</NavBar>

<header>
  <div class="section navbar">
    <div class="section_container">
      <div class="navbar_main">
        <a href="/" class="navbar_logo">
          <img alt="Logo for Pallote" src="/logos-logo.svg">
        </a>
        <button aria-label="Open mobile menu" class="navbar_button">
          <span></span>
        </button>
      </div>
      <nav aria-label="main-nav" class="navbar_nav nav">
        <div class="nav_container">
          <!-- insert nav items -->
        </div>
      </nav>
    </div>
  </div>
</header>

<header>
  <div class="section navbar navbar-right">
    <div class="section_container">
      <div class="navbar_main">
        <a href="/" class="navbar_logo">
          <img alt="Logo for Pallote" src="/logos-logo.svg">
        </a>
        <button aria-label="Open mobile menu" class="navbar_button">
          <span></span>
        </button>
      </div>
      <nav aria-label="main-nav" class="navbar_nav nav">
        <div class="nav_container">
          <!-- insert nav items -->
        </div>
      </nav>
    </div>
  </div>
</header>

Props​

Align​

Props

Align