Navigation tabsnavigationvertical

Side Navigation Tabs

Vertical list of tabs for settings or sub-navigation.

Usage

Copy the full block below to use this component with its imports.

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

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

Manual Installation

If you are not using the npm package, create a new file src/components/lib/SideNavigationTabs.astro and paste the following code:

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>

Quick Info

Category
Navigation
Filename
SideNavigationTabs.astro
Dependencies
None — pure Astro + CSS
Tags
tabsnavigationvertical