Components

Navigation

The navigation component is used to display the primary navigation in the sidebar of the frame of an application.

Simple Navigation

HTML & AlpineJS

<style>
.navlink::before {
    content: '';
    position: absolute;
    top: 0.0625rem;
    bottom: 0.0625rem;
    left: -0.425rem;
    width: 0.2275rem;
    background-color: #4d04dc;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
</style>
<div class="w-full bg-gray-100 rounded pl-2 p-4 not-prose flex border 
          border-gray-300">
<div class="w-48 pr-2 border-r border-gray-200 px-0 pt-4" 
    x-data="{tabs:['Home', 'Marketing', 'Teams', 'Billing'], selected: 'Home'} ">
    
  <template x-for="t in tabs" :key="t">
      <div class="relative flex w-full">
       <a id="" href="#" @click="selected = t"
        class="w-full items-center px-3 py-1 text-sm font-medium 
        rounded-r border-purple-500"
        :class="t == selected ? 'relative navlink bg-gray-200 text-gray-900': 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 hover:navlink hover:-ml-[2px]'">
        <span class="truncate" x-text="t">T</span>
       </a>
      <div>
  </template>
</div>
  
</div>