1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegación tabsnavigationvertical

Side Navigation Tabs

Pestañas dispuestas verticalmente a la izquierda con paneles de contenido a la derecha.

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { SideNavigationTabs } from 'astro-component-kit';
---

<VerticalTabs>Content</VerticalTabs>
--- import { SideNavigationTabs } from 'astro-component-kit'; --- <VerticalTabs>Content</VerticalTabs>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/SideNavigationTabs.astro:

astro 
---
---
<div class="v-tabs">
  <button class="v-tab active">General</button>
  <button class="v-tab">Account</button>
  <button class="v-tab">Security</button>
  <button class="v-tab">Notifications</button>
</div>
<style>
  .v-tabs { display: flex; flex-direction: column; width: 200px; border-left: 2px solid #1e293b; }
  .v-tab { background: none; border: none; padding: 0.75rem 1.25rem; text-align: left; color: #64748b; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: 0.2s; border-left: 2px solid transparent; margin-left: -2px; }
  .v-tab:hover { color: #fff; }
  .v-tab.active { color: #6366f1; border-left-color: #6366f1; background: rgba(99,102,241,0.05); }
</style>
--- --- <div class="v-tabs"> <button class="v-tab active">General</button> <button class="v-tab">Account</button> <button class="v-tab">Security</button> <button class="v-tab">Notifications</button> </div> <style> .v-tabs { display: flex; flex-direction: column; width: 200px; border-left: 2px solid #1e293b; } .v-tab { background: none; border: none; padding: 0.75rem 1.25rem; text-align: left; color: #64748b; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: 0.2s; border-left: 2px solid transparent; margin-left: -2px; } .v-tab:hover { color: #fff; } .v-tab.active { color: #6366f1; border-left-color: #6366f1; background: rgba(99,102,241,0.05); } </style>

Información Rápida

Categoría
Navegación
Nombre de archivo
SideNavigationTabs.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
tabsnavigationvertical