Navigation sidebarnavigationlayout

Minimal Sidebar

A vertical navigation sidebar for dashboard-style interfaces.

Usage

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

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

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

Manual Installation

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

astro 
---
---
<aside class="sidebar">
  <div class="sidebar-logo">AU</div>
  <nav class="sidebar-nav">
    <a href="#" class="active">Overview</a>
    <a href="#">Projects</a>
    <a href="#">Team</a>
    <a href="#">Settings</a>
  </nav>
</aside>
<style>
  .sidebar { width: 240px; height: 100vh; background: #080b14; border-right: 1px solid rgba(255, 255, 255, 0.1); padding: 1.5rem; display: flex; flex-direction: column; gap: 2rem; }
  .sidebar-logo { width: 40px; height: 40px; background: #6366f1; color: #fff; display: grid; place-items: center; border-radius: 10px; font-weight: 900; }
  .sidebar-nav { display: flex; flex-direction: column; gap: 0.5rem; }
  .sidebar-nav a { padding: 0.75rem 1rem; border-radius: 10px; color: #94a3b8; text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: 0.2s; }
  .sidebar-nav a:hover, .sidebar-nav a.active { background: rgba(255,255,255,0.05); color: #fff; }
</style>
--- --- <aside class="sidebar"> <div class="sidebar-logo">AU</div> <nav class="sidebar-nav"> <a href="#" class="active">Overview</a> <a href="#">Projects</a> <a href="#">Team</a> <a href="#">Settings</a> </nav> </aside> <style> .sidebar { width: 240px; height: 100vh; background: #080b14; border-right: 1px solid rgba(255, 255, 255, 0.1); padding: 1.5rem; display: flex; flex-direction: column; gap: 2rem; } .sidebar-logo { width: 40px; height: 40px; background: #6366f1; color: #fff; display: grid; place-items: center; border-radius: 10px; font-weight: 900; } .sidebar-nav { display: flex; flex-direction: column; gap: 0.5rem; } .sidebar-nav a { padding: 0.75rem 1rem; border-radius: 10px; color: #94a3b8; text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: 0.2s; } .sidebar-nav a:hover, .sidebar-nav a.active { background: rgba(255,255,255,0.05); color: #fff; } </style>

Quick Info

Category
Navigation
Filename
MinimalSidebar.astro
Dependencies
None — pure Astro + CSS
Tags
sidebarnavigationlayout