Addon sidebar HTML tabbed navigation starter - Alpine JS and Bootstrap 5

PHOTO EMBED

Mon Jun 14 2021 04:45:17 GMT+0000 (Coordinated Universal Time)

Saved by @dsottimano 

<!DOCTYPE html>

<head>
  <base target="_top">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.7.3/alpine.js" integrity="sha512-75Z8FcPtZb4kdeeSPKU/9jZXmEDxjJyhcxgW0jnREzF0zimwATSl/0Or28Eq3KbZ5wmBuGpahcim4VG7rwKNIg==" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

  <style>

  </style>
</head>

<body>

  <div x-data="allData()">
    <nav class="nav nav-tabs">
      <a href="" class="nav-link" :class="{ 'active' : tab =='formulas' }" @click="tab = 'formulas'">Formulas</a>
      <a href="" class="nav-link" :class="{ 'active': tab === 'keys' }" @click="tab = 'keys'">Keys</a>
      <a href="" class="nav-link" :class="{ 'active': tab === 'search' }" @click="tab = 'search'">Search</a>
    </nav>

    <div class="container" x-show="tab === 'formulas'">

    </div>

    <div class="container" x-show="tab === 'keys'">

    </div>

    <div class="container" x-show="tab === 'search'">

    </div>

  </div>

  <script>
    function allData() {
      return {
        tab: 'formulas'
      }
    }
  </script>

</body>

</html>
content_copyCOPY

https://codepen.io/pen/