Navs

Base nav

<nav class="ampstart-headerbar-nav ampstart-nav">
  <ul class="list-reset center m0 p0 flex flex-wrap">
    <li class="ampstart-nav-item relative">
      <header>Navbar</header>
    </li>
    <li class="ampstart-nav-item ">
      <a href="#" class="text-decoration-none block">Home</a>
    </li>
    <li class="ampstart-nav-item relative">
      <a href="#" class="text-decoration-none block">Features</a>
    </li>
    <li class="ampstart-nav-item ">
      <button class="ampstart-btn ampstart-btn-secondary" disabled>Disabled</button>
    </li>
  </ul>
</nav>
                

Horizontal alignment

Centered with .flex flex-wrap justify-around items-center :

<nav class="ampstart-headerbar-nav flex flex-wrap justify-around items-center">
  <ul class="list-reset center m0 p0 flex flex-wrap">
    <li class="ampstart-nav-item relative">
      <header>Navbar</header>
    </li>
    <li class="ampstart-nav-item ">
      <a href="#" class="text-decoration-none block">Home</a>
    </li>
    <li class="ampstart-nav-item relative">
      <a href="#" class="text-decoration-none block">Features</a>
    </li>
    <li class="ampstart-nav-item ">
      <button class="ampstart-btn ampstart-btn-secondary" disabled>Disabled</button>
    </li>
  </ul>
</nav>
            

Right aligned with .flex flex-wrap justify-end items-end :

<nav class="ampstart-headerbar-nav ampstart-nav flex flex-wrap justify-end items-end">
  <ul class="list-reset center m0 p0 flex flex-wrap">
    <li class="ampstart-nav-item relative">
      <header>Navbar</header>
    </li>
    <li class="ampstart-nav-item ">
      <a href="#" class="text-decoration-none block">Home</a>
    </li>
    <li class="ampstart-nav-item relative">
      <a href="#" class="text-decoration-none block">Features</a>
    </li>
    <li class="ampstart-nav-item ">
      <button class="ampstart-btn ampstart-btn-secondary" disabled>Disabled</button>
    </li>
  </ul>
</nav>
              

Vertical

Stack your navigation by changing the flex item direction with the .flex-column utility.

<nav class="ampstart-headerbar-nav ampstart-nav">
  <ul class="list-reset center m0 p0 flex flex-column justify-start align-item items-start nowrap">
    <li class="ampstart-nav-item relative">
      <header>Navbar</header>
    </li>
    <li class="ampstart-nav-item ">
      <a href="#" class="text-decoration-none block">Home</a>
    </li>
    <li class="ampstart-nav-item relative">
      <a href="#" class="text-decoration-none block">Features</a>
    </li>
    <li class="ampstart-nav-item ">
      <button class="ampstart-btn ampstart-btn-secondary" disabled>Disabled</button>
    </li>
  </ul>
</nav>
              

As always, vertical navigation is possible without <ul> s, too.

<nav class="ampstart-headerbar-nav ampstart-nav px2">
  <header>Navbar</header>
  <a href="#" class="text-decoration-none block">Home</a>
  <a href="#" class="text-decoration-none block">Features</a>
  <button class="ampstart-btn ampstart-btn-secondary" disabled>Disabled</button>
</nav>